WebApi复习02-DOM(查询节点)

DOM查询节点

查询子元素节点

查询子元素节点: 父元素.children 

查询兄弟元素节点

上一个兄弟元素: 元素.previousElementSibling
下一个兄弟元素: 元素.nextElementSibling

查询父节点

查询父节点 元素.parentNode

节点操作

新增节点

 1 新增节点: 
(1)内存中创建空节点: document.createElement('li')
(2)设置内容 li.innerText = '文本'
(3)添加到dom树 ul.appendChild(newli)

克隆节点

2 克隆节点: 元素.cloneNode(布尔类型)
克隆元素自己:      元素.cloneNode(false)
克隆元素自己+后代: 元素.cloneNode(true)

删除节点

3 删除节点: 父元素.removeChild(子元素)
注意点: 元素只能移除自己的子元素

insertBefore实现上移与下移

1 只能新增到最后面: 父元素.appendChild(子元素)
2 新增指定元素前面 ：  父元素.insertBefore(子元素,新增到哪个元素的前面)

  <script>
    /* 
    let ul = document.querySelector('ul')
    let li2 = document.querySelector('#li2')
    
    //1 新增元素到最后面
    document.querySelector('.btn1').onclick = function () {
      //新创建元素
      let newLi = document.createElement('li')
      newLi.innerText = '我是新来的1'
      //新增到最后面
      ul.appendChild(newLi)
    }
​
    //2 新增元素到li2前面
    document.querySelector('.btn2').onclick = function () {
      //新创建元素
      let newLi = document.createElement('li')
      newLi.innerText = '我是新来的2'
      //新增到li2前面 
      ul.insertBefore(newLi, li2)
    }
​
    //3 新增父元素的最后面
    document.querySelector('.btn3').onclick = function () {
      // 创建新元素
      let newli = document.createElement('li')
      newli.innerText = '我是新来的'
      // 新增最前面:新增到原来的第一个元素的前面
      ul.insertBefore(newli, ul.children[0])
    }
​
    //4 li2上移
    document.querySelector('.btn3').onclick = function () {
      // 上移思路 元素移动到他哥哥的前面
      // 判断li2是不是第一个元素,如果是,则不能移动
      if (li2.previousElementSibling) {
        ul.insertBefore(li2, li2.previousElementSibling)
      } else {
        alert('已经是第一个元素')
      }
    }
​
    //5 li2下移
    document.querySelector('.btn3').onclick = function () {
      // 下移思路 元素移动到他弟弟的弟弟的前面
      // 判断li2是不是最后一个元素,如果是,则不能移动
      if (li2.nextElementSibling) {
        ul.insertBefore(li2, li2.nextElementSibling.nextElementSibling)
      } else {
        alert('已经是最后一个元素')
      }
    }
  </script>