1.获取 DOM 节点的方法

1.1 通过顶层 document 节点获取：

  • document.getElementById("ID")
  • document.getElementsByName("Name")
  • document.documentElement（获取 <html></html> 节点）
  • document.body（获取 <body></body> 节点）
  • document.getElementsByClassName("className")
  • document.getElementsByTagName("tagName")

注意，前面四个都是 document 节点的专有方法，其他节点不能使用，尤其没有必要在某个元素下通过 ID 去获取另一个元素，因为 ID 在设计上本就是全局唯一的。

1.2 通过父节点获取：

  • parentObj.firstChild：获取父节点下的第一个子节点（会将空格和换行计入），这个属性是可以递归使用的，即支持parentObj.firstChild.firstChild...的形式，如此就可以获得更深层次的节点。

  • parentObj.firstElementChild：获取父节点下的第一个子元素节点

  • parentObj.lastChild：获取父节点下的最后一个子节点（会将空格和换行计入）。与firstChild一样，它也可以递归使用。

  • parentObj.lastElementChild：获取父节点下的最后一个子元素节点

  • parentObj.childNodes：获取父节点下的所有直接子节点（会将空格和换行计入）

  • parentObj.children：获取父节点下的直接子元素节点。

  • parentObj.getElementsByTagName("tagName")

  • parentObj.getElementsByClassName("className")

1.3 通过子节点获取：

  • childObj.parentNode : 获取子节点的直接父节点。w3c标准

  • childObj.parentElement : 获取子节点的直接父节点。IE标准

1.4 通过兄弟节点获取：

  • neighbourObj.parentNode.children[..] :通过父节点间接获取已知节点的兄弟节点

  • neighbourObj.previousSibling：获取已知节点的上一个兄弟节点（会将空格和换行计入）

  • neighbourObj.previousElementSibling: 获取已知节点的上一个兄弟元素节点

  • neighbourObj.nextSibling：获取已知节点的下一个兄弟节点（会将空格和换行计入）

  • neighbourObj.nextElementSibling: 获取已知节点的下一个兄弟元素节点

1.5 通过CSS选择器获取：

采用CSS选择器的语法，即#abc，div.abc,#abc .abc等。

  • document.querySelector("..."): 返回匹配的第一个节点

  • document.querySelectorAll("..."): 返回匹配的所有节点

2.jQuery 获取 DOM 节点的方法

方法用途
祖先
$("#A").parent()获取A节点的直接父节点
$("#A").parents()获取A节点的所有祖先节点
$("#A").parents(".B")获取A节点的所有祖先节点中的B节点
$("#A").closet("B")获取A节点的第一个为B的祖先节点
后代
$("#A").children()获取A节点的直接子节点
$(".A").children(".B")获取A节点的所有为B的直接子节点
$("#A").find("*")获取A节点的所有后代节点
$("#A").find(".B")获取A节点的所有为B的后代节点
同胞
$("#A").prev()获取A节点的上一个兄弟节点
$("#A").prevAll()获取A节点之前的所有兄弟节点
$("#A").prevUntil(".B")获取A节点之前、B节点之后的所有兄弟节点
$("#A").next()获取A节点的下一个兄弟节点
$("#A").nextAll()获取A节点之后的所有兄弟节点
$("#A").nextUntil(".B")获取A节点之后、B节点之前的所有兄弟节点
$("#A").siblings()获取A节点的所有兄弟节点
$("#A").siblings(".B")获取A节点的所有为B的兄弟节点
过滤
$("A B").first()获取第一个A节点的第一个B节点
$("A B").last()获取最后一个A节点的最后一个B节点
$(".A").eq(0)获取所有A节点中的第一个A节点
$("A").filter("B")获取A节点中的所有B节点
$("A").not("B")获取A节点中的不包括B节点的所有节点

3.其它操作 DOM 节点的方法

1）创建 DOM 节点

  • document.createElement("tagName")：创建元素节点
  • document.createAttribute：创建属性节点
  • document.createTextNode：创建文本节点
  • document.createDocumentFragment：创建文档碎片节点

2）复制 DOM 节点

  • A.cloneNode(true)：复制 DOM 节点 A，传入 true 则进行递归复制（子节点一起复制）

3）插入 DOM 节点

  • A.insertBefore(B,C)：A 是 B 和 C 的共同父节点，将 B 插入到 C 前面
  • A.appendChild(B)：将 B 作为 A 的最后一个子节点

4）移除 DOM 节点

  • A.remove()：直接移除 A 节点
  • A.removeChild(B)：B 是 A 的子节点，将 B 移除

5）替换 DOM 节点

  • A.replaceChild(B,C)：B 是 A 的子节点，将 B 替换为 C

4.HTMLCollection 和 NodeList

我们都知道，当获得所有节点（如：getElementsByTagName）或者获得所有子元素（如：element.childNodes）时，实际上返回的是包含一些 DOM 节点的集合，这个集合要么是 HTMLCollection，要么是 NodeList，两者其实都是类数组的对象。

HTMLCollection 和 NodeList的共同点：

  • 都是类数组对象，都有 length 属性；
  • 都有共同的方法：item，可以通过 item(index) 或者 item(id) 来访问返回结果中的元素;
  • 一般都是实时变动的（live），document 上的更改会反映到相关对象上（！！注意：document.querySelectorAll 返回的 NodeList 不是实时的）;

HTMLCollection 和 NodeList的不同点：

  • NodeList 可以包含任何节点类型，HTMLCollection 只包含元素节点（elementNode）。
  • HTMLCollection 比 NodeList多一项方法：NamedItem，可以通过传递id或name属性来获取节点信息

规定返回结果：

  1. node.childNodes 结果返回类型是 NodeList，即所有子节点；
  2. node.children 结果返回类型是 HTMLCollection ，即所有子元素节点；
  3. getElementsByXXX 结果返回类型是HTMLCollection
  4. 旧版本浏览器(尤其是 IE)中，node.children 结果返回类型是 NodeList