DOM操作--你究竟知道多少

2019年9月7日 89次阅读 来源: 孙小渃

前言

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

CSS如何工作？

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

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

《DOM操作--你究竟知道多少》

关于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操作实质是什么？有什么区别？哪个速度更快性能根好，为什么？

    原文作者：孙小渃
    原文地址: https://segmentfault.com/a/1190000010401107
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