js的dom操作

dom操作之创建节点

• document.write() 直接将内容写入页面的内容流，但是文档流执行完毕，他才执他会覆盖页面。
• document.createElement()通过 创建节点，然后appendChild
• element.innerHTML 不会导致页面全部重绘，采用for循环叠加，但效率低。对于创建多个元素时候，如果innerHML采用数组拼接形式，然后转换为字符串的效率会比createElement的效率高一点。
  
  

dom操作之增加节点

• parent Node.appendChild() 给父元素添加子孩子，添加到末孩子位置
• parentNode.insertBefore() 添加到首孩子位置

dom操作之删除节点

• removeChild(child)

dom操作之修改元素内容，属性，表单的值等

• 修改普通元素内容：innerHTML,innerText
• 修改元素样式：style,className 驼峰命名
• 修改表单元素：valu，type,disabled等
• 修改元素属性：src,href,title等

dom操作之查找元素

• dom提供API方法:getElementById,getElementsByTagName等
• H5提供新方法：querySelector,querySelectAll
• 利用节点操作获取元素：父(parentNode),子（children），兄（previousElementSibling,nextElementSibling）

自定义属性操作

• 采用data-来识别自定义属性
• setAttribute:设置属性
• getAttribute:获得属性
• removeAttribute:移除属性