JavaScript-筑基（十一）节点操作及发布留言案例

兄弟节点（一般不使用）

node.nextSibling 返回下一个兄弟节点，同样，包含所有类型的节点

node.previousSibling 返回上一个兄弟节点，包含所有类型的节点

node.nextElementSibling 返回下一个兄弟元素节点

node.previousElementSibling 返回上一个兄弟元素节点

<div>aodjoawdoa</div>
   <span>dadcascaca</span>
    <script >
      var div = document.querySelector('div');
      console.log(div.nextElementSibling);
    </script>

先 创建节点

document.createElement('tagName')

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不在，是根据我们的需求动态生成的，所以我们也称动态创建元素节点。

再 添加节点

node.appendChild(child)

• node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。
• node.insertBefore(child, 指定元素) 将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

<ul></ul>
    <script >
      var li = document.createElement('li');
      var ul = document.querySelector('ul');
      ul.appendChild(li);
    </script>

 <ul>
       <li>123</li>
   </ul>
    <script >
      var ul = document.querySelector('ul');
      var lili = document.createElement('li');
      ul.insertBefore(lili, ul.children[0]);
    </script>

简单版发布留言案例

核心思路：点击按钮后，就动态创建一个li，添加到ul里面。创建 li 的同时，把文本域里面的值通过li.innerHTML赋值给li。如果想要新的留言在后面显示就用appendChild，如果想要显得留言在前面显示就用insertBefore。

  <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script >
     //1.获取元素
     var btn = document.querySelector('button');
     var ul = document.querySelector('ul');
     var text = document.querySelector('textarea');
     btn.onclick = function() {
         //1.创建元素2.添加元素
         if(text.value == ''){
             alert('未输入内容');
             return false;
         } else {
             var li = document.createElement('li');
             //创建后赋值
             li.innerHTML = text.value;
             ul.insertBefore(li,ul.children[0]);
         }
     }
    </script>

 

删除节点

node.removeChild(child) 方法从DOM中删除一个子节点，返回删除的节点。

以上面案例进行留言删除。当把文本域里面的内容赋值给 li 时，多添加一个删除链接；把所有链接获取过来，当点击当前的链接的时候，删除当前链接所在的li；阻止链接跳转需要给herf添加javascript:;

 li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";

//删除元素 删除的是当前链接的li，即a的父亲
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        //要删除的是li，即a的父亲this.parentNode
                        ul.removeChild(this.parentNode);
                    }

复制节点

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点

 <ul>
        <li>被删除</li>
        <li>撒旦二</li>
        <li>大苏打</li>
        <!-- <li>被删除</li> -->
    </ul>
    <script >
        var ul = document.querySelector('ul');
        //复制后仍然要添加
        var lili =  ul.children[0].cloneNode(true);//括号里面为空或者false 为浅拷贝 只复制标签不复制内容
        ul.appendChild(lili);
    </script>

---

祝你学习快乐！