HTML中DOM解析篇1--nodeType\nodeValue\nodeName

最新推荐文章于 2021-06-15 13:01:00 发布

LeapMotion1

最新推荐文章于 2021-06-15 13:01:00 发布

阅读量430

点赞数

分类专栏： Javascript 文章标签： html dom

本文链接：https://blog.csdn.net/leapmotion1/article/details/78189683

版权

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1. 各DOM的定义和用法

nodeType 属性返回以数字值返回指定节点的节点类型，类型共有12种，常用到的有3种，

nodeType=1: 元素节点
nodeType=2: 属性节点
nodeType=3: 文本节点

针对不同节点类型，nodeValue和nodeName返回不同值：

调用方法

node.nodeType   //获取节点类型
node.nodeValue  //获取节点内容
node.nodeName   //获取节点名称

注：nodeValue 属性设置或返回指定节点的节点值。
如果您希望返回元素的文本，请记住文本始终位于文本节点中，并且您必须返回文本节点的值。

element.childNodes[0].nodeValue  //调用方法

//示例
<!DOCTYPE html>
<html>
    <body>

        <p id="demo">请点击按钮来获得 button 元素的节点值。</p>

        <button onclick="myFunction()">试一下</button>

        <script>
        function myFunction()
        {
        //首先获取到该节点下的第一个节点[0]下标
        var c=document.getElementsByTagName("BUTTON")[0];  
        var x=document.getElementById("demo");  
        //获取该元素下的第一个孩子节点的值
        x.innerHTML=c.childNodes[0].nodeValue;
        }
        </script>

        <p><b>注释：</b>元素内的文本节点被视作文本节点，因此我们返回 button 元素的首个子节点（childNodes[0]）的节点值。</p>

    </body>
</html>