JavaScript学习-Dom（简单方法）

最新推荐文章于 2024-07-30 10:56:44 发布

_Kayo_

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量74

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/mashirokayo/article/details/126504085

版权

感觉之前学习的问题是没有什么实践，主要是记录一下自己觉得会加深记忆和理解的小练习吧。

基础方法：

childNodes、insertBefore、removeChild等等这些，其他的属性先不列了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            width:100%;
            height: 100%;
        }
        .outer-box{
            width: 100%;
            height: 100%;
        }
        .inner-box{
            margin-top:5px;
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
        .inner-box1{
            margin-top:5px;
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="outer-box">
        <div class="inner-box1">
            <div class="box">

            </div>
        </div>

        <div class="inner-box">
        </div>

        <div class="inner-box">

        </div>

        <div class="inner-box">

        </div>

        <div class="inner-box">

        </div>

        <div class="inner-box">

        </div>
    </div>

    <script>
        let outer = document.getElementsByClassName("outer-box");
        console.log(outer[0].childNodes);
        console.log(outer[0].firstChild);
        outer[0].appendChild( outer[0].childNodes[1] );
        console.log( outer[0].childNodes );
        outer[0].insertBefore(outer[0].childNodes[3],outer[0].lastChild);
        console.log( outer[0].childNodes );
        outer[0].replaceChild( outer[0].firstChild,outer[0].lastChild );
        console.log( outer[0].childNodes );
        outer[0].removeChild( outer[0].childNodes[3] );
        console.log( outer[0].childNodes );
        /*
        console-output:
        NodeList(13) [#text, div.inner-box1, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text]
        #text
        NodeList(13) [#text, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box1]
        NodeList(13) [#text, #text, div.inner-box, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, #text, div.inner-box1]
        NodeList(12) [#text, div.inner-box, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, #text, #text]
        NodeList(11) [#text, div.inner-box, div.inner-box, div.inner-box, #text, div.inner-box, #text, div.inner-box, #text, #text, #text]
        */

        let cnode = outer[0].cloneNode(true);
        console.log(cnode.childNodes.length);

        let c_node = outer[0].cloneNode(false);
        console.log(c_node.childNodes.length);
        //console-output:
        //11
        //0

        console.log(document.documentElement);  //output:html
        console.log(document.body); //output：body
    </script>

</body>


</html>

文档信息

<script>

        console.log(document.documentElement);  //output:html
        console.log(document.body); //output：body
    
        let url = document.URL;
        console.log(url); //file:///D:/Untitled-1.html
        console.log(document.domain); //""
</script>

获取节点

    <script>
        let text = document.getElementById("test1");
        console.log(text); //div#test1 虽然有两个标签，但是只返回第一个
        let div = document.getElementsByTagName("div");
        console.log(div); //HTMLCollection(8) [div.outer-box, div.inner-box, div.inner-box, div.inner-box, div.inner-box, div.inner-box, div#test1, div#test1, test1: div#test1]
        
    </script>