文章目录
- 一、DOM介绍
- 二、节点选择器
- 三、属性操作
- 四、样式操作
- 五、尺寸类属性的快速获取
- 六、标签操作
- 八、练习
一、DOM介绍
- DOM：文档对象模型，
document，提供了网页的相关操作。document是window的子对象之一，但是DOM不属于BOM
- DOM的文档结构是由众多成份组成的一个树状关系模型，在这个关系模型中的任何一个成份都是节点，每一个节点的数据类型，都是对象
- 元素节点
- 属性节点
- 文本节点
- 注释节点
- 根节点
- 操作流程：选择器->属性，样式，内容，元素
二、节点选择器
- 元素节点选择器：
document.getElementById("id名")document.getElementsByClassName("class名")document.getElementsByTagName("tag名")document.querySelector("css选择器")document.querySelectorAll("css选择器")父元素.children父元素.firstElementChild父元素.lastElementChild子元素.parentNode元素.previousElementSibling元素.nextElementSiblingdocument.documentElementdocument.headdocument.bodydocument.formsdocument.forms[0].elements- 注意：选择到的元素是单个？还是多个？
- 其他节点选择器（了解）
父元素.childNodes父元素.firstChild父元素.firstChild元素.previousSibling元素.nextSibling元素.attributesdocument
- 节点过滤
节点.nodeType节点.nodeName节点.nodeValue
三、属性操作
- html属性：写在标签上的属性
- html属性语法：
<div 属性名="属性值"></div> - 操作语法
- 自定义：
- 获取：
元素.getAttribute("属性名") - 设置：
元素.setAttribute("属性名","属性值") - 删除：
元素.removeAttribute("属性名")
- 获取：
- 内置：
- 对象语法
元素.xxxAttribute()系列
- 自定义：
- html属性语法：
- js属性：没有写在标签上的属性
- 内置或自定义都可以直接使用对象的操作语法，进行操作
- 一些内置属性
- 样式属性：
元素.style - class属性：
元素.className - classList属性：
元素.classList，数组形式- 添加class：
元素.classList.add("class名") - 删除class：
元素.classList.remove("class名") - 切换class：
元素.classList.toggle("class名")
- 添加class：
- 内容属性：
元素.innerHTML- 可以解析标签
- 内容属性：
元素.innerText- 不可以解析标签
- 表单控件内容：
元素.value- 表单控件的值
- HTML5新增的自定义属性：
元素.dataset.属性名- 对象类型，记录了当前元素身上所有的 data- 开头的自定义属性
- 可以使用对象语法进行操作
- 样式属性：
四、样式操作
- 设置：
- 行内样式操作
- 语法：
元素.style.css属性名 = "css属性值"
- 语法：
- 行内样式操作
- 获取：
- 非行内样式操作
- 正常浏览器的语法：
getComputedStyle(元素).css属性名 - IE低版本浏览器的语法：
元素.currentStyle.css属性名
- 正常浏览器的语法：
- 解决兼容
- 非行内样式操作
function getStyle(ele, attr){if( ele.currentStyle ){return ele.currentStyle[attr];}else{return getComputedStyle(ele)[attr];}
}
五、尺寸类属性的快速获取
元素.clientWidth/Height- cont + padding
元素.offsetWidth/Height- cont + padding + border
元素.scrollWidth/Height- cont + padding + 可滚动的尺寸
元素.offsetLeft/Top- 相对于包含块偏移的距离
元素.scrollLeft/Top- 滚走了的距离，可设置
- 补充：
元素.offsetParent- 获取元素的偏移量参考父级（包含块）
- 一个元素 绝对定位 的时候，它是根据谁来进行定位的，那么这个元素的偏移量参考父级就是谁
六、标签操作
- 创建：
var ele = document.createElement("标签名")- 插入节点：
父元素.appendChild( ele );
- 插入节点：
- 删除：
元素.remove()父元素.removeChild(子元素)
- 修改：
元素.outerHTML = "<span>"+ 原标签内容 +"</span>"
- 替换：
父元素.replaceChild(新节点, 旧节点)
- 克隆：
元素.cloneNode(布尔)- 为
true时表示克隆所有后代节点
- 为
- 获取：选择器
- 补充：
- 创建文本节点：
document.createTextNode('要写的文本内容') - 插入到指定节点之前：
父元素.insertBefore(新节点, 基准节点);
- 创建文本节点：
八、练习
- 选项卡切换
- 使用html+css+js，模拟input的placeholder
- 使用html+css+js，模拟alert弹出框功能
- 使用html+css+js，模拟checkbox复选框
- 使用html+css+js，模拟radio单选框
- 密码强度
- 数字，字母，特殊字符
- 任意一种，弱
- 任意两种，中
- 三种，强
- 模拟聊天对话框
- 瀑布流布局
 - 【优先级队列】)
)
--状态)
