JavaScript DOM节点核心属性详解：nodeType、nodeName与innerHTML

结构和内容属性

nodeType节点类型详解

nodeType

所有节点均具备类型属性，DOM规范定义了12种节点类型。

interface Node {
// NodeType
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
...
}

其中，元素节点（值为1）和文本节点（值为3）最为常用，其余类型在实际开发中较少涉及。例如，若需遍历并筛选所有子元素节点，可通过遍历childNodes集合，利用childNodes[i].nodeType != 1进行判断过滤。实现代码如下：

<body>
<div>Allowed readers:</div>
<ul>
<li>John</li>
<li>Bob</li>
</ul>
<!-- a comment node -->
<script>
var childNodes = document.body.childNodes
for(var i=0; i<childNodes.length; i++) {
if (childNodes[i].nodeType != 1) continue
alert(childNodes[i])
  }
</script>
</body>

*思考 分析以下代码将弹出什么内容：

<!DOCTYPE HTML>
<html>
<body>
<script>
alert(document.body.lastChild.nodeType)
</script>
</body>
</html>

nodeName与tagName的区别

nodeName, tagName

nodeName与tagName均用于获取节点名称。以document.body为例：

alert( document.body.nodeName ) // BODY 在HTML解析模式下，所有nodeName均会被转换为大写。

当nodeName未转换为大写时 这种情况较为罕见，具体原理可进一步查阅相关资料。浏览器通常采用两种解析模式：HTML模式和__XML模式__。默认情况下使用HTML模式，但当通过XMLHttpRequest__技术加载XML文档时，会切换至XML模式。在Firefox浏览器中，若XHTML文档的Content-Type设置为xmlish，也会启用XML模式。在__XML模式__下，节点名称将保持原始大小写，因此可能出现body或bOdY等变体。这意味着，若通过XMLHttpRequest__从服务器加载XML至HTML文档，节点名称将保留其原始大小写。

对于元素节点，nodeName与__tagName__的值相同。 非元素节点虽存在nodeName属性，但其值具有特殊性：

alert(document.nodeName) // #document 大多数节点类型不具备tagName属性，且在IE浏览器中，注释节点的tagName值为!。因此，通常而言，nodeName比tagName更具通用性；而tagName可视为简化版，仅在明确处理元素节点时使用。

innerHTML属性及其陷阱

innerHTML

innerHTML属于HTML5标准的一部分，详见相关链接。 该属性允许以文本形式访问节点内容。以下示例展示了读取并替换document.body内容的过程：

<body>
<p>The paragraph</p>
<div>And a div</div>
<script>
alert( document.body.innerHTML ) // read current contents
document.body.innerHTML = 'Yaaahooo!' // replace contents
</script>
</body>

innerHTML应包含有效的HTML代码，但浏览器也能解析部分畸形HTML。该属性可用于任意元素节点，具有极高的实用价值。

innerHTML pitFalls

innerHTML的使用并非如表面那般简单，其中包含诸多陷阱，不仅新手容易中招，甚至资深程序员也可能疏忽。

IE中__table__节点的innerHTML为只读 在IE浏览器中，COL、COLGROUP、FRAMESET、HEAD、HTML、STYLE、TABLE、TBODY、TFOOT、THEAD、TITLE、TR等元素的innerHTML属性为只读。具体到table标签，除TD元素外，其他子标签的innerHTML均为只读。

innerHTML不能追加 从语法形式上看，似乎支持追加操作，例如：

chatDiv.innerHTML += "<div>Hi <img src='smile.gif'/> !</div>" chatDiv.innerHTML += "How you doing?" 但实际上执行了以下操作：

1. 清空旧内容

2. 解析新内容并插入。内容并非真正追加，而是重新生成。

因此，执行+=操作后，所有图片及其他资源（包括smile.gif）都会重新加载。

幸运的是，存在其他更新内容的方式，无需使用innerHTML，从而避免上述问题。

nodeValue与总结

nodeValue

innerHTML仅对元素节点有效。 对于其他类型的节点，需使用nodeValue属性获取内容。以下示例展示了其在文本节点和注释节点中的应用：

<body>
The text
<!-- A comment -->
<script>
for(var i=0; i<document.body.childNodes.length; i++) {
alert(document.body.childNodes[i].nodeValue)
 }
</script>
</body>

上述示例中，部分警告框为空，原因在于空白节点。需注意，SCRIPT节点的nodeValue值为null，因为SCRIPT属于元素节点，元素节点应使用innerHTML。

总结

nodeType 节点类型。最重要为元素节点1、文本节点3，只读。 nodeName/tagName 大写标签名。非元素节点的nodeName有特殊值，只读。 innerHTML 元素节点内容，可写。 nodeValue 文本节点内容，可写。 DOM节点根据类型还有其他属性，例如INPUT标签有value和__checked__属性，A标签有href等。

以上就是本文的全部内容了，希望大家能够喜欢。