JavaScript获取元素节点一共有三种方法,分别是通过元素ID、通过标签名字和通过类名字来获取；

1.通过元素ID属性的ID值来获得元素对象-getElementById()

DOM提供了一个名为getElementById()的方法,这个方法将返回一个与括号里有着一样id值的元素节点对应的对象。他是document对象特有的函数,这个函数的参数只有一个,只能是你想要获得的元素的ID值,这个值必须放在单引号或者双引号里面。

注意:JavaScript语言区分字母大小写,所以在写getElementById千万别写成getElementByid,这样得不到你想要获得的元素对象。

<body>

 <div id="id">

 </div>

 <script type="text/javascript">

    alert(typeof document.getElementById('id'));

 </script>
</body>

输出:object;  这说明了getElementById()返回的确实是一个对象；

2.通过标签名字-getElementsByTagName()

DOM提供了一个名为getElementsByTagName()的方法,这个方法返回一个与括号里有着一样标签名的元素数组对应的对象数组。也就是说返回的是所有匹配的元素所组成的一个元素数组。。 他是document对象特有的函数,这个函数的参数只有一个,只能是你想要获得的元素的标签名,这个值必须放在单引号或者双引号里面。返回的就是个数组(http://www.cnblogs.com/GreenLeaves/p/5684530.html)-数组介绍，那我们就可以获得他的length属性,如下代码

<body>

    <div id="id">

        <ul>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

    <script type="text/javascript">

        alert(document.getElementsByTagName('li').length);

    </script>

</body>

输出:3,证明getElementByTagName()返回的确实是一个元素对象数组；

2.1 getElementsByTagName()允许把一个通配符(星号字符*)作为他的参数,这意味这文档里的每个元素都将在这个函数的返回值里占有一席之地;如果你想知道某份html文档一共有多少元素节点,如下代码所示：

<body>

    <div class="p a">

        <div class="a">

        </div>

    </div>

    <div class="a">

    </div>

    <div class="a">

    </div>

    <script type="text/javascript">

        alert(document.getElementsByTagName('*').length);

    </script>

</body>

3.通过class属性的类名来获得元素对象-getElementsByClassName()

HTML5 DOM中新增了一个令人期待已久的方法getElementsByClassName(),这个方法能让我们通过class属性的类名来访问元素。但是某些DOM可能还没有实现(基本都已实现),因此在使用的时候要当心。

DOM提供了一个名为getElementsByClassName()的方法,这个方法返回一个与括号里有着一样类名的元素数组对应的对象数组。也就是说返回的是所有匹配的元素所组成的一个元素数组。 他是document对象特有的函数,这个函数的参数只有一个,只能是你想要获得的元素的类名,这个值必须放在单引号或者双引号里面。返回的就是个数组(http://www.cnblogs.com/GreenLeaves/p/5684530.html)-数组介绍，那我们就可以获得他的length属性,如下代码

<body>

    <div class="a">

    </div>

    <div class="a">

    </div>

    <div class="a">

    </div>

    <script type="text/javascript">

        alert(document.getElementsByClassName('a').length);

    </script>

</body>

输出:3,证明getElementsByClassName()返回的确实是一个元素对象数组；

因为getElementsByClassName()这个方法非常有用,但是可能有些浏览器不支持,所以我们必须用已有的DOM方法来实现他的功能；如下代码所示：

<body>

    <div id="target">

        <div class="a">

        </div>

        <div class="a">

        </div>

        <div class="a">

        </div>

    </div>

    <script type="text/javascript">

    /*

    第一步:给定搜索起点node;

    第二步:判断DOM是否实现getElementsByClassName()这个方法,有正常返回,没有用已有的DOM方法实现相同的效果返回匹配的元素数组

    */

        function getElementsByClassName_zdy(node,classname) {

            if (node.getElementsByClassName) {

                return node.getElementsByClassName(classname);

            } else {

                var results = Array();

                var elements = node.getElementsByTagName('*');

                for (var i = 0; i < elements.length; i++) {

                    if (elements[i].className.indexOf(classname) != -1) {

                        results[results.length] = elements[i];

                    }

                }

                return results;

            }

        }

        alert(getElementsByClassName_zdy(document.getElementById('target'), 'a').length)

    </script>

</body>

JavaScript之怎样获取元素节点的更多相关文章

  1. Javascript及Jquery获取元素节点以及添加和删除操作

    用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...

  2. 获取元素节点的子节点 & 获取文本节点

    1. 获取元素节点的子节点(**只有元素节点才有子节点):              ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点          ...

  3. 获取元素节点 & 操作属性节点

    1.html 文档编写 js 代码的位置: window.onload事件在整个html文档被完全加载完再执行,    所以可以获取html文档的任何节点 js-window-onload.html ...

  4. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  5. 根据ClassName获取元素节点

    功能描述: 通过ClassName获取元素节点,并解决兼容性问题 实现效果: 编码思路: 利用getElementsByTagName选出所有元素,再根据ClassName条件进行筛选 代码示例:

  6. javascript中获取元素节点的文本

    <div id="test"> <strong>i'm strong</strong> </div> 1.elementNode.i ...

  7. JavaScript中的获取元素的方法

    通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 d ...

  8. 怎样通过id属性值获取元素节点

    方法1: 使用document.getElementById(); 方法2: 使用document.querySelector(); document.getElementById("app ...

  9. 怎样通过html标签名获取元素节点集合

    方法1. 使用document.querySelectorAll(); 方法2. 使用document.getElementsByTagName(); document.querySelectorAl ...

随机推荐

  1. [置顶] 实习总结3-job hunting(西安工作)

    开始整理关于西安top level的IT企业的工作从去年开始实习就慢慢展开了,到了北京之后一直关注的比较密切,因此前前后后也整理了很多.本来不打算那么急着写这一篇的,但是在因为在公司呆着,对于西安的一 ...

  2. 斯坦福NG机器学习课程：Anomaly Detection笔记

    Anomaly Detection Problem motivation: 首先描写叙述异常检測的样例:飞机发动机异常检測 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkb ...

  3. uva 10453 - Make Palindrome(dp)

    题目链接:10453 - Make Palindrome 题目大意:给出一个字符串,通过插入字符使得原字符串变成一个回文串,要求插入的字符个数最小,并且输出最后生成的回文串. 解题思路:和uva 10 ...

  4. [置顶] 有关ListIterator接口的add与remove方法探究

    ListIterator接口继承自Iterator接口,新增了add()等方法. 关于ListIterator的add()方法的作用(接口是没有方法实现的,但其实现类对于add()方法的实现机制大致相 ...

  5. shape和selector是Android UI设计中经常用到的

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector.可以这样说,shape和 ...

  6. 依赖注入及AOP简述（十三）——AOP应用举例（完结） .

    2.     AOP应用举例 在一般的应用程序开发中,有一些典型的AOP应用,使得开发者可以专注于业务逻辑本身,而不是与之完全无关的一些“方面”. l        首先就是关于前面介绍过的日志输出类 ...

  7. JAVA策略模式

    <JAVA与模式>之策略模式 在阎宏博士的<JAVA与模式>一书中开头是这样描述策略(Strategy)模式的: 策略模式属于对象的行为模式.其用意是针对一组算法,将每一个算法 ...

  8. Check SMTP Server Availability for ORA-29278 or ORA-29279 errors using UTL_SMTP to Send Email

    Check SMTP Server Availability for ORA-29278 or ORA-29279 errors using UTL_SMTP to Send Email. (文档 I ...

  9. gcc -lpthread 干什么用

    #include <stdio.h> #include <pthread.h> void *ThreadFunc(void *pArg)  //参数的值为123 { int i ...

  10. 《OS X Mountain Lion》 读书杂记

    OS X是一个类UNIX操作系统,由底层的Darwin和上层的OS X应用程序框架(Cocoa, Carbon, Quartz等)及Aqua用户界面组成.其中Darwin是一个开源.完整的POSIX- ...