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>‘) }
原文地址:https://www.cnblogs.com/zhaodz/p/11619757.html