DOM操作--你究竟知道多少-白红宇

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

阅读量：6173 次

发布时间：2019-06-21

本文共 1619 字，大约阅读时间需要 5 分钟。

前言

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

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

浏览器将HTML和CSS转化成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();