Node类型(P248)
JS中所有节点类型都继承自Node类型,所有节点类型都共享着相同的基本属性和方法,每个节点都有一个nodeType属性,用以表明节点的类型
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); //通过比较上面的常量,可以确定节点的类型 if(someNode.nodeType==1){ //适用于所有浏览器 alert("Node is an element."); }
nodeName和nodeValue属性
利用nodeName和nodeValue属性可以了解节点的具体信息,对元素节点来说,nodeName保存的始终是元素的标签名,而nodeValue的值始终为null
节点关系(P249)
//每个节点都有一个childNodes属性,里面保存着一个NodeList对象(类数组对象),用于保存一组有序的节点 //访问保存在NodeList对象中节点的方法: var firstChild=someNode.childNodes[0]; var secondChild=someNode.childNodes.item(1); var count=someNode.childNodes.lenght; //将NodeList对象转换为数组 function convertYoArray(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<len;i++){ array.push(nodes[i]); } } return array; } //访问同胞节点 通过使用列表中每个节点的previouSibling和nextSibling属性,可以访问同胞节点: //列表中的第一个节点的previousSibling属性值和最后一个节点的nextSibling属性值都为null if(someNode.nextSibling===null){ alert("Last node in the parent's childNodes list."); }else if(somenode.previousSibling===null){ alert("First node in the parent's childNodeslist."); } //someNode.firstChild和someNode.lastChild
操作节点(P251)
appendChild() //向childNodes列表的末尾添加一个节点 insertbefore() //向childNodes列表的某个位置添加一个节点 replaceChild() //将childNodes列表的某个位置的节点替换掉 removeChild() //将childNodes列表的某个位置的节点移除 //注:文档仍有被移除和被替换的节点,只是相应的节点在文档中没有位置了 cloneNode(true) //深复制,复制节点及其整个子节点树 cloneNode(false) //浅复制,复制的节点属文档所有,但没有指定的父节点,是个孤儿 normalize() //处理节点的后代节点中的文本节点
Document类型(P253)
Document节点特性:
nodeType的值为9; nodeName的值为"#document"; nodeValue的值为null; parentNode的值为null; ownerDocument的值为null; 其子节点可能是一个DocumentType(<=1)、Element(<=1)、ProcessingInstruction或Comment.
文档的子节点(P254)
document.documentElement //表示的是document的<html>子节点 document.body //表示的是document的<body>子节点 document.doctype //取得对<!DOCTYPE>的引用
文档信息(P255)
document.title //文档标题 document.URL //完整的URL document.domain //域名 document.referrer //来源页面的URL
查找元素(P256)
document.getElementById(); //如果文档中有多个相同的id,则只返回第一次出现的元素 document.getElementByTagName(); //有多少就包含多少 document.getElementByTagName("*"); //取得所有所有元素 document.getElementsByName(); //只有HTMLDocument类型才会有的方法,返回带有给定name特性的所有元素
特殊集合
document.anchors //包含文档中所有带name特性的<a>元素 document.forms //包含文档中所有<form>元素 document.images //包含文档中所有的<img>元素 document.links //包含文档中所有带href特性的<a>元素
DOM一致性检测(P259)
var hasXmlDom=document.implementation.hasFeature("XML","1.0");
文档写入(p259)
write()、writeln()、open()和close()
Element类型(P261)
Element节点的特征:
nodeType的值为1; nodeName的值为元素的标签名; nodeValue的值为null; parentNode可能是Document或Element; //要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性
HTML元素
getAttribute() //取得特性 setAttribute() //设置属性 removeAttribute() //删除元素属性
attributes属性(P266)
getNameItem(name) //返回nodeName属性等于name的节点 removeNamedItem(name) //从列表中移除nodeName属性等于name的节点 setNamedItem(node) //向列表中添加节点,以节点的nodeName属性为索引 item(pos) //返回位于数字pos位置处的节点 //取得元素id特性 var id=element.attributes.getNamedItem("id").nodeValue; var id=element.attributes.["id"].nodeValue;
创建元素(P268)
document.createElement() //创建新元素
Text类型(P270)
Text节点的特征:
nodeType的值为3; nodeName的值为”#test“; nodeValue的值为节点所包含的文本; parentNode是一个Element; 不支持子节点; //nodeValue属性和data属性都可以访问Text节点的文本,且包含的值相同 appendData(text):将text添加到节点的末尾 deleteData(offset,count):从offset指定的位置开始删除count个字符 insertData(offset,text):从offset指定的位置插入text replaceData(offset,count,text):用text替换从offset指定的位置开始到offset+count位置处的字符串 splitText(offset):从offset指定的位置将当前文本节点分成两个文本节点 substringData(offset,count):提取从offset指定的位置开始到offset+count为止处的字符串
创建文本节点(P271)
document.createTextNode() //创建新文本节点
规范化文本节点(P272)
//相邻个同胞文本节点很容易导致混乱,将相邻文本节点合并是一个解决的方法 //在拥有两个相邻文本节点的父元素上调用mormalize(),可以将所有文本节点合并成一个节点
分割文本节点(P273)
splitText()
Comment类型(P273)
Comment节点的特性
nodeType的值为8; nodeName的值为"#comment"; nodeValue的值是注释的内容 parentNode可能是Document或Element; 不支持子节点 Comment类型与Text类型继承自相同的基类,除splitText()之外的所有字符串操作方法都一样
- CDATASection类型(略)
- DocumentType类型(略)
DocumentFragment类型(略)
Attr类型(特性节点P276)
Attr节点的特性
nodeType的值为11; nodeName的值是特性的名称; nodeValue的值是特性的值; parentNode的值为null; 在HTML中不支持子节点;
使用document.createAttribute()
//使用document.createAttribute()并传入特性的名称可以创建新的特性节点 var attr=document.createAttribute("align"); attr.value="left"; element.setAttributeNode(attr);
DOM操作结束(P277)
动态脚本(P277)
动态样式(P279)操作表格(P281)
为了方便建构表格,HTML DOM还为<table>、<tbody>和<tr>元素添加了一些属性和方法
使用NodeList
Nodelist、NamedNodeMap以及HTMLCollection三个集合都是实时动态的
//下面的代码会导致无限循环
var divs=document.getElementsByTagName("div"),i,div;
for(i=0;i<divs.length;i++){
div=document.createElement("div");
document.body.appendChild(div);
}
//下面的代码不再会导致无限循环
var divs=document.getElementsByTagName("div"),i,len,div;
for(i=0 len=divs.length;i<len;i++){
div=document.createElement("div");
document.body.appendChild(div);
}