节点中常用的属性和方法

Posted 2022-12-17 zhaodz

1.节点类型的属性

（1）console.log()  浏览器的优化行为，当做标签打印在控制台上

（2）console.dir() 以对象的形式打印在控制台上

var box = document.getElementById(‘box‘)
    console.log(box)
    console.dir(box)

（3）元素.nodeType   返回节点的类型，标签节点是1

（4）元素.nodeName  返回节点的名称，大写的标签名

（5）元素.nodeValue  标签节点的Value  返回的是null

 var box = document.getElementById(‘box‘)
    console.log(box)
    console.dir(box.nodeType)  //1
    console.dir(box.nodeValue)  //null
    console.dir(box.nodeName)   //DIV

2.操作节点的层级的属性

（1）元素.childNodes  元素内的所有节点   返回一个伪数组 存储了所有的子节点

console.dir(box.childNodes)  //NodeList(7)

（2）元素.children  元素内的所有子元素（标签节点）   返回一个伪数组 存储了所有的子元素

console.dir(box.children)  //htmlCollection(3)

（3）元素.parentNode  返回父节点（父元素） 

console.log(box.parentNode)

（4）元素.nextElementSibling  返回下一个兄弟元素

console.log (box.nextElementSibling)

（5）元素.previousElementSibling  返回上一个兄弟元素

console.log(box.previousElementSibling)

（6）元素.firstElementChild/元素.lastElementChild  第一个子元素 和最后一个子元素

console.log(box.firstElementChild)

 console.log(box.lastElementChild)

 

3.操作节点的方法

（1）父节点.appendChild(子节点)    添加子节点，有剪切的效果

box.appendChild(p)

（2）父节点.insertBefore(要添加的子节点，参考的子节点)  有剪切效果

box.insertBefore(p,span)

（3）父节点.removeChild(子节点)  移除节点

 box.removeChild(info)

（4）父节点.replaceChild(替换的子节点,被替换的子节点)   有剪切效果

box.replaceChild(p,span)

（5）父节点.cloneNode(true/false)     克隆节点 不传，相当于传了一个false  只克隆节点本身 

 console.log( box.cloneNode())

 4.动态创建元素

（1）元素.innerHTML=html形式的字符串  可以识别标签  可以用来创建元素，并且渲染到页面上

 box.innerHTML=‘ <span>span内容</span>‘

（2）document.createElement(‘html形式的字符串‘)  专门用来创建元素，返回一个新的元素，但是这个元素不在dom树上

 var box = document.getElementById(‘box‘)
   var p= document.createElement(‘p‘)
    box.appendChild(p)v

（3）document.write(‘html形式的字符串‘)  直接写在script不会覆盖原来的内容，放在事件函数中会覆盖原来的内容

document.write(‘<h1>哈哈哈</h1>‘)

   var box = document.getElementById(‘box‘)
    var bt = document.getElementById(‘bt‘)
 bt.onclick=function()
  document.write(‘<h1>哈哈哈</h1>‘)