前言

DOM常常挂在我们嘴边,但是我们又是否理解它呢?带着这个疑问我开始了

CSS如何工作?

但浏览器显示文档时,它必须将文档的内容与其样式信息结合。分为以下两个阶段处理文档:

  1. 浏览器将HTML和CSS转化成DOM(文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
  2. 浏览器显示DOM的内容。

clipboard.png

关于DOM

DOM是一种树形结构。标记语言中的每个元素、属性、文本片段都变为一个DOM节点。这些节点由他们与其他DOM节点的关系来定义。

如何操作DOM

由于HTML和CSS转化成了DOM树,要改变HTML的结构,就需要通过javascript来操作DOM。
操作一个DOM节点有如下几个操作:

  1. 更新:更新该节点表示的HTML内容
  2. 遍历:遍历该节点下的子节点,然后可以按需操作
  3. 添加:在改DOM节点下动态增加一个HTML子节点
  4. 删除:把该节点从HTML中删除,删除内容包括几点内容和其下面子节点内容

操作代码

1、获取节点
var test = document.getElementById('test');
var tr = document.getElementsByTagName('tr');//返回DOM数组
var test_tr = test.getElementsByTagName('tr');//返回DOM数组
var class_tr = document.getElementsByClassName('tr_class');//返回DOM数组
var test_parent = test.parentElement;
var test_parent = test.parentNode;
var next_el = test.nextElementSibling;
var previous_el = test.previousElementSibling;
var test_child = test.children;
var test_first_child = test.firstElementChild;
var test_last_child = test.lastElementChild;
//新方法低版本IE<8不支持
var test = document.querySelector('#test');
var tr = document.querySelectorAll('#test tr');//返回的是DOM数组
2、创建节点
var el = document.createElement('div');//标签
var node_txt = document.createTextNode('hell world');//HTML属性
3、DOM更改
// 添加、删除子元素
test.appendChild(el);
test.removeChild(el);

// 替换子元素
test.replaceChild(el1, el2);

// 插入子元素
var el3 = document.createElement('p');
test.insertBefore(el3, el);
4、属性操作
// 获取一个{name, value}的数组
var attrs = test.attributes;

// 获取、设置属性
var className = test.getAttribute('class');
test.setAttribute('class', 'test_class');

// 判断、移除属性
test.hasAttribute('class');
test.removeAttribute('class');

// 是否有属性设置
test.hasAttributes();     

思考

vue.js、handlebar.js、react.js等等,DOM操作实质是什么?有什么区别?哪个速度更快性能根好,为什么?


孙小渃
459 声望17 粉丝

要想成为一个有智慧的人,你必须拥有多个模型。而且你必须将你的经验,无论是间接的还是直接的,都放到构成这些模型的网格上