节点的认识

1.获取节点

+ childNodes

+ children

+ firstChild

+ firstElementChild

+ lastChild

+ lastElementChild

+ previousSibling

+ previousElementSibling

+ nextSibling

+ nextElementSibling

+ parentNode

+ parentElement

+ attributes

2. 创建节点

+ document.createElement('标签名') 元素节点

+ document.createTextNode('文本') 文本节点

+ document.createDocumentFragment() 文档碎片 "筐"

3. 插入节点

+ 父节点.appendChild(子节点)

+ 父节点.insertBefore(要插入的子节点, 谁的前面)

4. 删除节点

+ 父节点.removeChild(子节点)

+ 节点.remove()

5. 替换节点

+ 父节点.replaceChild(换上节点, 换下节点)

6. 克隆节点

+ 节点.cloneNode(参数)

=> 参数默认是 false, 表示不克隆子节点

=> 参数选填是 true, 表示克隆子节点

                                什么是节点

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

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

+ 常见的 DOM 节点

1. 元素节点 特指页面上的所有标签

2. 属性节点 书写在标签身上的属性(原生属性 和 自定义属性)

=> 属性节点不作为独立节点出现, 只是用来修饰标签使用的

3. 文本节点 所有的文本内容(包含换行和空格)

4. 注释节点 所有的注释内容(包含换行和空格)

节点操作

+ 对于页面上标签的操作

1. 获取节点

+ childNodes

+ children

+ firstChild

+ firstElementChile

+ lastChild

+ lastElementChild

+ previousSibling

+ previousElementSibling

+ nextSibling

+ nextElementSibling

+ parentNode

+ parentElement

+ attributes

2. 创建节点

+ document.createElement()

+ document.createTextNode()

+ document.createDocumentFragment() 文档碎片 ("筐")

3. 插入节点

+ 父节点.appendChild(子节点)

+ 父节点.insertBeofre(要插入的子节点, 谁的前面)

4. 删除节点

+ 父节点.removeChild(子节点)

+ 节点.remove()

5. 替换节点

+ 父节点.replaceChild(换上节点, 换下节点)

6. 克隆节点

+ 节点.cloneNode(参数)

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

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

问题: div 这个节点内有多少子一级节点 ? 分别是什么 ?

1. 文本节点: 一个换行 + 四个空格 + hello + 一个换行 + 四个空格

2. 元素节点: span 标签

3. 文本节点: 一个换行 + 四个空格

4. 注释节点: 注释内容

5. 文本节点: 一个换行 + 四个空格

6. 元素节点: span 标签

7. 文本节点: 一个换行 + 四个空格 + world + 一个换行 + 两个空格

<div id="box" class="box">

hello

<span>你好</span>

<!-- 注释 -->

<span>世界</span>

world

</div>

                                        获取节点

+ 第一类: 获取元素节点

=> 获取非常规元素节点

-> html: document.documentElement

-> head: document.head

-> body: document.body

=> 获取常规元素节点

-> document.getElementById()

-> document.getElementsByClassName()

-> document.getElementsByTagName()

-> document.querySelector()

-> document.querySelectorAll()

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

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

 

1. childNodes

+ 语法: 父节点.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

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

var ele = document.querySelector('div')

// 1. childNodes

// console.log(ele.childNodes)

// 2. children

// console.log(ele.children)

// 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)

                                        节点属性

属性节点: 若干分类中的一种

节点属性: 指描述节点的信息

所有节点都共有的, 只是不同的节点值不一样

常见的节点属性有三种

1. nodeType

+ 用一个数字来区分不同的节点, 给每一类节点做了一个编号

+ 元素节点: 1

+ 属性节点: 2

+ 文本节点: 3

+ 注释节点: 8

2. nodeName

+ 元素节点: 大写标签名

+ 属性节点: 属性名

+ 文本节点: #text

+ 注释节点: #comment

3. nodeValue

+ 元素节点: null

+ 属性节点: 属性值

+ 文本节点: 文本内容(包含换行和空格)

+ 注释节点: 注释内容(包含换行和空格)

// 0. 获取各种节点

// 0-1. 获取元素节点

var ele = document.querySelector('div')

console.log(ele)

// 0-2. 获取属性节点

var attr = ele.attributes[0]

console.log(attr)

// 0-3. 获取文本节点

var text = ele.childNodes[2]

console.log(text)

// 0-4. 获取注释节点

var comment = ele.childNodes[1]

console.log(comment)
 

// 1. nodeType

console.log('nodeType')

console.log('元素节点 : ', ele.nodeType)

console.log('属性节点 : ', attr.nodeType)

console.log('文本节点 : ', text.nodeType)

console.log('注释节点 : ', comment.nodeType)

// 2. nodeName

console.log('nodeName')

console.log('元素节点 : ', ele.nodeName)

console.log('属性节点 : ', attr.nodeName)

console.log('文本节点 : ', text.nodeName)

console.log('注释节点 : ', comment.nodeName)

// 3. nodeValue

console.log('nodeValue')

console.log('元素节点 : ', ele.nodeValue)

console.log('属性节点 : ', attr.nodeValue)

console.log('文本节点 : ', text.nodeValue)

console.log('注释节点 : ', comment.nodeValue)

                                创建节点

+ 指用 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)