乐趣区

关于javascript:DOM映射的特殊情况

jiezi

DOM 映射是前端开发中十分根底的一块内容，然而你晓得吗，DOM 映射是有非凡状况的。咱们看个例子：
有这样一个构造

<body>
    <div></div>
</body>
let list = document.querySelectorAll('div');
document.body.appendChild(document.createElement('div'));
console.log(list); // NodeList [div]

想一下，为啥会只有一个 div，依照 DOM 映射的机制，难道不应该两个吗？
别急，咱们改行代码，就会发现答案

// querySelectorAll => getElementsByTagName
let list = document.getElementsByTagName('div');
// 以下代码没有变动
document.body.appendChild(document.createElement('div'));
console.log(list); // HTMLCollection(2) [div, div]

把 querySelectorAll 换成 getElementsByTagName 之后，便会发现，当初的输入就成了咱们冀望的输入了。
通过这个例子咱们发现 querySelectorAll 是 DOM 映射的一个非凡 case。依据《JavaScript 高级程序设计（第三版）》的 11 章 11.1.2 的形容咱们得悉：querySelectorAll返回的值实际上是带有所有属性和办法的 NodeList，其底层实现则相似于一组元素的快照，而非一直对文档进行搜寻的动静查问。这样实现能够防止应用 NodeList 对象通常会引起的大多数性能问题。

所以咱们应用这个办法的时候，在数据绑定实现后须要从新获取一次才能够。（须要留神的是，它与原先存在的元素也是映射的，也就是能够批改属性。然而新增或者删除元素不会主动反映到这个汇合中）。

你可能发现了，querySelectorAll 返回的是一个 NodeList，getElementsByTagName 返回的是 HTMLCollection。
他们之间有何不同呢？这个先挖个坑，下次再讲。

那 DOM 映射还有其余的非凡 case 吗？没有了，就这一个。
顺便咱们再温习一下 DOM 映射的内容。

什么是 DOM 映射

个别的，咱们从页面获取的元素（包含咱们创立的曾经插入页面的元素）和页面中的元素是有联动关系的，只有批改一个，另一个也会跟着扭转。咱们把这种联动关系称之为 DOM 映射。
举个例子就是

1. 扭转元素对象的属性

这是咱们最罕用到的一种场景。咱们批改或增加元素属性的时候，个别会从页面中获取到元素对象，对其进行批改，而后就可能主动扭转页面元素的属性。

//=> 批改从页面中获取的元素款式
div.style.color = 'red';
//=> 批改曾经插入页面的元素的属性
var p = document.createElement('p');
box.appendChild(p);
p.dataset.index = 1;

2. 向页面内增加元素

<body>
    <div id='box'></div>
</body>
let divList = document.getElementsByTagName('div');
document.querySelector('#box').appendChild(document.createElement('div'));
console.log(divList); // HTMLCollection(2) [div#box, div]

咱们向 div 中插入一个 div，插入前只有一个咱们的汇合divList 中只有一个元素，插入后再次获取，外面主动就蕴含了咱们新插入的元素。

参考文档

  • DOM 的映射机制
  • JavaScript 高级程序设计 (第 3 版)
退出移动版