标签：type document move 元素 one nod 节点 append script
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)
console.log (box.nextElementSibling)
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>‘) }
标签：type document move 元素 one nod 节点 append script
原文地址：https://www.cnblogs.com/zhaodz/p/11619757.html
