高级程序设计(第3版)第十章DOM/笔记

DOM

节点层次

Node类型

• NodeList 是一种类数组 对象，用于保存一组有序的节点，可以通过位置来访问这些节点。
• 基于 DOM结构动态执行查询的结果，因此 DOM结构的变化能够自动反映 在 NodeList 对象中
• 以将 NodeList 对象转换为数组

• var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

• 每个节点都有一个 parentNode 属性
• 操作节点

• appendChild()
• insertBefore()
• replaceChild()

• 替换：接受的两个参数是：要插入的节点和要替换的节点。
• 移除：接受一个参数，即要移除的节点。

• cloneNode()

• 接受一个布尔值参数，表示是否执行深复制（true）。
• 复制后返回的节点副本属于文档所有，但并没有为它指定父节点。
• 可通过 appendChild()、insertBefore()或 replaceChild()将它添加到文档中

 

Document类型

documentElement属性，该属性始终指向 HTML 页面中的 元素。

var html = document.documentElement; //取得对的引用 alert(html === document.childNodes[0]); //true alert(html === document.firstChild); //true  var body = document.body; //取得对的引用

与对网页的请求有关的属性

• URL 属性中包含页面完整的 URL（即地址栏中显示的 URL）
• domain 属性中只包含页面的域名
• referrer属性中则保存着链接到当前页面的那个页面的 URL。

• 在没有来源页面的情况下， referrer 属性中可能会包含空字符串。

HTMLCollection 对象

• getElementById()
• getElementsByTagName()
• namedItem()
• getElementsByName()

• 常使用情况是取得须具有相同的 name 特性单选按钮

特殊集合

• document.images，包含文档中所有的元素，
• document.links，包含文档中所有带 href 特性的元素

 

Element类型

操作特性的 DOM方法

• getAttribute()
• setAttribute()
• removeAttribute() 。

div.getAttribute("id")); alert(div.getAttribute("class")); alert(div.getAttribute("title"));  取得自定义特性 <div id="myDiv" my_special_attribute="hello!"></div> <div id="myDiv" align="left" my_special_attribute="hello!"></div>  div.setAttribute("class", "ft"); div.removeAttribute("class");

attributes 属性

遍历元素的特性

document.createElement()

 

Text 类型

分割文本节点

splitText()    

var element = document.createElement("div"); element.className = "message"; var textNode = document.createTextNode("Hello world!"); element.appendChild(textNode); document.body.appendChild(element); var newNode = element.firstChild.splitText(5); alert(element.firstChild.nodeValue); //"Hello" alert(newNode.nodeValue); //" world!"

 

小结

NodeList 对象都是“动态的”，即每次访问 NodeList 对象，都会运行一次查询。所以要尽量减少 DOM操作。