JS中获取以及操作DOM中的节点

小咪咪 2022-06-05 01:15 245阅读 0赞

## 获取DOM中节点 ##

> **节点的作用：节点是描述页面中每一部分之间的关系的。**

所以我们就要通过相关的属性和方法获取到页面中所有的节点。

**childNodes**

> 获取当前元素的**所有子节点**（节点集合：类数组）  
> 在这里需要注意的是：不仅仅是元素节点，注释节点、文本节点等都会包含在内，**格外需要注意的是** *子节点只在儿子辈分中查找*！！！

**children**

> 获取所有的元素子节点（元素集合）  
> **在IE6~8中不兼容（会把注释节点当做元素节点获取到）**

**parentNode**

> 获取当前元素的**父节点（元素对象）**

**previousSibling / nextSibling**

> previousSibling ：获取当前节点的上一个**哥哥节点**（不一定是元素节点也可能是文本或者注释节点）  
> nextSibling： 获取当前节点的下一个**弟弟节点**

**previousElementSibling / nextElementSibling**

> previousElementSibling ：获取当前节点的上一个**哥哥元素节点**  
> nextElementSibling：获取当前节点的下一个**弟弟元素节点**
> 
> 在这里需要注意的是:**在IE6~8下不兼容**

**firstChild / lastChild**

> firstChild：当前元素所有**子节点**中的第一个（也不一定是元素节点，也可能是文本或者注释）  
> lastChild：当前元素所有**子节点**中的最后一个。

**firstElementChlid / lastElementChild**

> firstElementChild：获取当前元素所有**子元素节点**中的第一个。  
> lastElementChild：获取当前元素所有**子元素节点**中的最后一个。  
> 在这里主要注意的是：**IE6~8中不兼容**

## 操作DOM中的节点 ##

所谓操作DOM中的节点，其实就是DOM的增、删、改

**document.createElement**

> 在JS中动态创建一个HTML标签  
> 在项目中，我们偶尔会在JS中动态的创建HTML标签，然后增加到页面中

**appendChild**

> 容器.appendChild(新元素)  
> 把当前创建的新元素添加到**容器的末尾位置**

**insertBefore**

> 容器.insertBefore(新元素,老元素)  
> 在**当前容器**中，把新创建的元素**增加到老元素之前**。

**removeChild**

> 容器.removeChild(元素)  
> 把当前元素中的某一个元素移除掉。

**replaceChild**

> 容器.replaceChild(新元素,老元素)  
> 在**当前容器**中，拿**新元素替换老元素**。

**cloneNode**

> 元素.cloneNode(false/true)  
> 把原有的元素克隆一份一模一样的。false：**只克隆当前元素本身**。true：深度克隆，把**当前元素本身以及元素的所有后代都进行克隆**。

**\[set/get/remove\]Attribute**

> 给当前元素设置、获取、移除属性。（**一般操作的是它的自定义属性**）

box.setAttribute(‘myIndex’,0) 
    box.getAttribute(‘myIndex’) 
    box.removeAttribute(‘myIndex’)

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS中的事件、DOM操作

一、事件 1.1 事件介绍事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等 1.2 事件绑定方式事件要想发生,就得将

我不是女神ヾ/ 2024年03月25日 08:55/ 0 赞/ 72 阅读

相关 JavaScript中DOM节点常用操作 (节点的增删追加以及节点属性操作)

动态创建DOM节点 var obj = document.createElement(tagName); 例： var li = document.c

刺骨的言语ヽ痛彻心扉/ 2023年06月09日 14:26/ 0 赞/ 146 阅读

相关 JS中DOM节点的CRUD

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

素颜马尾好姑娘i/ 2023年01月21日 02:12/ 0 赞/ 116 阅读

相关 JavaScript中的DOM节点操作

创建一个节点的方法 1. document.createElement() //创建元素节点 2. document.createTextNode()

曾经终败给现在/ 2022年06月12日 23:12/ 0 赞/ 232 阅读

相关 DOM（HTML中节点的获取）

<span style="color:ff0000">内容</span> 元素节点/文本节点/属性节点的nodeName/nodeValue/nodeT

悠悠/ 2022年06月06日 11:28/ 0 赞/ 258 阅读

相关 JS中获取以及操作DOM中的节点

获取DOM中节点 > 节点的作用：节点是描述页面中每一部分之间的关系的。所以我们就要通过相关的属性和方法获取到页面中所有的节点。 childNodes > 获取当

小咪咪/ 2022年06月05日 01:15/ 0 赞/ 246 阅读

相关 JS中DOM的节点

node：节点浏览器认为在HTML页面中所有的内容都是节点（包括标签、注释、文本、文档等）。元素节点：HTML标签文本节点：文字内容（高版本浏览器中会把空

一时失言乱红尘/ 2022年06月05日 01:15/ 0 赞/ 181 阅读

相关 JS中获取DOM的方法

getElementById通过元素ID获取此方法的上下文只能是document。 > 一个HTML页面中元素的ID理论上是不能重复的，但是重复了页面中也不会报错 >

左手的ㄟ右手/ 2022年06月05日 01:15/ 0 赞/ 196 阅读

相关 JS中的节点操作

节点的增删改查 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

柔情只为你懂/ 2022年05月29日 14:14/ 0 赞/ 169 阅读

相关 js+DOM创建和操作节点

1.创建节点并添加内容:使用的方法:createElement和createTextNode <html> <head> <meta http-equiv="Cont

- 日理万妓/ 2022年03月28日 03:37/ 0 赞/ 275 阅读