细说DOM节点

DOM节点

DOM节点一般是指的是标签，也有一个细的分类

元素节点(标签)：一般就是指我们所说的标签

文本节点：标签内部的文本就是我们的文本节点

属性节点：标签上书写的属性就是属性节点

一：获取节点

1：childNodes：获取标签上所有的子级节点

var box = document.querySelector('.box')   console.log(box.childNodes)

2：children： 获取标签的所有子级元素节点

var box = document.querySelector('.box') console.log(box.children)

3：firstChild：获取标签内第一个子级节点

       前面的省略 都是一样的没抄 console.log(box.firstChild)

4：lastChild：获取标签内最后一个子级节点

  console.log(box.lastChild)

5：firstElementChild：获取标签内第一个子级元素节点

console.log(box.firstElementChild)

6：lastElementChild：获取标签内最后一个子级的元素节点

  console.log(box.lastElementChild)

7：nextSibling：获取下一个兄弟节点

console.log(box.nextSibling)

8：previousSibling：获取上一个兄弟节点

console.log(box.previousSibling)

9：nextElementSibling：获取下一个兄弟元素节点

console.log(box.nextElementSibling)

10：previousElementSibling：获取上一个兄弟元素节点

console.log(box.previousElementSibling)

11：parentNode：获取当前标签的父级

 // 11. parentNode         // var box3 = document.querySelector('.box3')         // console.log(box3)         // console.log(box3.parentNode)         // console.log(box3.parentNode.parentNode)

12：attributes：获取当前标签所有属性节点

var aBox = document.querySelector('.a_box')         console.log(aBox)         console.log(aBox.attributes)

二：节点属性

1：元素节点

elNode

获取节点类型：

console.log('元素节点: ', elNode.nodeType)      // 1

获取节点名称

console.log('元素节点: ', elNode.nodeName)      // LI  一个大写的标签名

获取结点的值

console.log('元素节点: ', elNode.nodeValue)      // null

2：文本节点

textNode

获取节点类型：

console.log('文本节点: ', textNode.nodeType)    // 3

获取节点名称

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

获取结点的值

 console.log('文本节点: ', textNode.nodeValue)    // 文本的内容

3：属性节点

attrNode

获取节点类型：

console.log('属性节点: ', attrNode.nodeType)    // 2

获取节点名称

console.log('属性节点: ', attrNode.nodeName)    // 属性名

获取节点的值

 console.log('属性节点: ', attrNode.nodeValue)    // 属性值

 节点属性         */         var box = document.querySelector('ul')         // 1. 元素节点         var elNode = box.firstElementChild             // 2. 文本节点         var textNode = box.firstChild                 // 3. 属性节点         // var attrNode = box.attributes    // 当前写法是获取到元素的所有属性组成的一个伪数组, 然后存储到变量中         var attrNode = box.attributes[0] // 获取到元素的所有属性组成的伪数组中 下标[0] 的项, 此时获取到的实际的值是一个属性节点

三：操作DOM

1： 添加个DOM

appendchild ：添加一个标签

// 1. 创建一个 DOM      此时页面中没有当前标签         var myDiv = document.createElement('div')         // console.log(myDiv)         // 1.5 向刚才创建出来的 DOM 上 添加一些标识         myDiv.className = 'box_2'         myDiv.dataset.id = 'QF001'         myDiv.innerText = '我是通过 JS 创建的一个标签'         // 2. 将 DOM 添加到页面中去     第二步完成后, 标签就添加到页面中去了         var box = document.querySelector('.box')         // console.log(box)         //  添加到指定元素的 末尾         box.appendChild(myDiv)

2：指定元素插入位置

insertBefore （要添加的DOM，要放在哪个标签前面）（如果第二个传递的是null ，那么默认指定标签的末尾）

 

       
• 1
       
• 2
       
• 3
   

   

3 删除或修改元素

1：删除 ：变量.remove（） 直接删除指定元素

变量.removeChild（子级的变量名） 删除指定元素的子级，不会删除自己

 var myDiv = document.getElementsByTagName('div')[0]         myDiv.remove()   // 直接删除 指定元素         // myDiv.removeChild(myP)  // 删除指定元素的子级, 不会删除自己

2：修改 （替换）

createElement（’新的节点‘，’要被替换的节点‘）

 

var myDiv = document.getElementsByTagName('div')[0]         var myP = document.getElementsByTagName('p')[0] var mySp = document.createElement('span')         mySp.innerText = '我是通过 JS 创建出来的一个 span 标签'         // myDiv.replaceChild('新的节点', '要被替换的节点')         myDiv.replaceChild(mySp, myP)

4：克隆：

clonde：接受一个参数 ，默认为false

true ：克隆所有的后代节点

false：不克隆

 

       
• 你好~
   

   

   

            var cloneLi = myLi.cloneNode(true)         // console.log(cloneLi)    //

你好~

        // 2. 将新标签放在 myOl 中         myOl.appendChild(cloneLi)