JavaScript_02 DOM简述及获取元素

1、DOM：documentObjectModel。文档对象模型。
D:代表文档，也即当我们编写一个网页并加载到浏览器中时，它将我们的网页文档转换为一个文档对象
O:代表对象
-用户自定义的对象：程序员自行开发的对象。
-内置对象：内建在javascript语言中的对象
-宿主对象：由浏览器提供的对象
M:代表模型
DOM把一份文档表示为一颗树，如下代码：

<html>
    <head>
        <meta charset="utf-8" />
        <title>example</title>
    </head>
    <body>
        <h1>what to you buy?</h1>
        <p title="a gentle reminder">don't forget to buy this stuff</p>
        <ul id="purchases">
            <li>a tin of beans</li>
            <li class="sale">cheese</li>
            <li class="sale important">milk</li>
        </ul>
    </body>
</html>

分析一下网页的结构可以得到这样的模型

dom.jpeg

对于这个树来说，通过不同的节点来构成。节点包括：
-元素节点：例如<body> <ul> <li>等；
-文本节点：比如上面代码中<p>元素中的don't forget to buy this stuff即为文本节点；
-属性节点：属性节点被放在元素节点的起始节点中，如：代码中的title="a gentle reminder"即为属性节点；

2、获取元素：
(1)、getElementById();通过元素的id属性值来获取元素，返回一个元素对象。

    <script type="text/javascript">
        alert(document.getElementById("purchases"));
    </script>

(2)、getElementsByTagName();通过元素节点名称来获取元素列表，返回一个对象数组。

    <script type="text/javascript">
        alert(document.getElementsByTagName("li").length);
    </script>

(3)、getElementsByTagName();通过元素节点classname来获取元素列表，返回一个对象数组。

    <script type="text/javascript">
        alert(document.getElementsByClassName("sale").length);
    </script>

3、获取和设置属性
(1)、获取属性值：getAttribute()

<script type="text/javascript">
       var pobjects = document.getElementsByTagName("p"); //获取元素节点为p的元素数组
           for(var i=0;i<pobjects.length;i++){ //循环该数组
               var title_text = pobjects[i].getAttribute("title"); //获取数组的属性title的值
               if(title_text != null){ //如果title的值不为空
                   alert(title_text);  //弹出title属性的值
               }
           }
   </script>

(2)、设置属性值：getAttribute()

<script type="text/javascript">
       var pobjects = document.getElementsByTagName("p"); //获取元素节点为p的元素数组
           for(var i=0;i<pobjects.length;i++){ //循环该数组
               var title_text = pobjects[i].getAttribute("title"); //获取数组的属性title的值
               if(title_text != null){ //如果title的值不为空
                   pobjects[i].setAttribute("title","a new title");    //修改title属性值为：a new title
                   alert(pobjects[i].getAttribute("title"));//弹出title属性值
               }
           }
   </script>

JavaScript_02 DOM简述及获取元素

推荐阅读更多精彩内容