学习JS中的DOM节点和操作

DOM操作可以说在JS中并不常见。很多网页的小功能，比如添加、删除一些元素，都可以通过JS来实现。那么我们需要知道什么才能在DOM中实现一些功能呢？今天这篇文章就简单带你走进JS中DOM操作的大门！

1.DOM树的节点

1.DOM节点分为三类：元素节点(标签节点)、属性节点和文本节点。

属性节点和文本节点都属于元素节点的子节点。因此，在操作时，需要先选择元素节点，然后修改属性和文本。

[查看元素节点]

1.使用getElement系列方法：

具体的HTML代码如下：

//按ID检查元素属性var Li=document . getelementbyid(' first ')；//按类名查看元素属性var lis1=document . getelementsbyclassname(' cls ')；//按名称检查元素属性varlis2=document . getelementsbyname(' name ')；//按标记名检查元素属性varlis3=document . getelementsbyname(' Li ')；注意事项：

(1)标识不能同名。如果id重复，则只能获得第一个id。

获取元素节点时，必须等到加载DOM树。

两种治疗方法：

A.在文档末尾写JS；

B.将代码写入window.onload函数；

通过getElements系列得到的格式是数组格式，其中的每个元素都必须在运算时得到才能运算，但数组不能直接运算。

document . getelementsbyname(' Li ')[0]。Click=function () {} 对于这一系列的方法，也可以先选择一个DOM节点，从选中的DOM节点中选择需要的节点：

document.getElementById('div1 ')。getElementsByTagName(' Li ')；[通过querySelector系列方法]

(1)传入选择器名称并返回找到的第一个元素。常用于查找id:

var dq1=document . queryselector(' id ')；传入选择器名称，返回所有找到的元素，无论找到多少，都返回数组格式。这种方法多才多艺，无论什么属性都能准确找到。

var dqs 1=document . queryselectorall(# div 1 Li ')；[查看\设置属性节点]

1.检查属性节点：getAttribute('属性名')；

2.setAttribute节点：setAttribute('属性名'，'属性值')；

注：setAttribute()在旧版本的IE中存在兼容性问题，可以替换为。符号。

【JS的各种修改CSS的方法】

1.使用setAttribute设置类和样式。

document.getElementById('first ')。setAttribute('class '，' class 1 ')；document.getElementById('first ')。setAttribute('style '，' color:red');2.使用。添加类选择器。

document.getElementById('first ')。className=' class13.使用。风格。样式来直接修改单个样式。请注意，样式名称必须使用驼峰命名法。

document . getelementbyid(' first '). style . font size=' 18px '；4.使用添加序列级别样式。风格还是。style.cssText:

//IE与document.getelementbyid ('first ')不兼容。style=' color:red'；//所有浏览器都与document.getelementbyid ('first ')兼容。style . CSS text=' color : red；'；[查看/设置文本节点]

1.innerHTML:获取或设置节点中的HTML代码。

2.innerText:获取或设置节点中的文本，但不能设置HTML代码。

二、分层节点操作

1.子节点：获取当前节点的所有子节点(包括元素节点和文本节点)。children:获取当前节点的所有元素子节点(不包括文本节点)。

2. parentNode:获取当前节点的父节点。

3.firstChild:获取第一个子节点，包括回车等文本节点；firstElementChild:获取第一个元素节点。没有文本节点；lastChild:获取最后一个子节点，包括回车等文本节点；lastElementChild:获取最后一个子节点，不包括文本节点；

4.上一个同级：获取当前节点的上一个同级节点，包括文本节点；previousElementSibling:获取当前节点的前一个元素同级节点；nextSibling:获取当前节点的下一个兄弟节点，包括文本节点；nextElementSibling:获取当前节点下一个元素的同级节点；

5. attributes:获取当前节点的所有属性节点。返回数组格式。

[创建和添加节点]

1.document.createElement('标记名'):创建一个新节点并返回创建的新节点。

需要结合为新节点设置属性。setAttribute()。

2.父节点。insertBefore:在父节点中，在目标节点之前插入新节点。

父节点。appendChild(新节点):在父节点的末尾，插入一个新节点。

3.源节点。克隆代码(真):克隆一个节点。

传入true意味着克隆源节点及其所有子节点；

传入false或not，这意味着只克隆当前节点，而不克隆子节点。

[删除和替换节点]

1.父节点。removeChild:从父节点删除指定的子节点。

2.父节点。replaceChild:从父节点，用新节点替换旧节点。