首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript元素节点及属性

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

2025-04-29 10:58:34 作者：盛夏绽放

JavaScript DOM是Web开发中用于操作HTML或XML文档的一种标准接口,它将文档结构转换为一个树形结构,使得我们可以通过JavaScript来访问和修改文档中的各个部分,本文给大家介绍了JavaScript获取元素节点及属性的方法,需要的朋友可以参考下

一.获取元素节点的方法

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"

到此这篇关于JavaScript获取元素节点及属性的方法的文章就介绍到这了,更多相关JavaScript元素节点及属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！