• 本文目录导读：
• 1、如何遍历对象属性名并获取属性值？
• 2、总结

JavaScript是一种常用的编程语言，被广泛应用于网页开发中。在网页开发中，我们经常需要使用JavaScript来获取页面上的元素，并对这些元素进行操作。本文将介绍如何使用JavaScript获取全部元素并遍历对象属性名获取属性值。

一、如何使用JavaScript获取全部元素？

在JavaScript中，可以通过document对象的方法来访问页面上的所有元素。其中最常用的方法是getElementById()和getElementsByTagName()。

1. getElementById()

getElementById()方法可以根据指定的ID值返回对应的DOM节点。例如，如果要访问ID为“myDiv”的div节点，则可以使用以下代码：

“`

var myDiv = document.getElementById(“myDiv”);

2. getElementsByTagName()

getElementsByTagName()方法可以根据指定标签名返回一个包含所有匹配标签的NodeList集合。例如，如果要访问所有p标签，则可以使用以下代码：

var pList = document.getElementsByTagName(“p”);

二、如何遍历对象属性名并获取属性值？

在JavaScript中，我们通常会定义一个对象，并给这个对象添加一些属性和方法。如果想要遍历这个对象的所有属性，并且获取每个属性对应的值，则需要使用for-in循环语句。

for-in循环语句会迭代一个给定对象中可枚举（enumerable）且没有被继承的属性。例如，假设我们有一个对象person，其中包含了name、age和gender三个属性：

var person = {

name: “张三”,

age: 18,

gender: “男”

};

现在我们想要遍历这个对象，并输出每个属性对应的值，则可以使用以下代码：

for (var key in person) {

console.log(key + “: ” + person[key]);

}

执行以上代码后，控制台将会输出以下内容：

name: 张三

age: 18

gender: 男

注意，在使用for-in循环语句时，需要注意以下几点：

1. for-in循环语句只会迭代对象自身的可枚举属性，不会迭代继承来的属性。

2. 在迭代过程中，key变量将被赋值为当前属性名。

3. 要获取当前属性对应的值，则需要使用对象[key]语法。

三、JavaScript获取全部元素并遍历对象属性名获取属性值实例

下面我们来看一个完整的实例。假设我们有一个包含多个div节点和p节点的页面，并且每个节点都包含了一些自定义数据（如图所示）：

现在我们想要使用JavaScript获取所有节点，并遍历每个节点的自定义数据，然后输出到控制台。可以使用以下代码实现：

var nodeList = document.getElementsByTagName(“*”); // 获取所有节点

for (var i = 0; i < nodeList.length; i++) {

var node = nodeList[i];

if (node.getAttribute(“data-name”)) { // 判断是否包含自定义数据

console.log(node.tagName + “: ” + node.getAttribute(“data-name”)); // 输出标签名和自定义数据

for (var key in node.dataset) { // 遍历对象属性名并获取属性值

console.log(key + “: ” + node.dataset[key]);

}

}

DIV: John Doe

name: John Doe

age: 30

DIV: Jane Smith

name: Jane Smith

P: Bob Johnson

name: Bob Johnson

P: Alice Williams

name: Alice Williams

age: 25

PETER-PAN:

上述代码首先使用getElementsByTagName()方法获取了页面上的所有节点，并存储在一个NodeList集合中。然后通过for循环语句遍历每个节点，并判断该节点是否包含了自定义数据（即“data-name”属性）。如果该节点包含了自定义数据，则输出该标签名和对应的自定义数据。

接着，在当前节点上调用dataset属性，可以返回一个对象，其中包含了当前元素所有以”data-“为前缀的自定义属性和对应的值。通过for-in循环语句遍历该对象，可以输出每个自定义属性名和对应的值。

四、总结

本文介绍了如何使用JavaScript获取全部元素并遍历对象属性名获取属性值。首先我们使用getElementById()和getElementsByTagName()方法来获取页面上的所有节点。然后通过for-in循环语句遍历对象属性名，并使用对象[key]语法来获取当前属性对应的值。

最后，我们给出了一个完整实例，演示了如何从页面中提取自定义数据，并输出到控制台中。

本文内容简单易懂，适合初学者阅读学习。希望能够帮助大家更好地理解JavaScript在网页开发中的应用。