js-DOM节点操作

2024-02-06 21:53:34

一、节点概述

1、定义

DOM ：文档对象模型

DMO是针对HTML文档的一个API（应用程序编程接口），DOM描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。

2、节点分为几种不同的类型：

Node类型

Document类型

Element类型

Text类型——文本类型

Comment类型 —— 注释类型

二、节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

1、父级节点

语法：

node.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回null

实例：

<div class="demo"> 
<div class="box"> 
<span class="c1">×</span> 
</div> 
</div> 
<script> 
// 1. 父节点 parentNode 
var c1 = document.querySelector('.c1'); 
// var box = document.querySelector('.box'); 
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null 
console.log(c1.parentNode); 
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i4dx0dnO-1606216300575)(C:\Users\Dell\AppData\Local\Temp\1606205913392.png)]

2、子节点

所有子节点

1. parentNode.childNodes (标准)

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意:

返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

子元素节点

2. parentNode.children (非标准)

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

实例：

我是li
我是li
我是li
我是li

第一个子节点

3. parentNode.firstChild

firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

最后1个子节点

4. parentNode.lastChild

lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。

第1个子元素节点

5. parentNode.firstElementChild

firstElementchild返回第一个子元素节点，找不到则返回null。

最后1个子元素节点

6. parentNode.lastElementChild

lastElementchild返回最后一个子元素节点，找不到则返回null。

注意:

这两个方法有兼容性问题，IE9以上才支持。
实际开发中，firstChild和lastChild包含其他节点，操作不方便，而firstElementChild和
lastElementChild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

解决方案:

1．如果想要第一个子元素节点，可以使用paxentNoda.shi.ldxan.[0]
2．如果想要最后一个子元素节点，可以使用pacentMada.children[gaxentNadea…hildran.langth- 1]

实例：

<ol>
<li>我是li1</li> 
<li>我是li2</li> 
<li>我是li3</li> 
<li>我是li4</li> 
<li>我是li5</li> 
</ol> 
<script> 
var ol = document.querySelector('ol'); 
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点 
console.log(ol.firstChild); 
console.log(ol.lastChild); 
// 2. firstElementChild 返回第一个子元素节点 ie9才支持 
console.log(ol.firstElementChild); 
console.log(ol.lastElementChild); 
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素 
console.log(ol.children[0]); 
console.log(ol.children[ol.children.length - 1]); 
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ao9ILCX-1606216300576)(C:\Users\Dell\AppData\Local\Temp\1606206888845.png)]

3、兄弟节点

下一个兄弟节点

1. node.nextSibling

nextsibling返回当前元素的下….个兄弟节点，找不到则返回null。

上一个兄弟节点

2. node.lastSibling

previoussibling 返回当前元素上一个兄弟节点，找不到则返回null。

实例：

<div>我是div</div>
<span>我是span</span> 
<script> 
    var div = document.querySelector('div'); 
    // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等 
    console.log(div.nextSibling); 
    console.log(div.previousSibling); 
    // 2. nextElementSibling 得到下一个兄弟元素节点 
    console.log(div.nextElementSibling); 
    console.log(div.previousElementSibling); 
</script>

下一个兄弟元素节点（有兼容性问题）

3. node.nextElementSibling

nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null,

上一个兄弟元素节点（有兼容性问题）

4. node.previousElementSibling

previousElementsibling返回当前元素上一个兄弟节点，找不到则返回null。

注意:

nextElementsibling和previousElementsibling有兼容性问题, IE9以上才支持。

三、节点操作

1、层级关系的获取

在对一些元素进行节点操作的时候需要通过对其父节点以及其他有关系的节点来进行相关设置，以下为部分层级关系的获取

元素.parentNode  //获取父元素节点1
元素.firstElementChild  //获取第一个子节点，也有firstChild来获取的，但是存在bug1
元素.children  //获取所有子节点1
元素.ownerDocument  //获取该节点文档根节点1
元素.previousElementSibling //获取当前节点的前一个同级节点1
元素.nextElementSibling //获取当前节点的后一个同级节点1

2、创建新节点

var newnode = document.createElement("节点类型")
newnode.innerHTML = "创建的节点内容"12

3、追加节点

找到要追加节点的父元素

父元素.appendChild(追加的节点)1

追加的节点一般由一二中的方法创建一个节点，也可以是克隆的节点

4、克隆节点

要克隆的节点.cloneNode(true)  //传入参数true则复制所有节点内容1

此处的要克隆的节点经常会用层级关系来获取

5、插入节点

直接父元素.insertBefore(要插入的节点，插入位置的后一个节点)
//在使用的时候前面的父元素必须是新旧元素共同的父元素12

注意！！在对table操作时会自动出现tbody,使得tr的直接父元素不再是table，一般用HTML DOM来对表格进行操作

6、移除节点

父节点.removeChild(要移除的节点)1

7、替换节点

父节点.replaceChild(要换成的节点，被替换的节点)

码农公寓