关于Javascript 中的DOM操作

        系统地学习Javascript的第三天，发现DOM操作是JS要完成一些特效时必须要用到的。

      首先，DOM是什么呢？DOM的含义其实很简单，DOM分别是“Document”--“Object”--“Model”，

      Document：文档，document文档一般是HTML文档和XML文档，即标记语言，有标签的文档才能是document。

      Object：对象，即HTML文档用某种方式转成的JS对象。

      我们都知道，JS是基于对象的，所有的访问方式必须是对象的访问方式。本身是HTML文档，而我们要用一种JS方式访问，要用JS操作HTML文档元素（如文档中的标签和块），就需要先将HTML文档结构转成JS的对象。

      Model：模型。

      DOM合起来解释即文档对象模型，每当网页被加载时，浏览器会创建页面的文档对象模型，HTML DOM模型被构造成对象的树。如下图：

      

          通常，我们通过Javascript可以操作：

        1. HTML元素的属性：如：操作链接属性，var s = document.getElementById("...")；s.href="www.baidu.com";

        2. HTML元素的内容：经常用的有这四种方法：innerHTML() / innerText() / outerHTML() / outerText();

            var s = document.getElementById("...")；s.innerHTML() / innerText() / outerHTML() / outerText()...

        3. HTML元素的样式：(对象名，如：Object). style. （样式，如：background） = “（值）”；

        刚才上面提到，要想通过Javascript操作元素，必须找到该元素并将其转换成可以访问的对象形式。

        那么，获取元素并转成对象的方法有以下两大种：

        一、通过 id（唯一）、 标签名(多个)、name（多个）、class类名：

        ① 通过id名：document.getElementById（"..."）  返回的是一个值，id不能重复

        ② 通过标签名：document.getElementsByTagName（"..."）返回的是一个数组，因为文档中标签名相同的可能有多个

        ③ 通过name名称 ：document.getElementsByName（"..."）返回的是一个数组，因为名称相同的可能有多个

        ④ 通过class类名，但是通过类名查找元素在IE5,6,7,8中无效。

       二、通过数组：

        如果在文档中加一句：alert(document.all),我们可以看到很多文档的信息。

        我们比较经常操作的应该有一下这些：

        document.title                                     //代表文档标题             
document.body=[object]                    //代表body标签
document.all=[object]                         //代表所有的标记，统计文档当中有多少标记用这个
document.embeds=[object]              //代表所有的动画
document.scripts=[object]                //代表所有的Javascript脚本
document.applets=[object]              //代表所有的applet
document.images=[object]             //代表所有的图像
document.forms=[object]                //代表所有的表单
document.anchors=[object]           //代表所有的锚点
document.styleSheets=[object]    //代表所有的样式
document.links=[object]                //代表所有的链接

        有七种访问方式
alert(document.forms[0].username.value);                    //document.forms得到的是数组，通过下标访问
alert(document.forms["frm1"].username.value);            //对象属性可以用“[]”访问
alert(document.forms.item(0).username.value);           //document.form对象数组中有个item()方法,可以根据下标访问数组成员
alert(document.forms.item("frm1").username.value);  //item()方法还可以根据name访问数组成员
alert(document.forms.frm1.username.value);               //与第二种方法一样，对象属性还可以用“.”访问
alert(document.frm1.username.value);                         //对象属性可以用“.”直接访问,比较常见
alert(document["frm1"].username.value);                     //与第六种方法相同，对象属性不仅可以用“.”，还可以用“[]”访问