首页 > 代码库 > 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