前言
DOM常常挂在我们嘴边,但是我们又是否理解它呢?带着这个疑问我开始了
CSS如何工作?
但浏览器显示文档时,它必须将文档的内容与其样式信息结合。分为以下两个阶段处理文档:
- 浏览器将HTML和CSS转化成DOM(文档对象模型)。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
- 浏览器显示DOM的内容。
关于DOM
DOM是一种树形结构。标记语言中的每个元素、属性、文本片段都变为一个DOM节点。这些节点由他们与其他DOM节点的关系来定义。
如何操作DOM
由于HTML和CSS转化成了DOM树,要改变HTML的结构,就需要通过javascript来操作DOM。
操作一个DOM节点有如下几个操作:
- 更新:更新该节点表示的HTML内容
- 遍历:遍历该节点下的子节点,然后可以按需操作
- 添加:在改DOM节点下动态增加一个HTML子节点
- 删除:把该节点从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操作实质是什么?有什么区别?哪个速度更快性能根好,为什么?
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。