理解Node类型——不应被忽视的 nodeType、nodeName、nodeValue

最新推荐文章于 2023-06-26 22:38:08 发布

zwkkkk1

最新推荐文章于 2023-06-26 22:38:08 发布

阅读量1.7w

点赞数 9

分类专栏： js/jq 文章标签：前端面试题 Node类型 js dom

本文链接：https://blog.csdn.net/zwkkkk1/article/details/80229923

版权

js/jq 专栏收录该内容

25 篇文章

订阅专栏

Node 类型

DOM1级定义了 Node 接口，该接口将由 DOM 中的所有节点类型实现。这个 Node 接口在 JavaScript 中是作为 Node 类型实现的；除了 IE 之外，在其他所有浏览器中都可以访问到这个类型。JavaScript 中的所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。
这篇讲讲 Node 类型常会被忽视的三个属性：nodeType、nodeName、nodeValue。

nodeType 属性

每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 Node 类型中定义12个常量表示：

常量名	常量值	节点类型	描述
Node.ELEMENT_NODE	1	Element	代表元素
Node.ATTRIBUTE_NODE	2	Attr	代表属性
Node.TEXT_NODE	3	Text	代表元素或属性中的文本内容
Node.CDATA_SECTION_NODE	4	CDATASection	代表文档中的 CDATA 部（不会由解析器解析的文本）
Node.ENTITY_REFERENCE_NODE	5	EntityReference	代表实体引用
Node.ENTITY_NODE	6	Entity	代表实体
Node.PROCESSING_INSTRUCTION_NODE	7	ProcessingInstruction	代表处理指令
Node.COMMENT_NODE	8	Comment	代表注释
Node.DOCUMENT_NODE	9	Document	代表整个文档（DOM 树的根节点）
Node.DOCUMENT_TYPE_NODE	10	DocumentType	向为文档定义的实体提供接口
Node.DOCUMENT_FRAGMENT_NODE	11	DocumentFragment	代表轻量级的 Document 对象（文档的某个部分）
Node.NOTATION_NODE	12	Notation	代表 DTD 中声明的符号

注：红色加粗为常用的节点类型

来看下面这个例子，看如何去 Node 类型节点，以及它 NodeType 属性。

ps: 可以直接复制出去运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="box">hello nodeType~</div>

<script type="text/javascript">
	var element = document.getElementById("box");
	var attr = document.getElementById("box").getAttributeNode("id");
	var text = document.getElementById("box").firstChild;

	console.log(element.nodeType);     //1
	console.log(attr.nodeType);        //2
	console.log(text.nodeType);        //3
</script>
</body>
</html>

nodeName 属性与 nodeValue 属性

要了解节点的具体信息，可以使用 nodeName 和 nodeValue 这两个属性。这两个属性的值完全取决于节点的类型。

一般来说：

元素节点的 nodeName 是标签名称（大写）
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

这里可以改下上面的例子，打印这样的：

	console.log(document.nodeName)    //#document
	console.log(element.nodeName);    //DIV
	console.log(attr.nodeName);       //id
	console.log(text.nodeName);       //#text

对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
文档节点和元素节点，nodeValue 属性的值始终为 null。

	console.log(document.nodeValue)    //null
	console.log(element.nodeValue);    //null
	console.log(attr.nodeValue);       //box
	console.log(text.nodeValue);       //hello nodeType~