正在进入ing...

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

发布时间:2020-09-08 浏览量: 1476 文章分类: 前端相关

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