JavaScript高级程序设计 DOM学习笔记_javascript技巧
- WBOY原创
- 2016-05-16 18:02:25955浏览
第十章 DOM
DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。
1. 节点层次
1) 文档节点：document，每个文档的根节点。
2) 文档元素：即元素，文档最外层元素，文档节点第一个子节点。
3) Node类型：
①Node是DOM中各种节点类型的基类型，共享相同的基本属性和方法。
□ Node.Element_NODE(1);
□ Node.ATTRIBUTE_NODE(2);
□ Node.TEXT_NODE(3);
□ Node.CDATA_SECTION_NODE(4);
□ Node.ENTITY_REFERENCE_NODE(5);
□ Node.ENTITY_NODE(6);
□ Node.PROCESSING_INSTRUCTION_NODE(7);
□ Node.COMMENT_NODE(8);
□ Node.DOCUMENT_NODE(9);
□ Node.DOCUMENT_TYPE_NODE(10);
□ Node.DOCUMENT_FRAGMENT_NODE(11);
□ Node.NOTATION_NODE(12);
每种节点的nodeType属性返回上述类型之一，为一常量。
通过节点nodeType属性与数字值比较，可得节点类型。
②nodeName和nodeVlue属性。
③每个节点的子节点信息保存在childNodes属性中，childNodes属性中保存一个NodeList对象。
□ NodeList对象，类数组对象，有length属性，但非Array的实例。
□ 访问NodeList中的节点，可以通过方括号，也可以使用item()方法。
var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ 将NodeList转为数组对象。
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //非IE
}catch(ex){
array = new Array();
for(var i = 0,len = nodes.length; i array.push(nodes[i]);
}
}
return array;
}
④parentName属性：指向文档树中父节点。
⑤previousSibling属性和nextSibling属性：前一个/下一个同胞节点。
⑥firstChild属性和lastChild属性：前一个/后一个子节点。
⑦hasChildNodes()方法：含子节点返回true，反之返回false。
⑧appendChild()方法：向childNodes列表末尾添加一个子节点，返回新增节点。
⑨insertBefore()方法：两个参数：要插入的节点和作为参照的节点。返回新增节点。
⑩replaceChild()方法：两个参数：要插入的节点和要替换节点。返回新增节点。
⑾removeChild()方法：移除节点。
⑿cloneNode()方法：接受一个布尔值。true为深复制，复制节点及子节点。false为浅复制，仅复制本身节点。
⒀nomalize()方法：处理文档树中文本节点。
4) Document类型（针对document对象）
①Document类型表示文档，是HTMLDocument类型的一个实例，表示整个HTML页面。document对象是window对象的一个属性，可作全局对象访问。
②documentElement属性；该属性始终指向HTML页面中的元素。
③body属性；直接指向
④doctype属性：访问，各浏览器支持不一致。用处有限。
⑤title属性：可获得和设置title的文本。
⑥URL属性：地址栏中的URL。
⑦domain属性：页面的域名（可设置，有限制）
⑧referrer属性：保存链接到当前页面的那个页面的URL
⑨getElementById()方法：传入元素的ID，返回元素节点。
⑩getElementsByTagName()方法：传入元素名，返回NodeList。
□ 在HTML中返回一个HTMLCollection对象，与NodeList类似。
□ 访问HTMLCollection对象：方括号语法，item()方法，namedItem()方法，HTMLCollection对象还可通过元素的name特性取得集合中的项。
⑾getElementsByName()方法：返回带有给定name特性的所有元素。
⑿特殊集合，这些集合都是HTMLCollection对象。
□ document.anchors:包含文档中所有带name特性的元素。
□ document.applets:包含文档中所有的