W3C規定的三類DOM標準接口
Core DOM（核心DOM），適用于各種結構化文檔
XML DOM，專用于XML文檔
HTML DOM，專用于HTML文檔
表格的操作
添加行和單元格
var _table=document.createElement("table");?? //創建表
table.insertRow(i);??????????????//在table的第i行插入行
row.insertCell(i);?????????????????//在row的第i個位置插入單元格
引用單元格對象
table.rows[i].cells[i];
刪除行和單元格
table.deleteRow(index);
row.deleteCell(index);
//節點
alert(oD.nodeType);//node(節點)? type（類型）? 元素節點的類型的值是 1
// alert(oD.getAttributeNode("id").nodeType);? //屬性節點類型的值 2
// alert(oS.firstChild.nodeType);? //文本節點類型的值 3
// alert(oD.nodeValue);//元素節點的值? null
// alert(oD.getAttributeNode("id").nodeValue);//屬性節點的值是屬性的值
alert(oS.firstChild.nodeValue);//文本節點的值是文本的內容
//屬性節點
var btn = document.getElementsByTagName("button");
var pic = document.getElementById("pic");
btn[0].onclick = function(){
// alert(pic.src); //HTML DOM
// alert(pic.getAttribute("src"))? //core DOM
// alert(pic.a)
// alert(pic.getAttribute("a"));//
// pic.src = "img/timg.gif";
// pic.setAttribute("src","img/timg.gif");
// pic.b = "hh";
pic.setAttribute("b","hh");
// HTML dom
// 元素對象.屬性名? ? 不能獲取或者設置自定義的屬性的值
//
// core DOM
// 元素對象.getAttribute("屬性名")? 可以獲取自定義的屬性的值
// 元素對象.setAttribute("屬性名","屬性值")? 可以設置自定義的屬性名和屬性值
層次間關系:
// 通過父親找孩子
// 父元素對象.firstChild? 單個
// 父元素對象.lastChild? 單個
// 父元素對象.childNodes? 多個? ? 通過下標訪問單個子元素
通過孩子找父親
子元素對象.parentNode? 單個
// 水平間的查找
// 往前查找:
// 元素對象.previousSibling? 元素對象的前一個節點? 單個
//
// 往后查找:
// 元素對象.nextSibling? ? ? 元素對象的后一個節點? 單個
節點三種類型：
元素節點? ? 對象.nodeType? 類型的返回值：1
屬性節點? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2
文本節點? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3
nodeValue
父子之間的關系
通過父節點找子節點：
父節點.firstChild? ? 單個
父節點.lastChild? ? 單個
父節點.childNodes? ? 多個? ? 通過下標去訪問單個的子節點
通過子節點找父節點
子節點.parentNode? 單個
平行關系
元素對象.previousSibling? 單個
元素對象.nextSibling? ? ? 單個
獲取屬性值：
HMTL DOM 元素對象.屬性名
CORE DOM 元素對象.getAttribute("屬性名")
設置屬性及屬性值
HTML DOM 元素對象.屬性名 = 屬性值
CORE DOM 元素對象.setAttribute("屬性名","屬性值")
//查找前一個元素節點兄弟
function prev(elem){
do{
elem = elem.previousSibling;
}
while(elem && elem.nodeType != 1);
return elem;
}
//查找后一個元素節點
function next(elem){
do{
elem = elem.nextSibling;
}
while(elem && elem.nodeType != 1);
return elem;
}
//查找第一子元素節點
function first(elem){
elem = elem.firstChild;
// if(elem.nodeType != 1){
// return next(elem);
// }else{
// return elem;
// }
return elem.nodeType != 1 ? next(elem) : elem;
}
//查找最后一個子元素節點
function last(elem){
elem = elem.lastChild;
return elem && elem.nodeType != 1 ? prev(elem) : elem;
}
//查找前一個節點
function prev(elem){
do{
elem = elem.previousSibling;
}
while(elem.nodeType != 1);
return elem;
}
//查找后一個元素節點
function next(elem){
do{
elem = elem.nextSibling;
}
while(elem && elem.nodeType != 1);
return elem;
}
創建新元素對象:
// document.createElement("標簽名字")
// 增加元素:
// 父元素對象.appendChild(要追加的子元素)
父元素對象.insertBefore(新插入的元素,參照物元素)
克隆節點:
// 元素對象.cloneNode(參數)
// 參數:可選的? 是一個布爾值? 默認false? 參數省略或為false時,克隆的只是自身,子節點不會被克隆
// ? 參數為true時,克隆的不僅是自身,還有子節點
克隆節點:
// 元素對象.cloneNode(參數)
// 參數:可選的? 是一個布爾值? 默認false? 參數省略或為false時,克隆的只是自身,子節點不會被克隆
// ? 參數為true時,克隆的不僅是自身,還有子節點
刪除節點
// 父元素對象.removeChild(子元素)
// 替換節點:
// 父元素對象.replaceChild(新的元素,老元素對象)
html dom 操作表格
插入行
table對象.insertRow(索引號)
插入列
行對象.insertCell(索引號)
引用行
table對象.rows[下標]
引用單元格
table對象.rows[下標].cells[下標]
刪除行
table對象.deleteRow(索引號)
刪除單元格
table對象.rows[下標].deleteCell(索引號)
