DOM节点

一.分类

• 一般来说我们分为三个大类

  • 1.元素节点(标签)

    • 通过 getElementBy....获取到的都是元素节点

  • 2.属性节点(标签上的属性)

    • 通过 getAttribute....获取到的都是属性节点

  • 3.文本节点(标签内的文字)

    • 通过 innerText....获取到的都是属文本节点

二.获取节点

    var oDiv = document.querySelector('div')    // 获取元素

• 1.获取某一节点下所有的子一级 节点 获取到的是一个伪数组
  • 语法:元素.childNodes

    console.log(oDiv.childNodes);     // 拿到的是一个伪数组,里面有7个节点
    

• 2.获取某一节点下所有的子一级 元素节点 获取到的是一个伪数组
  • 语法:元素.children

    console.log(oDiv.children);    // 拿到的是div内部的所有的标签
    

• 3.获取某一节点下 子一级的 第一个节点
  • 语法:元素.firstChild

    console.log(oDiv.firstChild);  // #text
    

• 4.获取某一节点下 子一级的 最后一个节点
  • 语法:元素.lastChild

    console.log(oDiv.lastChild);   // #text
    

• 5.获取某一节点下 子一级的 第一个元素节点
  • 语法:元素.firstElementChild

    console.log(oDiv.firstElementChild);  // <P>你好</P>
    

• 6.获取某一节点下 子一级的 最后一个元素节点
  • 语法:元素.lastElementChild*

    console.log(oDiv.lastElementChild);   // <h1>JS 是世界上最 NB 的语言</h1>
    

三.获取兄弟节点

    var oSpan = document.querySelector('span')    // 获取 span 元素

• 1.获取对应的下一个 兄弟节点
  • 语法:元素.nextSibling

    console.log(oSpan.nextSibling)      // #text
    

• 2.获取对应的上一个 兄弟节点
  • 语法:元素.previousSibling

    console.log(oSpan.previousSibling)   // #text
    

• 3.获取对应的下一个 兄弟元素节点
  • 语法:元素.nextElementSibling

    console.log(oSpan.nextElementSibling) // <h1>JS 是世界上最 NB 的语言</h1>
    

• 4.获取对应的上一个 兄弟元素节点
  • 语法:元素.previousElementSibling

    console.log(oSpan.previousElementSibling) // <p>你好</p>
    

四.获取父节点

    var oH = document.querySelector('h1')    // 获取 H1 元素

• 父节点(常用)
  • 语法:元素.parentNode

      console.log(oH.parentNode)
  

五.属性节点

    var oH = document.querySelector('h1')    // 获取 H1 元素

• 获取元素的所有属性节点(了解)
  • 语法:元素.attributes

      console.log(oH.attributes)
  

六.节点属性

• 作用:能够区分当前节点是什么类型

      <ul test="我是ul的一个属性">
          <li>你好</li>
      </ul>
  

        0.获取元素 -> var oUl = document.querySelector('ul')  

        1.元素节点 -> var eleNode = oUl.firstElementChild

        2.属性节点 -> var attrNode = oUl.attributes[0]

        3.文本节点 -> var textNode = oUl.firstChild

• 1.nodeType 节点类型
  • 1 -> 元素节点
  • 2 -> 属性节点
  • 3 -> 文本节点

      console.log('元素节点',eleNode.nodeType);
      console.log('属性节点',attrNode.nodeType);
      console.log('文本节点',textNode.nodeType);
  

• 2.nodeName 节点名称
  • 元素节点 -> 大写的标签名 (LI / ul / DIV)
  • 属性节点 -> 属性名
  • 文本节点 -> #text

      console.log('元素节点: ', eleNode.nodeName)
      console.log('属性节点: ', attrNode.nodeName)
      console.log('文本节点: ', textNode.nodeName)
  

