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

var oHtml=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()

function createElement(){
var oP=document.createElement("input");
var oText=document.createTextNode("value");
oP.appendChild(oText);
document.body.appendChild(oP);
}

removeChild()\replaceChild\insertBefore()

createDocumentFragment()创建一个文档碎片，把所有新节点附加其上，然后把文档碎片的内容一次性添加到document中。
function createElement(){
var arrText=["first","second","third"];
var oFragment=document.createDocumentFragment();
for(var i=0;i<arrText.length;i++){
var oP=document.createElement("p");
var oText=document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}

3.HTML DOM 特征功能
eg： <img class="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

HTML DOM 给<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)-在指定位置插入一个新的单元格

//创建表格
var oTable=document.createElement("table");
oTable.setAttribute("border","1");
oTable.setAttribute("width","100%");

//create the tbody
var oTbody=document.createElement("tbody");
oTable.appendChild(oTbody);

//create the first row
oTbody.insertRow(0);
oTbody.rows[0].insertCell(0);
oTbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));
oTbody.rows[0].insertCell(1);
oTbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));

//create the second row
oTbody.insertRow(1);
oTbody.rows[1].insertCell(0);
oTbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));
oTbody.rows[1].insertCell(1);
oTbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));

//add the table to the document body
document.body.appendChild(oTable);

遍历DOM------NodeIterator
NodeIterator还有nextNode()\previousNode()方法

var iterator=document.createNodeIterator(document,NodeFilter.SHOW_ALL,null,false)
eg:var iterator=null;
function makeList(){
var oDiv=document.getElemenetById("div1");
var oFilter=new Object();
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()方法

var iterator=document.createTreeWalker(document,NodeFilter.SHOW_ALL,null,false)
eg:var iterator=null;
function makeList(){
var oDiv=document.getElemenetById("div1");
var oFilter=new Object();
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()){
......
}
}