首页 > 代码库 > DOM
DOM
1.认识DOM
1.1定义:html中所有对象都可以被视为节点,包括属性和文本
1.2分类:元素1;属性2;文本3;文档9;(其余还有注释节点等等...)
2.访问相关节点
2.1从高到低 document.head.title.........document.body.firstChild;document.childNodes[0];
firstChild/lastChild/childNode[i]/previousSibling/nextSibling
2.2节点类型 JS给每个节点类型定义了不同的常量来表示其类型
元素节点:1
属性节点:2
文本节点:3
document:9
document.nodeType==9;/document.documentElement.nodeType==1;
3.设置元素属性//使用蓝色方便点
3.1 获得 ex:var oId=document.body.attribute.getNamedItem("id").nodeValue;///var oId=document.body.getAttribute("id");
3.2 设置 ex:body.attribute.setNamedItem("width").value=http://www.mamicode.com/100px;//body.setAttribute("width",100px);
3.3 删除 ex:body.attribute.removeNamedItem("width").value//body.removeAttribute("width");
4.访问特定节点
4.1 id法:document.getElementById("");//注意括号中id一定要加"";
4.2tagname:document.getElementsByTagName("")
4.3name:document.getElementsByName("")
5.操作节点
5.1 创建: 元素:createElement("") 文本:createTextNode(""); 文档碎片:createDocumentFragment(); 属性节点:createAttribute();
5.2 生成:appendChild();
5.3 删除:removeChild();
5.4 替换:replaceChild(new,old);
5.5 插入:insertBefore(new,old);
5.6 粘贴:cloneNode(boolean)//boolean=true时深度复制;ex:var oNewP=document.getElementById("xx").cloneNode(1);
6.操作文本节点 var oTextNode=document.getElementById("xxp").value;
6.1 访问长度 document.getElementById("xxp").firstChild.length;
6.2 改值 oTextNode.data="http://www.mamicode.com/fuck!"
6.3 末尾增加 oTextNode.appendData="http://www.mamicode.com/You!"
6.4 删除 oTextNode.deleteData(offset,count);
6.5 局部替换 oTextNode.replaceData(offset,count,string);
6.6 中间插入 oTextNode.insertData(offsert,string)
........
7.DOM中特性值和属性值可通用
body.style.width="100px";
document.a[0].href="http://www.mamicode.com/#";
class要用className
8.table
8.1 插入某行 oTBody.insertRow(i)
8.2 访问某行 oTBody.rows[i];
8.3 插入某单元格:oTBody.rows[1].insertCell(0);
8.4 访问某单元格:oTBody.rows[1].cells[1]; //访问前此行或此单元格一定要已经存在,即已经插入
8.5 删除:deleteRow();deleteCell()
//在访问,插入,删除单元格时,一定是在某行之下进行,不能单独直接访问
9.innerHTML
直接改变元素内容!
DOM