DOM基础
第六章DOM基础
一、使用DOM
1.获取html对象
nodeName\nodeValue\nodeType\ownerDocument\firstChild\lastChild\childNodes\
previousSibling\nextSiling\hasChildNodes\attributes\appendChild\removeChild
replaceChild\insertChild
node接口定义的不同的节点类型常量（数字表示相应的类型）
1=Node.ELEMENT_NODE
2=Node.ATTRIBUTE_NODE
3=Node.TEXT_NODE
4=Node.CDATA_SECTION_NODE
5=Node.ENTITY_REFERENCE_NODE
6=Node.ENTIRY_NODE
7=Node.PROCESSING_INSTRUCTION_NODE
8=Node.COMMENT_NODE
9=Node.DOCUMENT_NODE
10=Node.DOCUMENT_TYPE_NODE
11=Node.DOCUMENT_FRAGMENT_NODE
12=Node.NOTATION_NODE
varoHtml=document.documentElement;
//获取子节点
oHtml.childNodes.item(0)或者oHtml.childNodes[index]
o.attributes.getNamedItem(name)返回nodeName等于name的节点
o.attributes.removeNamedItem(name)删除nodeName等于name的节点
o.attributes.setNamedItem(node)将node插入到节点中，按nodeName属性进行索引
o.attributes.item(pos)获取pos位置节点
o.getAttribute(name)
o.setAttribute(name,newvalue)
o.removeAttribute(name)
getElementsByTagName()
getElementsByName()
getElementById
2.创建和操作节点
createElement()\createTextNode()\appendChild()
functioncreateElement(){
varoP=document.createElement("input");
varoText=document.createTextNode("value");
oP.appendChild(oText);
document.body.appendChild(oP);
}
removeChild()\replaceChild\insertBefore()
createDocumentFragment()创建一个文档碎片，把所有新节点附加其上，然后把文档碎片的内容一次性添加到document中。
functioncreateElement(){
vararrText=["first","second","third"];
varoFragment=document.createDocumentFragment();
for(vari=0;i<arrText.length;i++){
varoP=document.createElement("p");
varoText=document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}
3.HTMLDOM特征功能
eg：<imgclass="abc"src="abc.jpg"border="0"/>
oImg=document.getElementsByTagName("img");
oImg.getAttribute("src")=oImg.src;
oImg.setAttribute("src","a.jpg")=(oImg.src="a.jpg")
但是对于class属性要这样获取oImg.className
HTMLDOM给<table/>/<tbody>/<tr/>添加的新特性和方法
给<table/>元素添加了以下内容
caption-指向<caption/>元素
tBodies-<tbody/>元素集合
tFoot-指向<tfoot/>元素
tHead-指向<thead/>元素
rows-表格中所有行的集合
createTHead-创建<thead/>元素并将其放入表格
createTFoot-创建<tfoot/>元素并将其放入表格
createCaption-创建<caption/>元素并将其放入表格
deleteTHead-删除<thead/>元素
deleteTFoot-删除<tfoot/>元素
deleteCaption-删除<caption/>元素
deleteRow(position)-删除指定位置上的行
insertRow(position)-在指定位置插入行
<tbody/>元素添加了以下内容
rows-<tbody>中所有行的集合
deleteRow(position)-删除指定位置上的行
insertRow(position)-在指定位置插入行
<tr/>元素添加了以下内容
cells-<tr/>元素所有单元格集合
deleteCell(position)-删除给定位置上单元格
insertCell(position)-在指定位置插入一个新的单元格
//创建表格
varoTable=document.createElement("table");
oTable.setAttribute("border","1");
oTable.setAttribute("width","100%");
//createthetbody
varoTbody=document.createElement("tbody");
oTable.appendChild(oTbody);
//createthefirstrow
oTbody.insertRow(0);
oTbody.rows[0].insertCell(0);
oTbody.rows[0].cells[0].appendChild(document.createTextNode("Cell1,1"));
oTbody.rows[0].insertCell(1);
oTbody.rows[0].cells[1].appendChild(document.createTextNode("Cell2,1"));
//createthesecondrow
oTbody.insertRow(1);
oTbody.rows[1].insertCell(0);
oTbody.rows[1].cells[0].appendChild(document.createTextNode("Cell1,2"));
oTbody.rows[1].insertCell(1);
oTbody.rows[1].cells[1].appendChild(document.createTextNode("Cell2,2"));
//addthetabletothedocumentbody
document.body.appendChild(oTable);
遍历DOM------NodeIterator
NodeIterator还有nextNode()\previousNode()方法
variterator=document.createNodeIterator(document,NodeFilter.SHOW_ALL,null,false)
eg:variterator=null;
functionmakeList(){
varoDiv=document.getElemenetById("div1");
varoFilter=newObject();
oFilter.acceptNode=function(oNode){//此方法用于过滤掉标签为p的节点
return(oNode.tagName=="p")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT;
}
iterator=document.createNodeIterator(oDiv,NodeFilter.SHOW_ALL,null,false);
while(iterator.nextNode()){
......
}
}
遍历DOM------TreeWalker
TreeWalker还有nextNode()\previousNode()\parentNode()\firstNode()\lastNode()\nestSibling()\previousSibling()方法
variterator=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,false)
eg:variterator=null;
functionmakeList(){
varoDiv=document.getElemenetById("div1");
varoFilter=newObject();
oFilter.acceptNode=function(oNode){//此方法用于过滤掉标签为p的节点
return(oNode.tagName=="p")?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT;
}
iterator=document.createTreeWalker(oDiv,NodeFilter.SHOW_ALL,null,false);
while(iterator.nextNode()){
......
}
}