• 3.nodeValue 节点的值
  • 元素节点 -> 没有nodeValue 会输出null
  • 属性节点 -> 对应的属性值
  • 文本节点 -> 对应的文本内容

      console.log('元素节点: ', eleNode.nodeValue)
      console.log('属性节点: ', attrNode.nodeValue)
      console.log('文本节点: ', textNode.nodeValue)
  

七.操作DOM节点

• 意义:增删改查
• 分类:
  • 1.向页面增加一个节点
    • 想要向页面增加一个节点 首先创建一个节点

    语法:document.createElement('要创建的标签名')

  • 2.删除页面某一个节点
  • 3.修改某一页面的节点
  • 4.获取某一页面的节点

1.向页面增加一个节点

• 1.1首先创建一个元素节点

    var oDiv = document.createElement('div')
    // 给 oDiv 直接赋值文本
    oDiv.innerText = '我是通过 innerText 直接赋值的字符串'

• 1.2获取元素

        <div class="box">
            <p>我是通过HTML 手写出来的p标签</p>
        </div>
        var myDiv = document.getElementsByClassName('box')[0] // 获取元素

• 1.3语法
  • 语法1:元素.appendChild(要添加的节点)
  • 作用:向元素的末尾追加一个节点
    • 1.1 元素.appendChild(要添加的节点)

        myDiv.appendChild(oDiv)
    

  • 语法2.元素.insertBefore(要插入的节点,插入到那个节点的前面)
  • 注意:
    • 1.两个参数都是必填项
    • 2.第二个参数传递正常节点时,代表插入到这个节点的前面 第二个参数传递的是nuLl 时，表示插入到"元素”的末尾
    • 1.2 元素.insertBefore(要插入的节点,插入到那个节点的前面)

        myDiv.insertBefore(oDiv,oP) // 将我们通过Js 创建的div标签，插入到页面的Р标签前边
        myDiv.insertBefore(oDiv,null) // 第二个参数传递null 代表插入到‘元素’的末尾
    

2.删除页面某一个节点

    <div class="box">
        <p>我是p1标签</p>
        <p>我是p2标签</p>
    </div>

• 2.1 获取节点

    var box = document.querySelector('.box')    // 获取 div 的节点
    var oP = document.querySelector('P')        // 获取第一个 p 标签的节点

• 2.2 语法
  • 语法1: 父节点.removeChild(要删除的子节点)

      box.removeChild(oP) // 删除 div 里第一个 p 标签
  

  • 语法2. 节点.remove()

      oP.remove()     // 删除第一个 p 标签
      box.remove()    // 删除整个 div 和里边的 p 标签
  

3.修改某一页面的节点

    <div class="box">
        <p>我是p1标签</p>
        <p>我是p2标签</p>
    </div>

• 3.1 获取节点

    var box = document.querySelector('.box')    // 获取 div 的节点
    var oP = document.querySelector('P')        // 获取第一个 p 标签的节点

• 3.2 语法
  • 语法: 父节点,replaceChild('新节点','要被修改的节点')

      var oSpan = document.createElement('span') // 先创建一个节点
      oSpan.innerText = '我是通过 js 创建出来的span标签' // 给span标签添加文字
      box.replaceChild(oSpan,oP)  // 用创建出来的span标签,替换原本的第一个p标签
  

  • 作用:将页面中的某一节点做一个替换

4.获取某一页面的节点(其中一种方法)

 var box = document.querySelector('.box')    // 获取 div 的节点

5.克隆一个节点 ()

• 5.1 获取节点

    var box = document.querySelector('.box')    // 获取 div 的节点
    var oP = document.querySelector('P')        // 获取第一个 p 标签的节点

• 5.2 语法
  • 语法: 节点.cloneNode(参数)

    参数:默认是 false,表示不克隆后代节点 / 选填 true , 表示克隆后代节点

      var clonep = oP.cloneNode() //克隆出来一个和第一个 p 标签的节点一摸一样的新节点     不包含后代节点
      var clonep = oP.cloneNode(true) //克隆出来一个和第一个 p 标签一摸一样的新节点     包含后代节点
      box.appendChild(clonep)