15.节点属性

2021-02-03 19:03:38 阅读：177 来源： 互联网

标签：console log nodeValue 15 属性节点 nodeName

在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

15.节点属性