Heim > Artikel > Web-Frontend > JavaScript高级程序设计 DOM学习笔记_javascript技巧
第十章 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属性;直接指向