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(索引号)