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. 可爱的 Python : Python中的函数式编程，第三部分

    英文原文:Charming Python: Functional programming in Python, Part 3,翻译:开源中国 摘要:  作者David Mertz在其文章<可爱的 ...

  2. C语言的本质（8）——副作用与顺序点

    C 语言中,术语副作用是指对数据对象或者文件的修改.例如以下语句 var = 99; 的副作用是把 var 的值修改成 99.对表达式求值也可能产生副作用,例如: se = 100 对这个表达式求值所 ...

  3. 网易云课堂_C语言程序设计进阶_第二周：指针：取地址运算和指针、使用指针、指针与数组、指针与函数、指针与const、指针运算、动态内存分配_2信号报告

    2 信号报告(5分) 题目内容: 无线电台的RS制信号报告是由三两个部分组成的: R(Readability) 信号可辨度即清晰度. S(Strength)    信号强度即大小. 其中R位于报告第一 ...

  4. 新手求大神,有其他swit-case的思路写这个程序么?

    两个程序: switch-case与if-else if的区别相同点:可以实现多分支结构;不同点:switch:一般只能用于等值比较.(可以进行范围运算???---学会用switch计算范围出炉的思路 ...

  5. vs2015 不支持javascript的智能提示高亮

    有些人安装了vs2015后发现居然不支持javascrpt的高亮功能,连工具-选项-文本编辑器里面的javascript也没有了,楼主也碰到这么个情况了,估计是有与装了多个版本的原因,楼主电脑安装了V ...

  6. Sizzle一步步实现所有功能（层级选择）

    第二步:实现Sizzle("el,el,el..."),Sizzle("el > el"),Sizzle("el el"),Sizzl ...

  7. C++_内部类

    C++ 内部类和外部类之间的相互调用

  8. lightoj 1079 Just another Robbery

    题意:给出银行的个数和被抓概率上限.在给出每个银行的钱和抢劫这个银行被抓的概率.求不超过被抓概率上线能抢劫到最多的钱. dp题,转移方程 dp[i][j] = min(dp[i-1][j] , dp[ ...

  9. leetcode remove Nth Node from End python

    # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x): # self.val = ...

  10. svn服务器配置小记

    在这里/opt/svndata/repos1创建svn版本库svnadmin create /opt/svndata/repos1 创建成功后会在/opt/svndata/repos1目录下生成con ...