DOM

1、获取属性值

element.getAttribute(‘属性值’);
element.属性

2、移除属性

element.removerAttribute(’ 属性’);

3、设置属性值

element.属性=‘值’
element.setAttribute(‘属性’,‘值’)

4、节点操作

节点包括：元素节点 文本节点 属性节点

父节点

node.parentNode 最近的父节点

子节点

parentNode.childNodes 包含元素以及文本节点
parentNode.children 包含元素节点
parentNode.firstElementChild 第一个子元素节点
parentNode.lastElementChild 最后一个子元素节点
parentNode.children[0] 第1个子元素节点

兄弟节点

node.nextSibling
node.previousSibling

1）创建节点

document.createElement(’’)

2）添加节点

node.appendChild(child)
node.insertBefore(child,指定元素）

3）删除节点

node.removeChild(child)

4) 复制节点

node.cloneNode() 默认为false，只复制标签，不复制内容
node.cloneNode(true) 复制标签和内容

三种动态创建元素区别
document. write ()
element . innerHTML
document . createElement ( )

1. document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
2. innerHTML 是将内容写入某个DOM 节点,不会导致页面全部重绘
3. innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
4. createElement ()创建多个元素效率稍低-点点,但是结构更清晰
   总结:不同浏览器下, innerHTML效率要比createElement 高