JavaScript中获取元素节点以及获取元素属性的方法

最新推荐文章于 2024-09-19 07:31:41 发布

盛夏绽放

最新推荐文章于 2024-09-19 07:31:41 发布

阅读量1.7k

点赞数 25

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/x15514104477/article/details/139959091

版权

一.获取元素节点的方法

1.通过ID获取

使用 document.getElementById(“元素ID”) 方法，通过元素的ID获取单个元素。这是最常用的方法之一，因为ID在页面中是唯一的，可以直接定位到具体元素。

<div id="box"></div>
<script>
	//通过元素的ID获取元素
	let box = document.getElementById("box")
</script>

2.通过标签名获取

使用 document.getElementsByTagName(“标签名”) 方法，通过标签名获取一组元素。这个方法返回一个伪数组，包含所有匹配指定标签名的元素。

<p></p>
<p></p>
<script>
	//通过元素的标签名获取元素
	let label = document.getElementsByTagName("p")
</script>

3.通过类名获取

使用 document.getElementsByClassName(“类名”) 方法，通过类名获取一组元素。同样返回一个伪数组，包含所有具有指定类名的元素。

<div class="box"></div>
<script>
	//通过元素的类名获取元素
	let box = document.getElementsByClassName("box")
</script>

4.通过name属性获取

使用 document.getElementsByName(“name属性的值”) 方法，通过name属性获取一组元素。此方法通常用于获取表单元素，比如单选按钮或复选框组。

<input type="text" name="example"/>
<script>
	//通过name属性获取元素
	let example = document.getElementsByName("example")
</script>

5.通过CSS选择器获取

使用 document.querySelector(“CSS选择器”)方法

获取的元素只有一个的时候

<div class="box"></div>
<script>
	//通过CSS选择器获取元素
	let box = document.querySelector("box")
</script>

使用 document.querySelectorAll(“CSS选择器”)方法

获取的元素有很多个的时候

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
	//通过CSS选择器获取元素
	let boxs = document.querySelectorAll("box")
</script>

6.获取特殊元素

获取body元素

document.body直接获取body元素

// 使用document.body获取body元素
var bodyElement = document.body;

// 输出获取到的元素
console.log(bodyElement); // 输出：<body>...</body>

获取html元素

document.documentElement获取html元素

二.获取元素属性的方法

1.通过点符号(.)获取属性：

使用element.attributeName语法获取元素的属性值，其中element是获取到的DOM元素对象，attributeName是要获取的属性名称。

2.通过getAttribute()方法获取属性：

使用 element.getAttribute(“attributeName”) 方法获取元素的属性值，其中element是获取到的DOM元素对象，"attributeName"是要获取的属性名称。

3.通过dataset获取自定义数据属性：

使用 element.dataset.attributeName 语法获取元素上的自定义数据属性值，其中element是获取到的DOM元素对象，attributeName是自定义数据属性的名称。

// 假设HTML文档中有以下元素：
// <div id="myDiv" class="container" data-info="example">Hello World</div>

// 获取元素
var myDiv = document.getElementById("myDiv");

// 通过点符号(.)获取class属性
var className = myDiv.className;
console.log(className); // 输出："container"

// 通过getAttribute()方法获取id属性
var elementId = myDiv.getAttribute("id");
console.log(elementId); // 输出："myDiv"

// 通过dataset获取自定义数据属性data-info
var info = myDiv.dataset.info;
console.log(info); // 输出："example"