什么是nodeName属性

JavaScript中的HTML DOM（文档对象模型）是指将HTML文档看做一个树形结构，每一个HTML元素节点都可以通过JavaScript进行访问和操作，其中nodeName属性是其中的一种节点属性。nodeName属性是指DOM中某一个元素节点的标签名称，返回的结果是元素节点的名称，如元素的nodeName属性值是"p"。

var node = document.createElement("p");

var nodeName = node.nodeName; // nodeName的值为"p"

nodeName在DOM操作中的应用

1. 查找节点

在HTML DOM中，我们可以使用nodeName来查找指定元素节点，例如下面这段代码就是通过nodeName查找了所有的元素节点：

var elements = document.getElementsByTagName("p");

for(var i=0; i < elements.length; i++){
  if(elements[i].nodeName == "P"){
    // 对符合条件的元素进行操作
  }
}

这段代码中使用了getElementsByTagName方法获取了所有的元素节点，然后通过遍历elements数组中的每一个元素，判断nodeName是否是"P"，如果是则进行操作。

2. 判断节点类型

我们可以使用nodeName属性来判断某个节点的类型，例如下面这段代码就是判断一个节点是否是文本节点：

var node = document.createTextNode("文本节点");

if(node.nodeName == "#text"){
  console.log("这是一个文本节点");
}

在这个例子中，我们创建了一个文本节点，然后通过判断nodeName是否是"#text"来判断其是否是文本节点。

3. 创建节点

在JavaScript中，我们可以使用createElement方法来创建元素节点，代码如下：

var node = document.createElement("p");

console.log(node.nodeName); // 输出p

这段代码中，我们使用createElement方法创建了一个新的元素节点，然后通过nodeName属性获取了该节点的标签名称。

4. 替换节点

元素节点：

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

var newNode = document.createElement("h2");
newNode.innerHTML = "替换后的h2";
var parentNode = oldNode.parentNode;
parentNode.replaceChild(newNode, oldNode);
console.log(newNode.nodeName); // 输出h2

在这个例子中，我们获取了第一个

元素节点，然后创建了一个新的

元素节点，并将其内容设置为"替换后的h2"。接着，获取了老节点的父节点，并使用replaceChild方法将其替换成新节点。

总结

使用JavaScript的HTML DOM中的nodeName属性可以方便地获取节点的名称，并且可以应用于查找节点、判断节点类型、创建节点以及替换节点等操作。熟练掌握nodeName属性能够帮助我们更加灵活地操作HTML DOM，提高开发效率。