attributes.nodeName和attributes.nodeValue有什么区别（代码举例说明）

本文主要是介绍attributes.nodeName和attributes.nodeValue有什么区别（代码举例说明），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在DOM（Document Object Model）中，attributes 是一个 NamedNodeMap 对象，它包含了元素的所有属性。然而，attributes 集合中的每个属性本身是一个 Attr 对象，而不是简单的字符串或值。Attr 对象有几个属性，其中 nodeName 和 nodeValue 是两个常用的。

attributes.nodeName

nodeName 属性返回属性的名称。对于属性节点，它总是返回属性的名称。

attributes.nodeValue

nodeValue 属性返回或设置属性的值。对于属性节点，它返回或设置属性的值。但需要注意的是，并非所有属性都有值，比如一些HTML5的布尔属性（如 disabled 或 required），它们在HTML中只存在而不带值（例如 <input disabled>），但在DOM中，这些属性可能会有一个空字符串作为值。

代码举例

假设我们有以下的HTML元素：

html复制代码

<input type="text" id="myInput" value="Hello, World!" disabled>

在JavaScript中，我们可以访问该元素的属性，并检查它们的 nodeName 和 nodeValue：

javascript复制代码

	var inputElement = document.getElementById('myInput');
	// 访问 type 属性
	var typeAttr = inputElement.attributes.getNamedItem('type');
	console.log(typeAttr.nodeName); // 输出: "type"
	console.log(typeAttr.nodeValue); // 输出: "text"
	// 访问 value 属性
	var valueAttr = inputElement.attributes.getNamedItem('value');
	console.log(valueAttr.nodeName); // 输出: "value"
	console.log(valueAttr.nodeValue); // 输出: "Hello, World!"
	// 访问 disabled 属性（注意：虽然HTML中没有值，但DOM中可能有）
	var disabledAttr = inputElement.attributes.getNamedItem('disabled');
	console.log(disabledAttr.nodeName); // 输出: "disabled"
	// 对于布尔属性，nodeValue可能是一个空字符串，但属性本身存在即表示该属性被设置了
	console.log(disabledAttr.nodeValue); // 在某些浏览器中可能输出空字符串 ""，但在其他浏览器中可能不输出或输出undefined
	// 注意：对于布尔属性，通常检查属性对象本身是否存在就足够了
	if (disabledAttr) {
	console.log('Input is disabled.'); // 输出: "Input is disabled."
	}

在这个例子中，你可以看到 nodeName 总是返回属性的名称，而 nodeValue 返回属性的值（如果有的话）。对于布尔属性，如 disabled，nodeValue 可能不是很有用，因为它们的存在本身就表示了它们的值（即它们被设置了）。

这篇关于attributes.nodeName和attributes.nodeValue有什么区别（代码举例说明）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---