zoukankan      html  css  js  c++  java
  • 第三章 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的工作模式是:先加载文档的静态内容、再以动态方式对它们进行刷新,动态刷新不影响文档的静态内容

  • 相关阅读:
    解决在PDF文档中复制代码报错问题
    JAVA高级复习泛型
    SpringBoot高级监听原理
    SpringBoot整合其它框架整合Junit
    SpringBoot高级监控
    JAVA基础复习异常处理
    SpringBoot 整合 webservice 示例
    关于ScrollView的子View无法布满屏幕的问题
    Android开发中头疼的R文件问题
    博客园美化[SimpleMemory主题+tctip插件]
  • 原文地址:https://www.cnblogs.com/afighter/p/5447975.html
Copyright © 2011-2022 走看看