2025年【JavaScript】学习第十二天（DOM节点）

科技前沿 • 2025-03-02 19:39 • 阅读 52

大家好，我是讯享网，很高兴认识大家。

1.什么是DOM节点

DOM树：

DOM以树状结构出现的(倒立的树)，方便开发人员获取，添加，删除和修改页面上的某一部分
在这里插入图片描述
讯享网

DOM节点：

w3c，页面上所有的内容都可以称为节点，DOM的最小单元就是节点

DOM节点的种类：

节点包含一共12种，本节课就认识5种节点

1.元素节点：标签： nodeType 1
2.属性节点：属性： nodeType 2
3.文本节点：文本： nodeType 3
4.注释节点：注释： nodeType 8
5.文档节点：文档： nodeType 9

2.如何获取节点：

通过节点关系（父子关系，兄弟关系）来获取

//获取父元素的第一个节点 父节点.firstChild //节点的下一个兄弟节点 节点.nextSibling //节点的上一个兄弟节点 节点.previousSibling //父节点的最后一个字节点 父节点.lastChild //节点的父节点 节点.parentNode //获取所有的子节点（伪数组形式） 父节点.childNodes

讯享网

3.获取元素节点：

讯享网//获取父元素的第一个元素节点 父节点.firstElementChild //节点的下一个兄弟元素节点 节点.nextElementSibling //节点的上一个兄弟元素节点 节点.previousElementSibling //父节点的最后一个子元素节点 父节点.lastElementChild //节点的父元素节点（兼容性不好，不用它） 节点.parentElement //获取所有的子元素节点（伪数组形式） 父节点.children

4.节点的操作

创建节点：

语法：document.createElement('标签名')
返回值：创建好的元素节点

//1. 创建的节点 var oBtn = document.createElement('button'); console.log(oBtn); oBtn.innerText = '我是按钮' var oBox = document.getElementById('box')

追加节点：

语法：父节点.appendChild(子节点)
含义：将子节点追加到父节点的尾部
例子：document.body.appendChild(子节点)

讯享网 oBox.appendChild(oBtn); //把创建好的oBtn添加到oBox中

插入节点：

语法：父节点.insertBefore(子节点，谁的前面的谁)
含义：将子节点插入到父节点的指定位置
例子：oBox.insertBefore(oBtn,oBox.firstChild);将button插入到oBox的头部

oBox.insertBefore(oBtn,oBox.children[1]) //父节点.children: 数组，所有的标签

替换节点

语法：父节点.replaceChild(新节点,旧节点(位置)) 不常用
含义:在父节点内，将老节点替换成新节点

讯享网oBox.replaceChild(oBtn,oBox.children[1])

删除节点：

语法1：父节点.removeChild(子节点)
含义：把子元素从父元素中移除
语法2：节点.remove() 最常用
含义：把子元素从页面中删除

oBox.children[0].remove(); oBox.removeChild(oBox.children[0])

克隆节点

语法：节点.cloneNode(turn/false)
作用：克隆出来一个节点
turn：代表克隆元素本身和元素的子元素以及后台
false：代表克隆元素本身

讯享网console.log(oBox.cloneNode(false)); console.log(oBox.cloneNode(true));

节点属性

nodeType：节点属性
nodeName：节点名称
nodeValue：节点值

5.获取行间样式和非行间样式

var tianIn = document.querySelector('div'); //获取行间样式 tianIn.style.width window.getComputedStyle(tianIn, null)['width']; //获取非行间样式 window.getComputedStyle(tianIn, null)['width'];