dom初学者笔记

最新推荐文章于 2024-02-01 16:59:57 发布

结城

最新推荐文章于 2024-02-01 16:59:57 发布

阅读量318

点赞数

分类专栏： DOM 文章标签： dom初学者笔记

本文链接：https://blog.csdn.net/qq_43487181/article/details/88756505

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

dom操作

js有7种节点：

document：文档节点
documentType：文档声明节点，html声明部分
element：元素节点（body、div、p、a等等）
text: 文本节点(空格、文字等)
属性: <a href=""></a>其中href为属性节点
注释节点: 
文档片段

节点和元素的区别：节点包含元素，比元素的范围更广

节点操作

Node.nextSibling：目标节点下一个

   <div id="box">
        <h1 id="h1">标题1</h1>
        <h2 id="h2">标题2</h2>
    </div>
    
    <script>
    //报错，因为它查找的是文本节点（空格），而文本节点没有帮着色
    var h2 = document.getElementById('h1').nextSibling.style.color='red';
    console.log(h2);

    //正确，查找的是下一个元素，元素就排除了文本节点
    var h2 = document.getElementById('h1').nextElementSibling.style.color='red';
    console.log(h2);
    
    </script>

Node.nextElementSibling：目标节点下一个元素
Node.previousSibling：目标节点上一个
Node.previousElementSibling：目标节点上一个元素
Node.parentNode：目标节点的父节点
Node.parentElement：目标节点的父元素
Node.firstChild：目标节点的第一个子节点，相当于Node.childNodes[0]
Node.lastChild：目标节点的最后一个子节点，相当于Node.childNodes[数组长度-1]
Node.childNodes：返回所有的子节点（注意7种）
Node.children: 返回所有的子元素（div、p、a）

   <div id="box">
        <ul>
            <li>首页</li>
            <li>关于我们</li>
            <li>产品</li>
            <p>段落</p>
        </ul>
    </div>
    <script>
    var ul = document.querySelector('#box ul');
    // var lis = ul.querySelectorAll('li');
    // var lis = ul.getElementsByTagName('li');
    // var lis = ul.childNodes;

    //按范围大小排列
    // childNodes > children > (querySelectorAll 或者 getElementsByTagName)
    var lis = ul.children;
    for(var i=0;i<lis.length;i++){
        console.log(lis[i]);
    }
    </script>

Node 接口的方法

Node.appendChild()

描述：在目标节点内部的后面插入节点

如何通过js动态创建节点？

//1. 创建一个li元素节点
var li = document.createElement('li');
//2. 创建一个文本节点
var text = document.createTextNode('首页');
//3. 将文本节点追加到li元素内部后面
li.appendChild(text);

Node.insertBefore()

描述：用于将某个节点插入父节点内部的指定位置

<ul id="box">
    <li>关于我们</li>
</ul>
<script>
var box = document.getElementById('box');
var li = document.createElement('li');
var text = document.createTextNode('首页');
li.appendChild(text);

//box.firstChild表示box元素内部的节点（注意节点包含文本、注释、元素、属性），这里它应该是文本节点
box.insertBefore( li, box.firstChild);
</script>

Node.removeChild()

接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点。

<ul id="box">
    <li>关于我们 <button onclick="del(this)">删除</button></li>
</ul>

<script>
function del(btn){
    if(confirm('您确认要删除？')){
        var li = btn.parentNode;
        var ul = li.parentNode;
        ul.removeChild( li );
    }
}
</script>

Node.cloneNode()

方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点。它的返回值是一个克隆出来的新节点。

该方法有一些使用注意点。

不会拷贝事件
可能会id重复
拷贝后只是在内存中,还需要插入.

<ul id="box">
    <li>关于我们 <button onclick="copy(this)">复制</button></li>
</ul>

<script>
function copy(btn){
    var li = btn.parentNode;
    //cloneNode 设置为true 表示复制包含所有子元素和事件都会拷贝
    var _li = li.cloneNode(true);
    box.appendChild( _li );
}
</script>

    <ul id="box">
        <li>
            关于我们
            <button onclick="del(this)">删除</button>
            <button onclick="copy(this)">复制</button>
        </li>
    </ul>

    <button id="btn1">内部后面追加</button> <br><br>

    <button id="btn2">内部参考节点的前面追加</button>

    <script>
        <ul id="box">
        <li>
            关于我们
            <button onclick="del(this)">删除</button>
            <button onclick="copy(this)">复制</button>
        </li>
    </ul>

    <button id="btn1">内部后面追加</button> <br><br>

    <button id="btn2">内部参考节点的前面追加</button>

    <script>
    var box = document.getElementById('box');

    //内部追加
    document.getElementById('btn1').onclick = function(){

        var li = document.createElement('li');

        //使用js动态创建节点的好处在于，你可以在节点插入文档之前添加事件，而使用innerHTML的方式，必须先插入文档之后，然后在去查找该节点。

        var text = document.createTextNode('联系我们');
        li.appendChild(text);

        //删除按钮
        var delBtn = document.createElement('button');
        delBtn.onclick = function(){
            del(this);
        }
        var btnText = document.createTextNode('删除');
        delBtn.appendChild( btnText );
        li.appendChild(delBtn);

        //复制按钮
        var copyBtn = document.createElement('button');
        copyBtn.onclick = function(){
            copy(this);
        }
        var copyText = document.createTextNode('复制');
        copyBtn.appendChild( copyText );
        li.appendChild(copyBtn);

        box.appendChild(li);
    }
    
    //内部参考节点的前面追加
    document.getElementById('btn2').onclick = function(){
        
        //创建一个节点
        var li = document.createElement('li');
        var text = document.createTextNode('首页');
        li.appendChild(text);

        //删除按钮
        var delBtn = document.createElement('button');
        delBtn.onclick = function(){
            del(this);
        }
        var btnText = document.createTextNode('删除');
        delBtn.appendChild( btnText );
        li.appendChild(delBtn);

        //复制按钮
        var copyBtn = document.createElement('button');
        copyBtn.onclick = function(){
            copy2(this);
        }
        var copyText = document.createTextNode('复制');
        copyBtn.appendChild( copyText );
    
        li.appendChild(copyBtn);
     
        box.insertBefore( li, box.firstChild);

    }

    function del(btn){

        if(confirm('您确认要删除？')){
            var li = btn.parentNode;
            var ul = li.parentNode;
            ul.removeChild( li );
        }

    }

    function copy(btn){
        var li = btn.parentNode;
        //cloneNode 设置为true 表示复制包含所有子元素和事件都会拷贝
        var _li = li.cloneNode(true);
        box.appendChild( _li );
    }

    function copy2(btn){
        var li = btn.parentNode;
        var nextLi = li.nextElementSibling;

        var _li = li.cloneNode(true);
        box.insertBefore( _li, nextLi );
    }

    </script>