JavaScript学习笔记-DOM节点类型和常用数值

前端开发2026-04-08阅读 13

javascript

DOM常见节点类型

nodeTYPE

节点类型	数值常量	字符常量
Element（元素节点）	1	ELEMENTT_NODE
Attr（属性节点）	2	ATTRIBUTE_NODE
Text（文本节点）	3	TEXT_NODE
Comment(注释节点)	8	COMMENT_NODE
Document（文档节点）	9	DOCUMENT_NODE
DocuemtnType（文档类型节点）	10	DOCUEMTN_TYPE_NODE
DocumentFragment（文档片段节点）	11	DOCUMENT_FRAGMENT_NODE

节点的类型可以是字符常量也可以是数值常量 在IE浏览器是不支持字符常量的

下面这段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--nodeName,nodeValue试验 -->
    <div id="container">这是一个元素的节点</div>
    <script>
        var divNode = document.getElementById("container");
        console.log(divNode);
        console.log(divNode.nodeType);
        if (divNode.nodeType == Node.ELEMENT_NODE){
            console.log('nodeType是元素节点');
        }
        if (divNode.nodeType == 1){
            console.log("1是元素节点");
        }
    </script>
</body>
</html>

先放到Chrome下执行，可以看到是两个元素节点都可以打印出来的，但放在IE下面就只有1是元素节点打印了，而nodeType是元素节点就没有打印。通过IE的控制台是可以看到有一个错误提示"Node"未定义

这也说明了一个问题，通过数值常量是所有浏览器都支持的，为了兼容性问题，可以尽可能的使用数值类型

nodeNAME & nodeValue

当然除了nodeTYPE返回节点类型以外，也是可以使用nodeNAME返回节点的名称，通过nodeValue返回节点的值。还是上面的那个例子,改成下面的js,运行后可以看到控制台输出了

        var divNode = document.getElementById("container");
        console.log(divNode.nodeName);
        console.log(divNode.nodeValue);
		--> DIV
		--> null

这样也验证了DIV节点的nodeName是DIV节点，nodeValue节点是null

然后在增加属性节点的js语句

        var attrNode = divNode.attributes[0];
        console.log(attrNode.nodeName);
        console.log(attrNode.nodeValue);
		--> id
		--> container

获取文本节点

        var textNode = divNode.childNodes[0];
        console.log(textNode);
		--> 这是一个元素的节点

获取注释节点

        var commentNode = document.body.childNodes[1];
        console.log(commentNode.nodeName);
        console.log(commentNode.nodeValue);
		--> #comment
		--> nodeName,nodeValue试验

获取文档类型节点

        console.log(document.doctype.nodeName);
        console.log(document.doctype.nodeValue);
		--> html
		--> null

获取文档片段

        var frag = document.createDocumentFragment();
        console.log(frag.nodeName);
        console.log(frag.nodeValue);
		--> #document-fragment
		--> null

nodeName与nodeValue汇总表

节点类型	nodeName	nodeValue
Element（元素节点	元素的标签名（div）	null
Attr（属性节点）	属性的名称（id）	属性的值（container）
Text（文本节点）	#text	节点所包含的文本
Comment（注释节点）	#comment	注释的内容
DocumentType（文档类型节点）	doctype的名称（html）	null
DocumentFragment（文档片段节点）	#document-fragment	null