初识DOM

初识DOM

一、 节点的获取、插入、创建、删除、替换、修改文本节点

获取

1.document.getElementById
2.(element)document.getElementsByTagName
3.(element)document.getElementsByClassName
4.通过关系获取（可维护性差）
.parentNode .firstChild .lastChild .previousSibling .nextSibling
.firstElementChild .lastElementChild .previousElementSibling .nextElementSibling

插入

1.parent.appendChild(child)
2.target.parentNode.insertBefore(newElement,targetElement)
(PS:使用innerHTML插入节点将存在安全问题，建议仅用于与用户交互无关的情景)

创建

1.document.createElement(nodeName)
2.document.createTextNode(text)

删除

1.parent.removeChild(target)

替换

1.parent.replaceChild(new,old)

修改文本节点

（可修改该节点及其后代的所有文本内容）

1.element.textContent，IE9不支持
2.element.innerText，FF浏览器不支持

二、 属性操作

1.属性访问器

.className .htmlFor .value .disabled ...
element["id"]

特点：通用性低-名字异常、扩展性差、获取到的值是对象
2.

object.getAttribute(attribute)
object.setAttribute(attribute,value)

特点：无名字异常，通用性好，获取到的值为字符串
3.自定义属性("data-xxx")

.dataset.xxx
PS:xxx获取，忽略连接符"-"，转为驼峰写法

三、 样式操作

1.标签内联样式

element.style.property="" (驼峰表示)
element.style.cssText="" (一条语句可完成所有样式，且不用驼峰表示)

2.更新class

element.className += " .new"

3.换肤

<link rel="stylesheet" type="text/css" href="xxx.css" id="style">
var style =document.getElementById("style");
style.href = "";

4.获取实际样式

window.getComputedStyle(element).property(IE9:element.currentStyle)