其他分享
首页 > 其他分享> > 15.节点属性

15.节点属性

作者:互联网

在DOM中,每一个节点都是一个对象,DOM节点由三个重要的属性:
1.nodeName:节点的名称
2.nodeValue:节点的值
3.nodeType:节点的类型

1.nodeName属性:节点的名称,只读
1)元素节点的nodeName与标签名相同
2)属性节点的nodeName与属性的名称相同
3)文本节点的nodeName永远是#test
4)文档节点的nodeName永远是#document

2.nodeValue属性:节点的值
1)元素节点的nodeValue是 undefined或null
2)文本节点的nodeValue是文本自身
3)属性节点的nodeValue是属性的值

3.nodeType属性:节点的类型,只读
以下是常用的几种节点类型:

元素类型节点类型
元素1
属性2
文本3
注释8
文档9

下面我们直接贴代码解释:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点属性</title>
</head>
<body>
    <div id="box" title="我是文本">我是一个文本节点</div>
    <script type="text/javascript">
        //获取id为box的元素节点信息
        let div = document.getElementById('box');
        //输出节点的节点名,节点值和节点的类型
        console.log(div.nodeName);//输出DIV
        console.log(div.nodeValue);//输出null
        console.log(div.nodeType);//输出1

        //获取属性节点的信息
        let attrNode = div.attributes[0];
        console.log(attrNode);//输出id=“box”
        console.log(attrNode.nodeName);//输出id
        console.log(attrNode.nodeValue);//输出box
        console.log(attrNode.nodeType);//输出2

        //获取文本节点的信息
        let textNode = div.childNodes[0];
        console.log(textNode);//输出#text的各个object属性
        console.log(textNode.nodeName);//输出#text
        console.log(textNode.nodeValue);//输出我是一个文本节点
        console.log(textNode.nodeType);//输出3
    </script>
</body>
</html>

标签:console,log,nodeValue,15,属性,节点,nodeName
来源: https://blog.csdn.net/weixin_44741023/article/details/113481336