DOM

查询或选取单独的元素

ECMAScript5新增了 querySelector() 和 querySelectorAll() 两个函数，这两个函数都是通过Css选择符查找元素：支持的浏览器有IE8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+

querySelector()

querySelector() 返回第一个匹配元素 若无则返回null

querySelectorAll()

querySelectorAll()与querySelector()接收参数一样，不同的是querySelectorAll()返回的是NodeList的实例

遍历节点, 查找节点的祖先,兄弟和后代元素

• parentNode 返回元素的父节点
• childNodes 返回元素的子节点的NodeList
• firstChild/lastChild 返回元素的首个子节点/最后一个子节点
• nextSibling/previoursSibling 返回元素之后紧跟的节点/之前紧随的节点
• nodeType 返回节点的类型
• nodeValue 返回节点的值
• nodeName 返回节点名称

查询和设置文档属性

• createAttribute() 创建属性节点
• getAttribute(name) 返回属性值, 该值是字符串型, 而不是数值、布尔值或对象
• setAttribute(name,value) 设置属性值
• hasAttribute(name) 检测是否还有属性, 返回布尔值
• removeAttribute(name) 完全删除属性

查询，设置和修改文档内容

改变 HTML 样式

JS中style属性用驼峰方式编写 (所有定位的属性都必须包含单位)

创建,插入和删除节点

创建节点

• 创建新的元素节点：createElement()
• 创建新的属性节点: createAttribute() 或者 setAttribute(name,value)
• 创建文本节点: createTextNode()

插入节点

• 添加节点: appendChild() 向已存在的节点添加子节点
• 插入节点: insertBefore() 在指定的子节点之前插入节点
• 添加新属性: setAttribute(name,value)
• 添加文本节点: insertData(offset,string) 在已有的文本节点的offset处插入中数据string

删除和替换节点

• 删除节点: removeChild(name) 删除指定的节点(其子节点也被删除)
• 删除属性节点: removeAttribute(name) / removeAttributeNode(node)
• 替换元素节点: replaceChild()
• 替换文本节点的数据: replaceData(offset,length,string) 从offset处开始替换字符, 要替换的字符长度length, 替换字符串string 或者直接使用nodeValue属性直接替换文本节点的数据 : X.nodeValue = “xxxx”;

DOM

原文：http://www.cnblogs.com/ldlx-mars/p/6827553.html