认识结点

节点: 一个小小的组成部分

​ 我们的页面就是由若干个节点组成

​ 常见的 DOM 节点:

1. ​ 元素节点 特指页面上的所有标签
2. ​ 属性节点 书写在标签身上的属性(原生属性 和 自定义属性)
3. ​ => 属性节点不作为独立节点出现, 只是用来修饰标签使用的
4. ​ 文本节点 所有的文本内容(包含换行和空格)
5. ​ 注释节点 所有的注释内容(包含换行和空格)

获取节点

第一类: 获取元素节点

1. 获取非常规元素节点

   html: document.documentElement
   head: document.head
   body: document.body
   

2. 获取常规元素节点

   document.getElementById()
   document.getElementsByClassName()
   document.getElementsByTagName()
   document.querySelector()document.querySelector
   All()
   
   

第二类: 获取节点(包括但不限于元素节点)

注意: 全都是属性, 没有方法

1. childNodes

   语法: 父节点.childNodes

   得到: 该父节点下的所有子一级节点

    var ele = document.querySelector('div')
   // 1. childNodes
    console.log(ele.childNodes)
   

2. children

   语法: 父节点.chidlren

   得到: 该父节点下的所有子一级元素节点

3. firstChild

   语法: 父节点.firstChild

   得到: 该父节点下的第一个子节点

4. firstElementChild

语法: 父节点.firstElementChild

得到: 该父节点下的第一个字元素节点

5. lastChild

语法: 父节点.lastChild

得到: 该父节点下的最后一个子节点\

6. lastElementChild

   语法: 父节点.lastElementChild

   得到: 该父节点下的最后一个字元素节点

7. previousSibling

语法: 节点.previousSibling

得到: 该节点的上一个兄弟节点(上一个哥哥节点)

8. previouesElementSibling

   语法: 节点.previouesElementSibling

   得到: 该节点的上一个兄弟元素节点(上一个哥哥元素)

9. nextSibling

语法: 节点.nextSibling

得到: 该节点的下一个兄弟节点(下一个弟弟节点)

10. nextElementSibling

    语法: 节点.nextElementSibling

    得到: 该节点的下一个兄弟元素节点(下一个弟弟元素)

11. parentNode

    语法: 节点.parentNode

    得到: 该节点的父节点

12. parentElement

    语法: 节点.parentElement

    得到: 该节点的父元素节点

13. attributes

    语法: 节点.attributes

    得到: 该节点的所有属性节点

// 3. firstChild
    console.log(ele.firstChild)
    // 4. firstElementChild
    console.log(ele.firstElementChild)
    // 5. lastChild
    console.log(ele.lastChild)
    // 6. lastElementChild
    console.log(ele.lastElementChild)

    // 7. previousSibling
    console.log(ele.previousSibling)
    // 8. previouesElementSibling
    console.log(ele.previousElementSibling)
    // 9. nextSibling
    console.log(ele.nextSibling)
    // 10. nextElementSibling
    console.log(ele.nextElementSibling)

    // 11. parentNode
    console.log(ele.parentNode.parentNode.parentNode)
    // 12. parentElement
    console.log(ele.parentElement.parentElement.parentElement)

    // 13. attributes
    console.log(ele.attributes)

创建节点

指用 js 创建出一个节点, 但是没有插入到页面

1. 创建元素节点

• ​ + 语法: document.createElement(‘标签名’)
• ​ + 返回值: 一个被创建出来的标签
• ​ + 注意: 你可以自定义标签名

2. 创建文本节点

• ​ + 语法: document.createTextNode(‘文本内容’)
• ​ + 返回值: 一个文本节点

 // 1. 创建元素节点
    var createEle = document.createElement('div')
    console.log(createEle)

    // 2. 创建文本节点
    var createText = document.createTextNode('我是一个文本节点')
    console.log(createText)

插入节点

指把一个节点放在另一个节点内当做子节点使用

1. appendChild()

• ​ + 语法: 父节点.appendChild(子节点)
• ​ + 作用: 把子节点插入到父节点内部, 并且排列在最后一个的位置

2. insertBefore()

• ​ + 语法: 父节点.insertBefore(要插入的子节点, 谁的前面)

// 0. 获取元素
    var pageDiv = document.querySelector('div')
    var pageP = document.querySelector('p')

    // 0. 创建几个节点
    var creDiv = document.createElement('div')
    var creSpan = document.createElement('guoxiang')
    var creText = document.createTextNode('我是一段文本节点')


    // 1. appendChild()
    creDiv.appendChild(creSpan)
    creSpan.appendChild(creText)

    // 2. insertBeofre()
    // 需求: 把 creDiv 插入到 pageDiv 内部并且排列在 p 的前面
    pageDiv.insertBefore(creDiv, pageP)
    pageDiv.appendChild(creDiv)

删除节点

指把某一个节点从本身位置删除

1. removeChild()

• ​ + 语法: 父节点.removeChild(子节点)
• ​ + 作用: 把子节点从父节点内移除

2. remove()

• ​ + 语法: 节点.remove()
• ​ + 作用: 把该节点自己干掉(自杀)

    // 0. 获取元素
    var pageDiv = document.querySelector('div')
    var pageSpan = document.querySelector('span')

    // 1. removeChild()
    pageDiv.removeChild(pageSpan)

    // 2. remove()
    pageDiv.remove()

替换节点

1. replaceChild()

• ​ + 语法: 父节点.replaceChild(换上节点, 换下节点)
• ​ + 作用: 在父节点内使用 换上节点 替换掉 换下节点

  // 0. 获取元素
    var ulBox = document.querySelector('ul')
    var pageSpan = document.querySelector('span')

    // 0. 创建一个节点
    var creP = document.createElement('p')
    creP.innerHTML = '你好 世界 hello world'

    // 1. 替换节点
    ulBox.replaceChild(creP, pageSpan)

克隆节点

把某一个节点复制一份一模一样的出来

1. cloneNode()

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

  ​ => 参数默认是 false: 不克隆后代节点

  ​ => 参数选填是 true: 克隆后代节点

• ​ + 作用: 把该节点复制一份一模一样的出来

// 0. 获取元素
    var ele = document.querySelector('div')
    console.log(ele)

    // 1. cloneNode()
    // var cloneDiv = ele.cloneNode()
    var cloneDiv = ele.cloneNode(true)
    console.log(cloneDiv)