【DOM】（1）通过document获取页面节点的三个属性（nodeName、nodeType、nodeValue）

最新推荐文章于 2024-06-05 20:55:18 发布

原创最新推荐文章于 2024-06-05 20:55:18 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

❸JavaEE 同时被 2 个专栏收录

46 篇文章

订阅专栏

---- ----④DHTML

3 篇文章

订阅专栏

本文详细介绍了HTML文档对象模型中节点的三个核心属性：nodeName、nodeType 和 nodeValue 的使用方法及示例。通过具体实例展示了如何获取不同类型的节点属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document对象：

1、document对象：代表给定浏览器窗口中的HTML文档。

【注意】：页面文档对象中的任意组成部分都是一个节点。

2、关于元素和节点：

【元素（element）】：标签
【节点（node）】：标签、属性、内容

3、所有节点都有三个属性：nodeName、nodeType、nodeValue！

标签( 例如div标签 )对象的3个属性：

<div id="div1">湖南城市学院</div>
<script type="text/javascript">
    function demo(){
        var oDivElement= document.getElementById("div1");
        alert("nodeName："+oDivElement.nodeName);//结果：DIV
        alert("nodeType："+oDivElement.nodeType);//结果：1
        alert("nodeValue："+oDivElement.nodeValue);//结果：null
    }
</script>

【说明】：

getElementById ：获取对 ID 标签属性为指定值的第一个对象的引用。

nodeName ：获取特定结点类型的名称。

nodeType ：获取所需结点的类型。

nodeValue ：设置或获取结点的值。

属性对象(oAttribute)的3个属性：

<script type="text/javascript">
    function demo2(){
        var oDivElement=document.getElementById("div1");
        var oAttr=oDivElement.getAttributeNode("id");
        alert("nodeName："+oAttr.nodeName    );//结果：id
        alert("nodeType："+oAttr.nodeType);//结果：2
        alert("nodeValue："+oAttr.nodeValue  );//结果：div1                     
    }
</script>

文本内容对象的3个属性：

<script type="text/jscript">
function demo3(){
    var oDivElement=document.getElementById("div1");
    var oInnerContent=oDivElement.childNodes[0];
    alert("nodeName："+oInnerContent.nodeName);//结果：#text
    alert("nodeType："+oInnerContent.nodeType);//结果：3
    alert("nodeValue："+oInnerContent.nodeValue);//结果：湖南城市学院
}