美文网首页
DOM的映射机制

DOM的映射机制

作者: destiny0904 | 来源:发表于2018-08-12 22:54 被阅读0次

前言

这在我们平常操作 DOM 的时候司空见惯。就比如:我通过获取一个元素来改变其样式,自然而然的反映到 HTML 页面中。

但是,我们操作 JS 对象的时候,本质上操作的是 JS 堆内存,为什么会反映到页面中呢?就是因为浏览器存在这个 DOM 的映射机制。

1. 什么是 DOM 的映射机制?

我们使用 JS 从页面获取到的元素对象,或者自己手动创建的已经插入页面的元素对象,与页面中的 HTML 元素是绑定在一起的。也就是说修改其中一个,另一个也会跟着自动修改。这就是 DOM 的映射机制。

2. 形成映射的几种情形

改变元素对象的属性

这是我们最常用到的一种情形。当我们需要为元素添加自定义属性、或者修改属性等,就可以从页面中获取到元素对象,然后对其进行修改,就能够自动反映到 HTML 页面元素上。

//=> 修改从页面中获取的元素样式
Div.style.color = 'red';

//=> 修改已经插入页面的元素的属性
var p = document.createElement('p');
box.appendChild(p);
p.dataset.index = 1;

这两种方式得到的元素对象,修改其属性,都能够直接反映到页面中,不需要再次插入页面中。

在元素内部继续添加元素

//=> 在其内部插入标签或文本
var list = Div.getElementsByTagName('li');
console.log(list); // 空的元素集合
Div.innerHTML('<li></li>');
console.log(list); // 有一个元素集合

//=> 添加自己创建的元素对象,同样原理
Div.appendChild(p);

在容器中的数据绑定前,我们获取容器中元素,得到一个空的元素集合,容器数据绑定后,我们不需要重新获取,DOM 的映射机制会帮我们把新增加的元素映射到之前获取的空集合中,让其变为有元素的集合。

在页面中追加已有元素

list = Div.getElementsByTagName('li')[0];
Div.appendChild(list);

appendChild 在追加元素对象的时候,如果这个元素在容器中已经存在,此时并不是克隆一份新的追加到末尾,而是把原有的元素移动到末尾。

其根本原因在于,同一个元素在页面中,只能够有一个位置。把 JS 元素对象插入页面中某个位置,实际上就是把其绑定的 HTML 元素移动到那个位置上。

这里的元素已经存在有两种情形:

  • 元素是从页面中获取到的
  • 创建的元素已经添加过一次,再次添加时

因此,就无需手动移除原先的元素,再进行添加。直接插入即可。

3. 特殊情况

querySelectAll 获取的集合是静态集合(staticNodeList),不存在上述所谓的映射机制,基于这个方法,数据绑定完成后需要重新获取一次才可以。

var box = document.querySelectorAll('#box');
var box1 = document.getElementById('box');
console.log(box); //=> 获取到的是 NodeList 对象
console.dir(box1); //=> 而这里获取到的是 HTMLElement 的实例

NodeList 不存在与 HTML 页面元素的映射,而且没有很多 HTMLElement 实例才拥有的方法。因此,千万不要使用这个方法。

另外,jQuery 中获取的元素同样不存在这些映射,实现映射需要使用其内部的方法,而且要使用原生 HTMLElement 实例的方法,需要通过后面加 [0] 的方法转换为原生元素对象。

相关文章

  • DOM映射机制

    没有重新获取,但是oLis这个集合的长度跟着内容自动发生了改变DOM的映射机制:页面中的标签和JS中获取到的元素对...

  • DOM的映射机制

    前言 这在我们平常操作 DOM 的时候司空见惯。就比如:我通过获取一个元素来改变其样式,自然而然的反映到 HTML...

  • Flutter对比React Native

    实现机制对比 React Native依赖web技术,具有前端亲和力,融合HTML标签思想,虚拟DOM的机制映射成...

  • DOM

    DOM到底是啥? html叫做文档,实际上在内存中是对象object,这种文档和对象一一映射的机制叫做dom。 d...

  • 虚拟dom怎么实现的?

    将DOM做一层映射关系v-DOM,本该对DOM的操作映射到v-DOM上,v-DOM完全用js实现,与宿主浏览器无关...

  • 虚拟DOM

    虚拟DOM 基础概念: virtual DOM是对真实DOM的描述和映射 当Virtual DOM改变后,我们得到...

  • MFC的消息机制

    1. 消息映射机制 1.1 消息映射机制的含义 MFC使用消息映射机制来处理消息,拥有一个消息与消息处理函数一一对...

  • 3.Vue之自定义指令(钩子函数,实例属性)

    介绍 除了内置指令,Vue.js 也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为 DOM 行为。可...

  • DOM映射+ajax

    原生JS和jQuery在DOM映射中的区别 在原生JS中,有DOM映射,改变页面内容,JS 中获取的元素集合同时改...

  • 虚拟DOM和diff

    标准的dom机制如下: 标准dom机制下,用户在对应用操作的时候是直接对真实的dom进行操作。在react中,用户...

网友评论

      本文标题:DOM的映射机制

      本文链接:https://www.haomeiwen.com/subject/gqbebftx.html