节点操作

节点操作

利用DOM提供的方法获取元素

• document.gEBI();
• document.gEBTN();
• document.querrySelector
• 逻辑性不强，繁琐

节点的层次关系

• 利用父子节点关系获取元素
• 逻辑性强，但是兼容性差
• 页面中所有的内容都是节点（标签，属性，文本，注释）所有HTML元素节点均可被修改，也可以被删除或者创建。

节点一般有三个属性

• 元素节点 nodeType 为1（主要）
• 属性节点 nodeType 为2
• 文本节点 nodeType 为3（包括问字空格，换行）

<div class="baba">
     <span class="erzi">lalal</span>
 </div>
//1.父节点parentNode
var erzi=document.querrySelector('.erzi‘);
//得到是离他最近的父节点（亲爸爸）
console.log(erzi.parentNode);//baba
//找不到返回为空


<ul>
    <li>e</li>
    <li>e</li>
    <li>e</li>
    <li>e</li>
</ul>
//2.子节点
console.log(ul.childNodes);//9,因为换行也属于文本节点，有五个换行。得到所有节点。
//如果只想要获得元素节点
var ul=document.queryselector（’ul‘）
for（var i=0; i<ul.childNodes.length; i++）{
   if(ul.childre[i].nodeType ==1){
      //ul.childNodes[i]是元素节点
      console.log(ul.childNodes[i]);
      }
  }

//3.parentNode.children(非标准)
只是一个可读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回。虽然children是一个非标准，但是得到了各个浏览器的支持。

//4.firstChild第一个字节点，不管是文本节点还是元素节点
console.log(ul.firstChild);
console.log(ul.lastChild);

//5.firstElementChild返回第一个子元素节点(考虑兼容)
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);



//6.实际开发的写法，既没有兼容性问题，又返回第一个子元素
console.log(ul.children[0]);
console.log(ul.children[ul.children.length -1]);//拿到最后一个元素

兄弟节点

//7.兄弟姐妹节点
nextSibling下一个兄弟节点，包含元素节点或者，文本节点等等
previousSibling上一个兄弟节点

//8.nextElementSibling得到下一个兄弟**元素**节点
同理有previousElementSibling

可以自己封装一个函数

function geNextElementSibling(element){
    var el=element;
    while (el = el.nextSibling){
       if(el.nodeType === 1){
            return el;//说明你是元素节点，把你返回
            }
        }
        return null;
   }

创建并添加节点

• docment，createElement（‘tagName’）
  创建由tagName指定的HTML元素，因为这些元素原来不存在，
  是根据我们的要求动态生成的，所以我们也成为动态创建元素节点
• noed,appendChild(child)
  将一个节点添加到指定父节点的子节点列表末尾，类似于css里的after伪元素
• node.insertBefore(要插入的元素,指定元素)
  方法将一个节点添加到父元素指定的子节点前面，类似于css里的before伪元素

 <ul>
    <li></li>
  </ul>
 <script>
      //1.创建
      var li = document.createElement('li');
      //2.添加
      var ul = document.querrySelector('ul');
      ul.appendChild('li');
      //3.插入节点
      var lili = document.createElement('li');
      var ul = document.querrySelector('ul');
      ul.insertBefore(lili，ul.children[0]);
 </script>

以此写一个评论框

var btn = document.querrySelector('button');
var text = document.querrySelector('textarea');
var ul = document.querrySelector('ul');

btn.onclick = function() {
      if (text.value == ' '){
          alert('你啥也没说‘)；
          return false;
       }else{
          var li = document.createElement('li');
          li.innerHTML = text.value;//创建li并且给它赋值
          ul.insertBefore(li,ul.children[0]);
          }
       }

删除节点

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

var ul = document.querrySelector('ul');
var btn = document.querrySelector('button');
node.removeChild(child)
//删除元素
 ul.removeChild(ul,children[0]);
 //点击按钮依次删除元素
 btn.onclcik = function() {
    if(ul.children.length == 0){
          this.disabled = true;
    }else{
       ul.removeChild(ul.children[0]);
       }
    }

给上面的留言框添加删除按钮

var btn = document.querrySelector('button');
var text = document.querrySelector('textarea');
var ul = document.querrySelector('ul');

btn.onclick = function() {
      if (text.value == ' '){
          alert('你啥也没说‘)；
          return false;
       }else{
          var li = document.createElement('li');
          li.innerHTML = text.value + "<a href = '#'>删除</a>" ;
          ul.insertBefore(li,ul.children[0]);

          //删除元素:删除的是当前链接的li，他的父亲
          var a = document.querSelector('a')；
          for （var i=0;i<a.length; i++）{
               a[i].onclick=function{
                   ul.removeChild(this.parentNode)
                   //这里对的this指的是a[i]，this.parentNode指的是li；然后它的父亲就是ul
                    }
       }

• 阻止链接跳转
  javascript：volid(0)或者javascript：；

复制节点。克隆

• node.cloneNode ()
  方法返回调用该方法的节点的一个父本，也称为克隆节点/拷贝节点
• 深拷贝和浅拷贝

<ul>
   <li>1</li>
    <li>2</li>
     <li>3</li>
 </ul>
 <script>
      var ul = document.querrySelector('ul');
      //1.node.cloneNode();
      括号为空或者false  浅拷贝   只复制标签不复制节点
      //2.node.cloneNode(true);
      括号里为true，  深拷贝，  复制标签以及里面的内容

       var lili = ul.children[0].cloneNode(true);
       ul.appendChild(lili);
 </script>