2-DOM-nodes节点属性

本文深入探讨了DOM API中的节点属性,如childNodes、firstChild等,通过实例展示了如何使用这些属性来操作HTML文档结构。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>DOM-nodes节点属性</title>


</head>

<body>
    <div id="header"></div>
     <!--ctrl+E == 快速打印-->
    <div id="content">
        <div id="left">左侧</div>
        <div id="right">右侧</div>
    </div>

    <script type="text/javascript">
    //DOM API
        //childNodes
        var content = document.getElementById("content");

            console.log(content.childNodes[1]); 
             //childNodes为类数组 中括号 访问第二个类数组 子节点
            console.log(content.childNodes.item(1));

            console.log(content.parentNode);  
            // body--指向文档树中的父节点。 
            console.log(content.previousSibling); 
            //   <TextNode textContent="\n  "> ---兄弟节点中的前一个节点 空格 回车符  
            console.log(content.nextSibling);
              //兄弟节点中的下一个节点

            console.log(content.ownerDocument === document);
            //console.log(document);
            console.log(content.firstChild);  
            // childNodes列表中的第一个孩子节点

            console.log(document.getElementById("header").hasChildNodes()); 
            //先获取节点对象 再使用hasChildNodes方法检测 是否有孩子


            /*
                childNodes  
                    属性,保存一个NodeList对象,NodeList是一种类数组对象用来保存一组有序的节点,NodeList是基于DOM结构动态执行查询的结果,DOM结构变化可以自动反应到NodeList对象中。访问时可以通过 [ ] 中括号访问,也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组
                    var arr = Array.prototype.slice.call(nodes,0);


                firstChild
                    childNodes列表中的第一个节点
                lastChild
                    childNodes列表中的最后一个节点
                ownerDocument   
                    指向表示整个文档的文档节点。任何节点都属于它所在的文档,任何节点都不能同时存在于两个或更多个文档中。
             document.body.ownerDocument == document;
            */  
    </script>
</body>
</html>

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值