DOM

查询或选取单独的元素

1 2 3 4 5 6

// 通过Id查找元素 var xxx = document.getElementById("xxx");； // 通过标签名查找元素集合 var spans = document.getElementsByTagName("span"); // 通过样式名查找元素集合，在IE9+有效 var sels = document.getElementsByClassName("sel");

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

querySelector()

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

1 2 3 4 5 6 7 8

// 取得 body 元素 var body = doucument.querySelector("body"); // 取得 Id 为"myDiv"的元素 var myDiv = doucument.querySelector("#myDiv"); // 取得类为"selected"的第一个元素 var selected = doucument.querySelector(".selected"); // 取得类为"button"的第一个图像元素 var img = doucument.querySelector("img.button");

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) 完全删除属性

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

1	document.getElementById("p1").innerHTML="New text!";

改变 HTML 样式

1	document.getElementById("p2").style.color="blue";

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

1 2 3 4 5

e.style.fontSize = "14px"; e.style.fontWeight = "bold"; e.style.color = "blue"; e.style.left = "300";   // 错误的写法 e.style.left = "300px";

创建,插入和删除节点

创建节点

• 创建新的元素节点：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”;