Dom

本课程目的:

1. 如何在文档中查询或选取单独的元素
2. 如何将文档作为节点来遍历,如何找到任何元素的祖先,兄弟和后代元素
3. 如何查询和设置文档属性
4. 如何查询,设置和修改文档内容
5. 如何通过创建,插入和删除节点来修改文档结构

---

查询或选取单独的元素

            // 通过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

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

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

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

改变 HTML 样式

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

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

             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”;