W3C規(guī)定的三類DOM標(biāo)準(zhǔn)接口
Core DOM（核心DOM）劳坑，適用于各種結(jié)構(gòu)化文檔
XML DOM毡们，專用于XML文檔
HTML DOM元旬，專用于HTML文檔
表格的操作
添加行和單元格
var _table=document.createElement("table");?? //創(chuàng)建表
table.insertRow(i);??????????????//在table的第i行插入行
row.insertCell(i);?????????????????//在row的第i個(gè)位置插入單元格
引用單元格對(duì)象
table.rows[i].cells[i];
刪除行和單元格
table.deleteRow(index);
row.deleteCell(index);
//節(jié)點(diǎn)
alert(oD.nodeType);//node(節(jié)點(diǎn))? type（類型）? 元素節(jié)點(diǎn)的類型的值是 1
// alert(oD.getAttributeNode("id").nodeType);? //屬性節(jié)點(diǎn)類型的值 2
// alert(oS.firstChild.nodeType);? //文本節(jié)點(diǎn)類型的值 3
// alert(oD.nodeValue);//元素節(jié)點(diǎn)的值? null
// alert(oD.getAttributeNode("id").nodeValue);//屬性節(jié)點(diǎn)的值是屬性的值
alert(oS.firstChild.nodeValue);//文本節(jié)點(diǎn)的值是文本的內(nèi)容
//屬性節(jié)點(diǎn)
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
// 元素對(duì)象.屬性名? ? 不能獲取或者設(shè)置自定義的屬性的值
//
// core DOM
// 元素對(duì)象.getAttribute("屬性名")? 可以獲取自定義的屬性的值
// 元素對(duì)象.setAttribute("屬性名","屬性值")? 可以設(shè)置自定義的屬性名和屬性值
層次間關(guān)系:
// 通過父親找孩子
// 父元素對(duì)象.firstChild? 單個(gè)
// 父元素對(duì)象.lastChild? 單個(gè)
// 父元素對(duì)象.childNodes? 多個(gè)? ? 通過下標(biāo)訪問單個(gè)子元素
通過孩子找父親
子元素對(duì)象.parentNode? 單個(gè)
// 水平間的查找
// 往前查找:
// 元素對(duì)象.previousSibling? 元素對(duì)象的前一個(gè)節(jié)點(diǎn)? 單個(gè)
//
// 往后查找:
// 元素對(duì)象.nextSibling? ? ? 元素對(duì)象的后一個(gè)節(jié)點(diǎn)? 單個(gè)
節(jié)點(diǎn)三種類型：
元素節(jié)點(diǎn)? ? 對(duì)象.nodeType? 類型的返回值：1
屬性節(jié)點(diǎn)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2
文本節(jié)點(diǎn)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3
nodeValue
父子之間的關(guān)系
通過父節(jié)點(diǎn)找子節(jié)點(diǎn)：
父節(jié)點(diǎn).firstChild? ? 單個(gè)
父節(jié)點(diǎn).lastChild? ? 單個(gè)
父節(jié)點(diǎn).childNodes? ? 多個(gè)? ? 通過下標(biāo)去訪問單個(gè)的子節(jié)點(diǎn)
通過子節(jié)點(diǎn)找父節(jié)點(diǎn)
子節(jié)點(diǎn).parentNode? 單個(gè)
平行關(guān)系
元素對(duì)象.previousSibling? 單個(gè)
元素對(duì)象.nextSibling? ? ? 單個(gè)
獲取屬性值：
HMTL DOM 元素對(duì)象.屬性名
CORE DOM 元素對(duì)象.getAttribute("屬性名")
設(shè)置屬性及屬性值
HTML DOM 元素對(duì)象.屬性名 = 屬性值
CORE DOM 元素對(duì)象.setAttribute("屬性名","屬性值")
//查找前一個(gè)元素節(jié)點(diǎn)兄弟
function prev(elem){
do{
elem = elem.previousSibling;
}
while(elem && elem.nodeType != 1);
return elem;
}
//查找后一個(gè)元素節(jié)點(diǎn)
function next(elem){
do{
elem = elem.nextSibling;
}
while(elem && elem.nodeType != 1);
return elem;
}
//查找第一子元素節(jié)點(diǎn)
function first(elem){
elem = elem.firstChild;
// if(elem.nodeType != 1){
// return next(elem);
// }else{
// return elem;
// }
return elem.nodeType != 1 ? next(elem) : elem;
}
//查找最后一個(gè)子元素節(jié)點(diǎn)
function last(elem){
elem = elem.lastChild;
return elem && elem.nodeType != 1 ? prev(elem) : elem;
}
//查找前一個(gè)節(jié)點(diǎn)
function prev(elem){
do{
elem = elem.previousSibling;
}
while(elem.nodeType != 1);
return elem;
}
//查找后一個(gè)元素節(jié)點(diǎn)
function next(elem){
do{
elem = elem.nextSibling;
}
while(elem && elem.nodeType != 1);
return elem;
}
創(chuàng)建新元素對(duì)象:
// document.createElement("標(biāo)簽名字")
// 增加元素:
// 父元素對(duì)象.appendChild(要追加的子元素)
父元素對(duì)象.insertBefore(新插入的元素,參照物元素)
克隆節(jié)點(diǎn):
// 元素對(duì)象.cloneNode(參數(shù))
// 參數(shù):可選的? 是一個(gè)布爾值? 默認(rèn)false? 參數(shù)省略或?yàn)閒alse時(shí),克隆的只是自身,子節(jié)點(diǎn)不會(huì)被克隆
// ? 參數(shù)為true時(shí),克隆的不僅是自身,還有子節(jié)點(diǎn)
克隆節(jié)點(diǎn):
// 元素對(duì)象.cloneNode(參數(shù))
// 參數(shù):可選的? 是一個(gè)布爾值? 默認(rèn)false? 參數(shù)省略或?yàn)閒alse時(shí),克隆的只是自身,子節(jié)點(diǎn)不會(huì)被克隆
// ? 參數(shù)為true時(shí),克隆的不僅是自身,還有子節(jié)點(diǎn)
刪除節(jié)點(diǎn)
// 父元素對(duì)象.removeChild(子元素)
// 替換節(jié)點(diǎn):
// 父元素對(duì)象.replaceChild(新的元素,老元素對(duì)象)
html dom 操作表格
插入行
table對(duì)象.insertRow(索引號(hào))
插入列
行對(duì)象.insertCell(索引號(hào))
引用行
table對(duì)象.rows[下標(biāo)]
引用單元格
table對(duì)象.rows[下標(biāo)].cells[下標(biāo)]
刪除行
table對(duì)象.deleteRow(索引號(hào))
刪除單元格
table對(duì)象.rows[下標(biāo)].deleteCell(索引號(hào))
