Dom 获取节点方法

怼烎@ 2023-01-05 05:26 215阅读 0赞

# 节点的分类： #

元素节点 html标签  img body input div

文本节点 文字部分

属性节点 标签内的属性

注释节点

1.document

页面中最大的节点，有且只有一个。不属于元素节点，是页面中所有节点的容器。  根节点。

2.html

页面中最大的元素节点。根元素节点。

3.元素节点

html标签

4.文本节点

每一段文本内容都是一个文本节点

包含 换行 和 空格

一般来说作为元素节点的子节点存在。

5.属性节点：

属性节点不能单独存在，必须依赖于元素节点。

6.注释节点

页面中的注释，作为说明文本使用户。

--------------------

##  操作元素节点的属性 ##

标签上的属性分类：

1.原生属性

2.自定义属性

3.H5 自定义属性

###          1.原生属性 ###

语法：元素.属性名

修改/新增：

元素.属性名 = "值"

获取：

元素.属性名

【注意】class属性是例外，不能直接通过属性名获取，而是用className

###             2.自定义属性 ###

不能直接使用 元素. 这个语法来获取。

三个方法去操作：

获取

getAttribute("属性名");

返回值：字符串

设置

setAttribute("属性名","属性值")

删除

removeAttribute("属性名")

【注意】这三个方法也可以操作原生属性

###             3.H5新添 自定义属性 ###

每一个元素节点上都有一个属性：dataSet

里面包含了所有的H5自定义属性。

键值对结构： 例子;data-id ="idBox"

key：data-XXX  xxx的内容。

value:属性值

获取：

元素.dataset.key

设置：

元素.dataset.key = "值"

删除

delete 元素.dataset.key

--------------------

## 操作元素类名： ##

###  1.按照原生属性的方式来操作 ###

获取：

元素.className

设置：

元素.className = "值"

追加：

元素.className += " 值";

【注意】 追加时，值的前面要加一个空格。

删除：

1.重新设置一遍。

2.1 获取classname属性值、

2.2 按照空格去分割字符串

2.3 遍历数组，将要删除的字符串删除

2.4 数组的join方法

###         2.H5标准给我们一个API ###

元素节点都有一个属性叫做：classList

里面包含了所有的class值。

获取：

元素.classList 获取class值的集合。

想要获取单个，使用下标。

新增：

元素.classList.add("新增的类名")

删除：

元素.classList.remove("删除的类名")

替换：

元素.classList.replace("旧类名","新类名") ;

toggle() 切换

语法：元素.classList.toggle(类名)

当元素拥有这个类名时，将类名删除

当元素没有这个类名时，将类名添加

--------------------

## 操作元素节点的内容： ##

###  1.innerHTMl ###

获取元素节点中除了本身的标签外，所有的HTML代码。

获取：

元素.innerHTML

设置：

元素.innerHTMl = "新的内容"

【注意】 innerHTML 会覆盖原有的内容，而且会解析其中的标签。

## ##

###         2.innerText ###

获取元素节点中的文本内容,会覆盖原有的内容，不会解析内容中的标签。

获取：

元素.innerText

设置：

元素.innerText = "新的内容";

###                  ###

###         3.value ###

主要使用在表单元素中。

操作表单元素节点的value属性。

获取：

表单元素节点.value

设置：

表单元素节点.value = "值"

--------------------

## 操作元素节点的样式： ##

###  1、 行内样式： ###

原生属性的方式获取

元素.style.样式的属性名

【注意】如果属性名是多个单词，第二个单词首字母大写，删除中划线。

该方法只能获取行内。

###       2、  获取元素的有效样式 ###

标准浏览器：

getComputedStyle(要获取样式的元素)

IE低版本：（IE8以下）

元素.currentStyle.样式属性名  box.currentStyle.width

###      3、   设置样式 ###

注意：只能设置行内式

语法：元素.style.样式名 = "值";

--------------------

通过节点关系获取节点：

DOM节点不是孤立存在，我们可以通过节点之间的关系去获取他们。

节点的关系，是以属性的方式存在的。

###         获取父节点。 ###

节点.parentNode

###         获取兄弟节点 ###

1.下一个节点

node.nextSibling

对于标准浏览器，标签，空文档，换行都属于节点。

IE低版本：指下一个元素节点。

2.下一个元素节点

node.nextElementSibling

下一个兄弟节点 = 节点.nextElementSibling||节点.nextSibling

3.上一个节点

node.previousSibling

4.上一个元素节点

node.previousElementSibling

###         获取单个子节点 ###

1.第一个子节点

node.firstChild

2.获取第一个元素节点

node.firstElementChild

3.获取最后一个子节点

node.lastChild

4.获取最后一个元素节点

node.lastElementChild

###         获取所有子节点 ###

1.获取所有子节点

语法：node.childNodes

返回的是子节点的伪数组（元素节点，文本节点，注释节点）

2.获取所有的元素子节点

语法：node.children

返回元素节点。使用最多的方法。

###         节点的属性 ###

属性：事物的特征

nodeName: 节点名称

注释节点： \#comment

文本节点： \#text

元素节点： 大写的标签名

属性节点： 属性名

nodeType：节点类型

注释节点：8

文本节点：3

元素节点：1

属性节点：2

nodeValue：节点的值

注释节点：注释内容

文本节点：文本内容

元素节点：null

属性节点：属性值

Dom 获取节点方法

发表评论取消回复

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

相关阅读

相关 react ref获取dom节点

相关 WebAPI-DOM树，获取父节点、获取子节点的方法汇总

相关 WebAPI-获取DOM节点的节点名称、节点类型值、节点值

相关 JS获取DOM节点

相关 JS获取元素节点和子节点的三种方法(dom查询)

相关 Dom 获取节点方法

相关 DOM 节点方法

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

相关通过DOM关系获取元素节点和操作节点的基本方法

相关 taro 获取dom节点信息