浅谈JS之tagNaem和nodeName

浅谈JS之tagName和nodeName

简介

DOM（文档对象模型）是对HTML和XML文档的编程接口，它将整个文档表示为一棵树形结构。在DOM中，每个节点都是一个对象，每个节点都有自己的特性、方法和事件。

在DOM节点中，元素节点是常用的一种类型，它表示HTML文档中的具体标签内容。每个元素节点都有一个标签名（tagName）和一个节点名（nodeName）。

tagName

tagName是元素节点的一个只读属性，表示该元素的标签名。可以通过以下方式获取元素节点的tagName：

var element = document.getElementById("myElement");
console.log(element.tagName);

上述代码中，首先使用getElementById方法获取id为myElement的元素节点，然后使用其tagName属性获取该元素的标签名，并将其输出到控制台。

nodeName

nodeName是节点对象的一个只读属性，表示该节点的名称。可以通过以下方式获取节点的nodeName：

var element = document.getElementById("myElement");
console.log(element.nodeName);

上述代码中的获取方式与获取tagName属性类似，只不过这里获取的是节点的名称。

tagName和nodeName的区别

tagName和nodeName都代表了元素节点的名称信息，但它们之间还是有一些区别的：

1. tagName只能获取元素节点的标签名，而nodeName不仅可以获取元素节点的标签名，还可以获取其他类型节点的名称。例如文本节点的nodeName是“#text”，注释节点的nodeName是“#comment”等。

2. tagName获取的标签名是大写字母形式，而nodeName获取到的名称是实际的节点名称，包括大小写。

3. tagName是元素节点的一个属性，而nodeName是节点对象的一个属性。

示例

示例一

考虑以下HTML代码：

<div id="myDiv">
  <p>Hello world!</p>
</div>

现在我们想要获取p标签的标签名和节点名称：

var p = document.getElementsByTagName("p")[0];

console.log(p.tagName); // 输出：P
console.log(p.nodeName); // 输出：P

由于获取的是元素节点，因此tagName和nodeName都获取到了p标签的名称，输出结果相同。

示例二

再考虑一个注释节点的例子：

var node = document.createComment("This is a comment");
console.log(node.tagName); // 输出：undefined
console.log(node.nodeName); // 输出：#comment

我们先使用createComment方法创建一个注释节点，并将其赋值给变量node，然后使用node的tagName和nodeName属性分别取得该注释节点的标签名和节点名称。由于该节点是注释节点，因此tagName的值为undefined，而nodeName的值为“#comment”。