1. DOM节点
DOM节点主要分为三种：元素节点， 属性节点和文本节点
1.2 nodeType属性 获取节点类型
- 1 ---> 元素节点
- 2 ---> 属性节点
- 3 ---> 文本节点
- 8 ---> 注释节点
1.2 nodeName属性 获取节点名称
- 元素节点 ---> DIV，SPAN，H1... 大写标签的名称
- 属性节点 ---> id，class，name，style... 小写属性的名称
- 文本节点 ---> #text
- 注释节点 ---> #comment
2. 获取元素节点的方法
【唯一的】可以直接用document.获取。 比如id唯一，body标签唯一，html标签唯一
document.body; document.box;
2.1 document.getElementById( ) ---> 直接获取到元素节点
2.2 document.getElementsByClassName( )
通过 [index] 获取到每个元素节点
2.3 document.getElementsByTagName( )
通过 [index] 获取到每个元素节点
2.4 document.getElementsByName( )
通过 [index] 获取到每个元素节点
2.5 document.querySelector( ) ---> 直接获取到元素节点
querySelector只能获取到第一个元素节点
2.6 document.querySelectorAll()
通过 [index] 获取到每个元素节点
querySelectorAll 有 forEach() 方法
【注意】querySelector 和 querySelectorAll
- ①通过id获取元素时要加
# - ②通过类名获取元素时要加
. - ③通过属性获取元素时要加
[]
3. 元素属性相关
attributes 返回某个元素所有属性的集合，可以通过下标或者属性名称来获取
setAttribute("属性名称"，"值") 设置
getAttribute("属性名称") 获取
【注】getAttribute("属性名称") 和点语法获取属性值的区别： 点语法不能获取到自定义属性值
removeAttribute("属性名称") 删除指定属性
【注意】getAttribute，setAttribute，removeAttribute不要去操作动态属性。(checked，selected，disabled)ed结尾的只要dom点.checked，.selected，.disabled 等于真和假即可!
4. 元素类相关
3.1 className 设置、获取、清除。 ---> 旧属性
3.2 classList ---> 新属性
- classList.add( ) 添加
- classList.remove( ) 删除
- classList.contains( ) 是否存在
- classList.toggle( ) 切换
- classList.forEach( ) 遍历
5. 父节点
parentNode
6. 子节点
① childNodes
childNodes是w3c的规范没有兼容问题，但是会包括文本节点和元素节点
② children
children是微软规则。元素节点。ie 6 7 8会包含注释节点和元素节点
6.1 第一个子节点
-
firstElementChild：适用google和火狐，在ie中是undefined
-
firstChild：适用ie 6 7 8，在google会认错(会认成文本节点)
兼容写法：oParent.firstElementChild || oParent.firstChild
6.2 最后一个子节点
-
lastElementChild：适用google和火狐，在ie中是undefined
-
lastChild：适用ie 6 7 8，在google会认错(会认成文本节点)
兼容写法：oParent.lastElementChild || oParent.firstChild
7. 兄弟节点
① 前一个兄弟节点previousElementSibling/previousSibling
兼容写法：oBrother.previousElementSibling || oBrother.previousSibling
② 后一个兄弟节点nextElementSibling/nextSibling
兼容写法：oBrother.nextElementSibling || oBrother.nextSibling
8. DOM操作
8.1 创建一个节点
- 创建元素节点 ---> document.createElement( )
- 创建文本节点 ---> document.createTextNode( )
- 创建注释节点 ---> document.createComment( )
- 追加节点 ---> appendChild( )
8.2 插入
oParent . insertBefore("新的元素"，"插入的位置") ---> 将新元素插在xx前面
如果第二个参数是null，等价于appenChild( )
8.3 替换
oParent . replaceChild("新的元素"，"被替换的元素")
8.4 删除
oParent . removeChild("被删除的元素")
oBox . remove（） ---> 自杀式删除，oBox是被删除的元素
8.5 克隆
oBox . cloneNode()
-
cloneNone（）=== cloneNode（false） ---> cloneNode()默认值是
false，浅拷贝---> 只拷贝自身，不拷贝子元素。 -
cloneNode（true） ---> 深拷贝---> 拷贝自身和子元素。
9. 总结
9.1 nodeType ---> 获取节点类型
- 1 元素节点
- 2 属性节点
- 3 文本节点
- 8 注释节点
9.2 nodeName ---> 获取节点名称
- 元素节点 ---> 大写，DIV、A、SPAN...
- 属性节点 ---> 小写，style、name、id...
- 文本节点 ---> #text
- 注释节点 ---> #comment
9.3 attributes ---> 返回元素的属性集合
9.4 getAttribute（"属性名称"） ---> 获取属性值（不能设置动态属性）
9.5 setAttribute（"属性名称"，"值"） ---> 设置属性（不能设置动态属性）
9.6 removeAttribute（"属性名称"） ---> 删除属性（不能设置动态属性）
9.7 parentNode ---> 父节点
9.8 childNodes ---> 子节点 ---> 包含文本节点和元素节点，会把换行当作文本节点
9.9 children ---> 子节点 ---> ie 6 7 8会把注释当作元素节点
9.10 获取第一个子节点
oParent.firstElementChild || oParent.firstChild
9.11 获取最后一个子节点
oParent.lastElementChild || oParent.lastChild
9.12 获取指定的子节点
oParent.children[index]
9.13 前一个兄弟节点
oBrother.previousElementSibling || oBrother.previousSibling
9.14 后一个兄弟节点
oBrother.nextElementSibling || oBrother.nextSibling
9.15 document.creatElement( ) ---> 创建元素节点
9.16 document.createTextNode( ) ---> 创建文本节点
9.17 document.createComment( ) ---> 创建注释节点
9.18 appendChild( ) ---> 追加节点
9.19 insertBefore( "新的元素"，"位置" ) ---> 插入节点
如果"位置"写null ，insertBefore( "新的元素"，null )===appendChild( "新的元素" )
9.20 replaceChild( "新的元素"，"被替换的元素" ) ---> 替换节点
9.21 removeChild( "删除的元素" ) ---> 删除节点
.remove（）---> 自杀式删除
9.22 cloneNode() ---> 克隆节点
- 默认值false ---> 浅克隆：只克隆自身，不克隆子元素
- true ---> 深克隆：克隆自身和子元素
