Dom

本课程目的:

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

查询或选取单独的元素

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

上一节：History 对象