DOM获取元素 获取节点 操作节点

1.DOM获取元素

1、get系列获取元素

• document.getElementById("id名") 获取整个文档下的id名的元素 可以获取到一个

• document.getElementsByTagName("标签名") 获取整个文档下该标签名的元素

• document.getElementsByClassName("类型名") 获取整个文档下该类名的元素

2、query系列获取元素

==不支持IE低版本==

• querySelector

  document.querySelector("css选择器") 在任意范围内 通过css选择器 获取该类型的元素集合中的第一个

• querySelectorAll

  document.querySelectorAll("css选择器") 在任意范围内 通过css选择器 获取该类型的元素集合

3、get系列和query系列的区别

• get动态获取元素 后续有添加或者删除元素 都能实时获取 get是支持ie低版本

• query静态获取元素 后续有添加或者删除元素 不能实时获取 query是不支持ie低版本

2.DOM获取节点

1 获取子节点

（1）父元素.children

• 作用：获取子元素节点

（2）父元素.childNodes

• 作用：获取父元素下的所有子节点

（3）DOM中的节点分类

• 元素节点 html文档所有标签抽象出来的都是元素节点

• 属性节点 标签的属性抽象出来是属性节点

• 文本节点 html文档中的文本内容抽象出来都是文本节点(包括空格和换行符)

• 注释节点 注释内容抽象出来是注释节点

（4）判断节点的类型

       语法 ：节点.nodeType

• 元素节点 1

• 属性节点 2

• 文本节点 3

• 注释节点 8

（5）获取节点名称

• 语法：节点.nodeName

获取或者设置节点内容

• 语法：获取 节点.nodeValue 设置 节点.nodeValue = 值

注意：元素节点无法获取和设置内容 因为元素节点有自己的方法

2 获取父节点

（1）子节点.parentNode

• 作用：获取直接父元素

（2）子节点.offsetParent

• 作用：获取最近定位父元素 如果没有定位父元素则是获取body

3.操作节点

（1）创建节点

• 创建元素节点 document.createElement("节点名称")

• 创建文本节点 document.createTextNode(文本内容)

（2）追加节点

• 父元素.appendChild(要添加的子节点)