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=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="fuck!"

　　6.3 末尾增加  oTextNode.appendData="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="#";

　　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

　　直接改变元素内容!

　　

　　

转载于:https://www.cnblogs.com/Excalibur-Zhou/p/4004385.html