15.节点属性

最新推荐文章于 2021-11-22 20:38:38 发布

Keeling1720

最新推荐文章于 2021-11-22 20:38:38 发布

阅读量490

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113481336

版权

JavaScript 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

文章目录

节点的三个重要属性
节点的其他常用属性

节点的三个重要属性

在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>