javascript对文档对象模型DOM的基本操作学习笔记

    文档对象模型（DOM）提供了一种访问和修改HTML文档内容的方法。DOM是万维网联盟（W3C）定义的一种标准。

    学习的重点：如何使用javascript访问和操作DOM。

    1、把DOM看作是一棵树

用树形结构表示的简单文档

    说明：树结构中的元素也可以被称作结点或结点对象。

    2、获取元素

    获取元素有两种方式：

    1）getElementById()通过ID获取元素。

    var getId = document.getElementById(“aimId”);

    alert(getId.value);

    此处的.value表示是：id为getId的对象的属性值。即可以通过获取id来获取节点对象，并查看其属性值。

    注：innerHTML属性的说明。

    function changeText()

    {

          vardoc = document.getElementById("aimId");

          alert(doc.innerHTML);//此处的aimId表示一个文本，这里.innerHTML表示doc对象的文本内容

          doc.innerHTML="changeText";//此处表示可以通过.innerHTML属性来修改html中的文本内容。将aimId中的原有文本修改为“changeText"

    }

    2）getElementByTagName()通过标签名获取。以数组或者列表的格式返回指定标签类型的所有元素。

    优点是：在获取多个元素时，该方法要优于getElementById()。

    例子：getElementByTagName()通过标签名获取，标签指的就是< >内的内容。

    function changecolors()

    {

          vara1=document.getElementByTagName("td");//获取<td>标签

          vara1Length=a1.length;//得到td标签的个数

     

          for(vari=0; i<a1Length; i++)

          {

             a1[i].style.background="#aaabba";//对<td></td>标签的内容设置背景颜色，该方法可以实现对一类元素的操作

          }

    }

 

    3、HTML集合

    1）document.anchors   包含所有<a>元素的组；

    2）document.forms     包含文档中所有<form>元素的组；

    3）document.images    包含所有<img>元素的组

    4）document.links     包含所有具有href属性的<a>元素的组

 

    4、处理节点

    例如：一个ID为mydiv的<div>元素和几个作为它孩子的<a>的锚元素。获取第一个元素并将其放入到childone变量中

    varchildone=document.getElementById("mydiv").childNodes[0];//注：第一个节点从下标为0的元素开始

 

    5、操作属性

    1）查看属性getAttribute()

    function showAttributes(e)

    {

          vare=document.getElementById("aimId");

          varelementList="";

          for(varelement in e)

          {

                 var attribute=e.getAttribute(element);

                 elementList=elementList+element+":"+attribute+"\n";

          }

          alert(elementList);

    }

    2）设置属性setAttribute()

    varseta=document.getElementById("aimId");

    alert(seta.getAttribute("href"));//显示id="aimId"处的href

    seta.setAttribute("href","要重新设置的字符串");//对目标处进行修改

    alert(seta.getAttribute("href"));//显示设置后的属性值

 

    6、创建元素

    1）添加文本

    a:创建元素

    varnewelement=document.createElement("p");

    变量newelement中的元素现在有了一个对新元素的引用，为了使元素可见，需要将其添加到文档中。

    b:添加节点

    document.body.appendChild(newelement);

    c:添加文本

    newelement.appendChild(document.createTextNode("HelloWorld"));

 

    2）添加元素并设置ID

    varnewelement=document.createElement("p");

    newelement.setAttribute("id","newelement");//此处设置newelement的id

    document.body.appendChild(newelement);

    newelement.appendChild(document.createElement("HelloWorld"));

 

    7、删除元素

    使用removeChild()可以删除文档中的任意位置的元素。该方法可以放在文档的任何地方，只要是该元素已经存在即可。

    varremoveelement=document.getElementById("aimId");

    document.body.removeChild(removeelement);//删除id为aimId的节点