DOM的艺术

DOM中的"D"

DOM中的"D"

DOM是“Document Object Model”(文档对象模型)的首字母缩写。如果没有document（文档），DOM也就无从谈起。 当创建了一个网页并把它加载到web浏览器中，DOM就在幕后悄然而生。 它将根据你编写的网页文档创建一个文档对象。

DOM中的"O"

DOM中的"O"

"对象"是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性； 可以通过某个特定对象去调用的函数被称为这个对象的方法。 对象可以分为三种： 用户定义对象(user-defined object): 由程序员自行创建的对象。 内建对象(native object): 内建在JavaScript语言里的对象，如ArrayMath和Date等。 宿主对象(host object): 由浏览器提供的对象。 在JavaScript语言的发展初期，程序员在编写JavaScript脚本时经常需要用到一些非常重要的宿主对象，它们当中最基础的是window对象。

DOM中的"M"

DOM中的"M"

DOM中的"M"代表着"Model"(模型)，但说它代表着"Map"(地图)也未尝不可。模型也好，地图也罢，它们的含义都是某种事物的表现形式。 就像一个模型火车代表着一列真正的火车、一张城市街道图代表着一个实际存在的城市那样， DOM 代表着被加载到浏览器窗口里的当前网页： 浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JavaScript去读取这张地图。

常见的方法(1)

getElementById方法

这个方法将返回一个与那个有给定id属性值的元素节点相对应的对象。 这个方法是与document对象相关联的函数。在脚本代码里，函数名的后面必须跟一组圆括号，包含函数的参数。 在这里只有一个参数就是：你要获得的元素的id属性值，这个id属性值必须放在

单引号或双引号

中。 document.getElementById("purchases"); 将返回一个对象,这个对象对应着document对象里的一个独一无二的元素，那个元素的id属性就是上面的purchases。

以下为示例部分

<p title="a gentle reminder">Don't forget to buy this stuff.</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li>Cheese</li>
        <li>Milk</li>
    </ul>
    <script type="text/javascript">
        console.log(typeof document.getElementById("purchases"));//获取所要元素的id并对其作出修改
    </script>

 

常见的方法(2)

getElementsByTagName方法

它与getElementById有很多相同之处，但值得注意的是getElementsByTagName返回的是一个对象数组，每个对象分别对应着文档里有着给定标签的元素。

下面示例中 .length属性可以查出这个数组里元素的个数。

 

以下为示例部分

<div id="div1">div12</div>
    <ul class="ul">
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>
    <script>
        console.log(document.getElementsByTagName("li").length);
    </script>

 

常见的方法(3)

getAttribute方法

之前我们学到了两种，查找元素节点的方法：一种是getElementById，另一种是getElementsByTagName。 现在我们可以利用getAttribute()方法来把各种属性的值查出来。 在下面if(something)与if(something !=null)是等价的

以下为示例

<p title="a gentle reminder">Don't forget to buy this stuff.</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li>Cheese</li>
        <li>Milk</li>
    </ul>
    <script>
        /* 假如这份文档还有一个或更多个不带 title 属性的<p>元索，则相应的 getAttribute("title")调用将返回null。
            null 是JavaScript 语言中的空值，具含义是 “你说的这个东西不存在”。 */
        /* var paras = document.getElementsByTagName("p");
        for(var i =0; i<paras.length; i++){
            alert(paras[i].getAttribute("title"));
           
        } */

        //修改脚本，使得只有存在title时弹出
        var paras = document.getElementsByTagName("p");
        for(var i=0;i<paras.length;i++){
            var text_title = paras[i].getAttribute("title");
            if(text_title){
                alert(text_title);
            }
        }
    </script>

 

常用的方法(4)

setAttribute方法

类似于getAttribute()方法， setAttribute()方法也是一个只能通过元素节点对象调用的函数， 但 setAttribute()方法需要我们向它传递两个参数： object.setAttribute(attribute,value)

这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和I或行为动作发生相应的变化， 但我们在通过浏览器的 view source (查看源代码）选项去查春文档的源代码时吾到的仍将是原来的属性值—— 也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。

以下为示例

<p title="a gentle reminder">Don't forget to buy this stuff.</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li>Cheese</li>
        <li>Milk</li>
    </ul>
    <script>
        var shopping = document.getElementById("purchases");
        alert(shopping.getAttribute("title"));
        shopping.setAttribute("title","a list of goods");
        alert(shopping.getAttribute("title"));
    </script>