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. 矩阵转置 O(1)空间

    题目:用O(1)的空间实现矩阵的转置 为了方便,使用一维数组来分析.所谓矩阵转置,行变列,列变行.在转置的过程中,有的元素位置是不变的:对于变化位置的元素,要求O(1)空间完成,那么这些位置的变化一定 ...

  2. jQuery插件

    1. Lightbox 2:    Lightbox 2 是一款很酷的图片显示插件,可以在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景.使用这款插件,是为了当你的的图片过大必须 ...

  3. Eclipse:使用findBugs预先检测错误

    FindBugs是用于Java的另一种静态分析工具,它在某些方面与Checkstyle和PMD类似,但是侧重点不同.FindBugs不关心格式或编码标准,对最佳实践也不太感兴趣:事实上,它专注于检查潜 ...

  4. 关于cocos2dx 3.0升级崩溃报错(unable to load native library) 和(Fatal signal 11 (SIGSEGV) at 0x00000000)

    近期一直在Windows平台开发cocos-2dx游戏,期间做了一次引擎升级,升级到了3.0正式版本号.Windows平台上表现非常正常,没有出现什么问题. 上周五准备公布一个安卓包,编译非常轻松的就 ...

  5. uri 和 url 的区别

    uri 统一资源标识符,值是唯一标识资源的任意字符,比如guid url 统一资源定位符,值是标识资源的字符串,但是包含定位信息,比如http://localhost/index.html

  6. 如何使用eclipse生成javadoc帮助文档

    ---恢复内容开始--- 如果你已经能制造轮子了,你想让其他人使用你的轮子,那你就得告诉他们你的轮子都是由什么构成的.这样他们才能更好的使用你制造的轮子.然而,很多开发者都不想写长篇大论的帮助文档,这 ...

  7. Fedora、CentOS install TTF/otf fonts

    Step 1:切换至字体下载目录: [Richard@localhost Downloads]$ ll | grep otf -rw-rw-r--. Richard Richard 7月 RBNo2L ...

  8. 如何在 webApi 当中接收 Gzip 压缩或者加密后的 请求消息内容！

    今天在上班的时候遇到个问题,移动端要求我们用GZIP加密.当时一想着多简单,但是在做的时候发现个问题. 就是移动端Post到 服务端的数据也是经过 Gzip的,并不是单一的像网站那样只针对网页进行 压 ...

  9. jquery 获取当前元素的索引值

    $("#lisa > li").mouseover(function(){ alert($("#lisa > li").length); alert ...

  10. Java程序执行Linux命令

    Java程序中要执行linux命令主要依赖2个类:Process和Runtime 首先看一下Process类: ProcessBuilder.start() 和 Runtime.exec 方法创建一个 ...