浏览器环境

avatar

DOM树

DOM树总共有12种节点类型，实践中一般主要操作其中的4种：

  1. document节点，访问DOM的入口节点
  2. element节点，HTML元素
  3. text节点，包含文本内容
  4. 注释节点，可以读取注释内容

访问DOM树

DOM树的结构如图所示，可以通过图中的那些引用变量访问DOM树节点：

avatar

如果仅仅想访问DOM树中的HTML元素，而不想看到其他的乱七八糟的节点，则如下图所示：

avatar

其中，childrenNodes和children都是Collection而不是Array，所以可以通过for.。.of迭代访问，而不能使用.filter(…)这种方法。

DOM树是只读的，不能直接用赋值修改DOM树节点。

搜索DOM树

主要有六种方法可以在DOM树中搜索需要的节点：

Method Searches by… Can call on an element? Live?
getElementById id - -
getElementsByName name - ✔
getElementsByTagName tag or ‘*’ ✔ ✔
getElementsByClassName class ✔ ✔
querySelector CSS-selector ✔ -
querySelectorAll CSS-selector ✔ -

另外，还有

  • elem.matches(css)用于检查elem元素是否匹配css这个选择器
  • elem.closest(css)用于寻找匹配css选择器的距离elem最近的祖先
  • elemA.contains(elemB)用于检查elemA是否包含elemB

DOM节点类

每一种DOM节点都是一个DOM节点类的实例，DOM节点类的继承树如下图所示：

DOM节点类

  • Node是所有DOM节点的基类，里面提供了诸如parentNode、nextSibling、childNodes这种getter方法
  • HTMLElement是所有HTML元素的基类，各种不同种类的HTML元素都继承了这个基类

要获取node的类型，有很多种方法,比如：

  • elem.nodeType，返回一个数字，标记了node的类型
  • elem.nodeName/elem.tagname，返回字符串

修改DOM树

innerHTML

可以通过对innerHTML进行修改来修改HTML元素的内容，如下例：

1
2
3
4
5
6
7
8
9
10
<body>
  <p>A paragraph</p>
  <div>A div</div>

  <script>
    alert( document.body.innerHTML ); // read the current contents
    document.body.innerHTML = 'The new BODY!'; // replace it
  </script>

</body>

outerHTML

可以通过对元素的outerHTML进行替换来替换整个HTML元素，如下例：

1
2
3
4
5
6
7
8
9
10
11
<div>Hello, world!</div>

<script>
  let div = document.querySelector('div');

  // replace div.outerHTML with <p>...</p>
  div.outerHTML = '<p>A new element!</p>'; // (*)

  // Wow! The div is still the same!
  alert(div.outerHTML); // <div>Hello, world!</div>
</script>

div.outerHTML仍保持了原先HTML元素内容的引用，但这个元素原先所在的HTML文档的位置被替换成了新的HTML元素。