节点中常用的属性和方法

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)

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>')
 }

节点中常用的属性和方法

猜你喜欢