遍历节点树（灵活、兼容好） ——关系类的选择

  1. parentNode ->父节点（最顶端的parentNode为#document）；
  2. childNodes ->子节点们
  3. firstChild ->第一个子节点
  4. lastChild ->最后一个子节点
  5. nextSibling ->后一个兄弟节点
  6. previousSibling ->前一个兄弟节点

基于元素节点树的遍历

  • parentElement -> 返回当前元素的父元素节点（IE不兼容）
  • children -> 只返回当前元素的元素子节点
  • node.childElementCount === node.children.length 当前元素节点的子元素节点个数（IE 不兼容） ——基本不用 ，因为于length相等。
  • firstElementChild -> 返回的是第一个元素节点（IE不兼容）
  • lastElementChild -> 返回的是最后一个元素节点（IE不兼容）
  • nextElementSibling ->返回后一个兄弟节点（IE不兼容）
  • previousElementSibling ->返回前一个兄弟节点（IE不兼容）

除children外，parentElement、node.childElementCount、firstElementChild、lastElementChild、nextElementSibling、previousElementSibling在Ie9及以下不兼容，真正常用的就是children，兼容性好。

节点的四个属性

  1. nodeName :// 元素的标签名，以大写形式表示，只读
  2. nodeValue // Text节点或Comment节点的文本内容(只有文本节点和注释节点有这个属性) 可读写
  3. nodeType // 获取该节点的类型，只读
  4. attributes // Element 节点的属性集合 属性名不能改，属性值可以改，但是我们一般不用不用这种方法我们一般用getAttribute和setAttribute去取。

节点的一个方法 Node.hasChildNode(); ：他有没有子节点，返回值是true或false。

节点的类型

元素节点 —— 1

属性节点 ——— 2

文本节点 —— 3

注释节点 ——— 8

document节点 ———— 9

DocumentFragment ———— 11

文章目录