DOM BOM篇二节点操作_bom节点操作方法-CSDN博客

本文链接：https://blog.csdn.net/qq_39165819/article/details/125145034

节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
在这里插入图片描述
使用children可以获取到当前元素子节点元素
举例新浪下拉菜单

<body>
  <ul class="nav">
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">微博</a>
      <ul>
        <li>
          <a href="">私信</a>
        </li>
        <li>
          <a href="">评论</a>
        </li>
        <li>
          <a href="">@我</a>
        </li>
      </ul>
    </li>
  </ul>
  <script>
    var nav=document.querySelector('.nav');
    //得到四个li
    var lis=nav.children;
    for (var i=0;i<lis.length;i++){
      lis[i].onmouseover = function (){
        this.children[1].style.display = 'block';
      }
      lis[i].onmouseout = function (){
        this.children[1].style.display = 'none';
        this.children[1].style.float = 'left';
      }
    }
  </script>
</body>

效果
在这里插入图片描述
得到兄弟节点

  <div>我是div</div>
  <span>我是span</span>

  <script>
    var div = document.querySelector('div');
    //1.nextSibling 下一个兄弟节点 包含元素节点或者文本节点等
    console.log(div.nextSibling);
    console.log(div.previousSibling);
    //2.nextElementSibling 得到下一个兄弟节点
    console.log(div.nextElementSibling);
    console.log(div.previousElementSibling);

  </script>

使用createElement可以创建节点，使用appendChild可以添加元素
举例

<style>
  ul li{
    width: 100px;
    height: 20px;
    background-color: cadetblue;
    margin-top: 10px;
  }
  textarea {
    outline: darksalmon;
  }
</style>
<body>
  <textarea name="" id=""></textarea>
  <button>发布</button>
  <ul>
    <li>
    </li>
  </ul>
  <script>
    var btn = document.querySelector('button');
    var ul=document.querySelector('ul');
    var text = document.querySelector('textarea');
    btn.onclick = function (){
      if (text.value===''){
        alert('请输入内容')
       }else {
        var li= document.createElement('li');
        li.innerHTML=text.value+"<a href='javascript:;'>删除</a>";
        //添加元素
        //ul.appendChild(li);
        //将元素添加至第一个前面
        ul.insertBefore(li,ul.children[0]);
        //删除元素 删除的是当前连接的li 它的父亲
        var as = document.querySelectorAll('a');
        for (var i=0;i<as.length;i++){
          as[i].onclick = function (){
            ul.removeChild(this.parentNode);
          }
        }
      }
    }
    del.onclick = function (){
      if (ul.children.length===0){
        this.disabled = true;
      } else {
        this.disabled = false;
        ul.removeChild(ul.children[0]);
      }
    }
  </script>
</body>