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. windows开机启动nginx

    1 .http://www.cuplayer.com/player/PlayerCode/Nginx/2014/0919/1577.html 2. http://www.cnblogs.com/xus ...

  2. javascript时间处理方法收集

    首先收集到的是一个给某一个时间对象增加一段时间的方法, 例如2026-05-11增加一个月的时间,增加后时间为2026-05-11, 代码如下: function DateAdd(interval,n ...

  3. PHP中静态方法和非静态方法的相互调用

    在PHP的非静态方法中可以调用静态方法 class test{ public static function strPrint(){ echo 'this is strPrint static fun ...

  4. Python学习笔记（十五）：类基础

    以Mark Lutz著的<Python学习手册>为教程,每天花1个小时左右时间学习,争取两周完成. --- 写在前面的话 2013-7-24 23:59 学习笔记 1,Python中的大多 ...

  5. 图片延迟加载技术-Lazyload的应用

    我们在浏览图片量非常大的页面时,像淘宝商城商品展示.必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术.本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加 ...

  6. $(this) 和 this

    在使用 jQuery 时,$(this) 和 this 具体指: this :是当前 DOM 对象: $(this) 是jQuery对象: 例子: <input type="text& ...

  7. Mantis Administrator控制密码、注册不用邮件验证、添加测试员[Z]

    Mantis默认安装完成后,管理员创建用户,但无法设置用户密码,只有通过邮件由用户自行修改.无法适应某些没有统一邮箱的情况,现将关闭邮箱验证方法和管理员设置用户密码方法验证通过   不用邮件验证: c ...

  8. AssetBundle的使用

    using UnityEngine; using System.Collections; using UnityEditor; using System.IO; public class Editor ...

  9. 深入理解Java虚拟机：OutOfMemory实战

    在Java虚拟机规范的描述中,除了程序计数器外,虚拟机内存的其他几个运行时区域都有发生OutOfMemoryError(下文称OOM)异常的可能,本节将通过若干实例来验证异常发生的场景.并且会初步介绍 ...

  10. Python核心编程读笔 13：执行环境

    第14章  执行环境 一.可调用对象 python有四种可调用对象:函数.方法.类.一些类的实例 1 函数 (1)内建函数(BIF) BIF是用c/c++写的,编译后放入python解释器,然后把它们 ...