节点的一生+文档碎片

节点操作

+ 不光操作元素
+ 还要操作 注释节点 文本节点 属性节点
+ 获取节点(昨天: 获取元素节点)
=> 获取节点(包含但不限于元素节点)
+ 创建节点
=> 通过 JS 得语法来制造一个 标签 / 文本 / 注释 / ...
1. createElement()
2. createtextNode()
3. createComment()
4. createAttribute()
+ 插入节点
=> 把我创造得节点插入另一个节点中, 出现父子结构
1. appendChild()
2. insertBefore()
+ 删除节点
=> 把一个已经存在得节点移出
1. removeChild()
2. remove()
+ 替换节点
=> 我创造一个节点去替换一个已经存在得节点
1. replaceChild()
+ 克隆节点
=> 把一个已经存在得节点复制一份一模一样得
1. cloneNode()
-> 参数默认为 false, 不克隆后代节点
-> 选填 true, 克隆后代节点

创建节点

+ 使用 JS 的语法来创造一个节点出来

1. createElement()
+ 语法: document.createElement('标签名')
+ 返回值: 一个元素节点
2. createTextNode()
+ 语法: document.createTextNode('文本内容')
+ 返回值: 一个文本节点, 不是字符串
3. createComment()
+ 语法: document.createComment('注释内容')
+ 返回值: 一个注释节点
4. createAttribute()
+ 语法: document.createAttribute('属性名')
=> 添加属性值, 节点.value = '属性值'
+ 返回值: 一个属性节点

插入节点

+ 把一个节点插入到另一个节点里面

1. appendChild()
+ 语法: 父节点.appendChild(子节点)
+ 作用: 把子节点插入到父节点里面, 放在最后一个节点的位置

2. insertBefore()
+ 语法: 父节点.innserBefore(要插入的子节点, 哪一个子节点前面)
+ 作用: 把子节点插入到指定父节点的指定子节点前面

删除节点

+ 删除一个已经存在的节点
+ 可以再创建的节点里面删除, 也可以直接再页面元素里面删除

1. removeChild()
+ 语法: 父节点.removeChild(子节点)
+ 作用: 把子节点从父节点里面移出

2. remove()
+ 语法: 节点.remove()
+ 作用: 把自己移出父节点

替换节点:

+ 用一个节点替换一个已经存在的节点
+ 可以直接替换页面元素, 也可以替换我们自己创建的节点

1. replaceChild()
+ 语法: 父节点.replaceChild(新节点, 旧节点)
+ 作用: 再父节点下, 用新节点替换旧节点

克隆节点

+ 把某一个节点复制一份一摸一样出来

1. cloneNode()
=> 语法: 节点.cloneNode(参数)
-> 参数选填, 默认是 false, 不克隆后代节点
-> 我们可以选填 true 表示克隆所有后代节点
=> 返回值: 一个克隆好的节点

 

知识点: 文档碎片(筐)

+ 我们可以用 JS 创建一个 文档碎片 节点
+ 可以承载节点
+ 当你把筐向页面元素添加的时候
-> 筐是不会进入页面的, 是把筐里的内容倒进去
+ 语法: document.createDocumentFragment()
+ 返回值: 一个文档碎片节点

// 1. 提前创建一个文档碎片(筐)
var frg = document.createDocumentFragment()
// 把我所有准备好的内容都放在筐里
frg.appendChild(tr)
// 2. 一次性把 frg 放到 tbody 里面
   tbody.appendChild(frg)