第三章 DOM的基本

  • 节点分为不同的类型:元素节点、属性节点和文本节点
  • getElementById()方法

这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。注意大小写。该方法只有一个参数。这个参数也就是这个id值必须放在单引号或双引号里。

语法:document.getElementById(id)

 

  • getElementByTagName()方法

这个方法返回一个对象数组,每个对象分别对应着文档里有着给定标签的元素。

语法:document.getElementByTagName(tag)

可以利用length属性查出这个数组里的元素个数。document.getElementByTagName()方法允许把通配符作为参数,通配符作参数也必须放在引号里。如果你想知道某份文档里总共有多少个元素节点:

alert(document.getElementByTagName("*").length);

 

  • getAttribute()方法

只有一个参数就是你打算查询的属性的名字,语法:object.getAttribute(attribute)

getAttribute()方法不能通过document对象调用,只能通过一个元素节点对象调用它。所以,我们可以利用getAtrribute()方法把它的各种属性的值查询出来。

        <body>
        <h1>what to buy</h1>
        <p title="tips">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">
            var paras = document.getElementsByTagName("p");
               for(var i=0; i<paras.length; i++){
               alert(paras[i].getAttribute("title")); //tips
           }
        </script>
        </body>    

 

  • setAtrribute()方法

这个方法允许我们队属性节点的值做出修改。setAtrribute()方法也是一个只能通过元素节点对相关调用,但setAtrribute()方法需要向它传递两个参数:

object.setAtrribute(attribute,value)

        <script type="text/javascript">
            var paras = document.getElementsByTagName("p");
               for(var i=0; i<paras.length; i++){
               paras[i].setAttribute("title","new tips");
               alert(paras[i].getAttribute("title")); //new tips
           }
        </script>    

setAtrribute()方法做出的修改不会反映在文档源代码里。

因为DOM的工作模式是:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容

 

posted @ 2016-04-30 01:16  Faxine  阅读(223)  评论(0编辑  收藏  举报