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. Unix/Linux环境C编程入门教程（19）Red Hat Entetprise Linux 7.0环境搭建

    位架构,包括英特尔X-86_64.Power和s390.动态定时能力将降低内核内部中断数量,Open vSwitch 2.0功能可调节虚拟机之间的流量.RHEL 7中默认的文件系统是XFS,包含了一个 ...

  2. iOS5系统API和5个开源库的JSON解析速度测试

    iOS5系统API和5个开源库的JSON解析速度测试 iOS5新增了JSON解析的API,我们将其和其他五个开源的JSON解析库进行了解析速度的测试,下面是测试的结果和工程代码附件. 我们选择的测试对 ...

  3. Spring、Struts2+Spring+Hibernate整合步骤

    所使用的Jar包: Hibernate: Spring(使用MyEclipse自动导入框架功能) Struts2: 注解包和MySql驱动包: 1.配置Hibernate和Spring: <be ...

  4. 最短路（dijskra+SPFA+Bellman）

    最短路 Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissio ...

  5. strcpy()、memcpy()、memmove()、memset()的内部实现

    一直想知道 strcpy().memcpy().memmove().memset()的内部实现 strcpy(), 字符串拷贝. char *strcpy(char *strDest, const c ...

  6. Unity插件之NGUI学习（1）—— 环境搭建

    Unity官网http://unity3d.com/unity/download下载最新版本号4.5.4 在圣典论坛上找到破解补丁(Windows)版本号tid=18741&fid=8&quo ...

  7. SqlServer2008 数据库同步的两种方式 (发布、订阅)

    尊重原著作:本文转载自http://www.cnblogs.com/tyb1222/archive/2011/05/31/2064944.html 上篇中说了通过SQL JOB的方式对数据库的同步,这 ...

  8. (转)IE劫持原理 BHO

    为什么“浏览器劫持”能够如此猖狂呢?放眼众多论坛的求助贴,我们不时可以看到诸如“我的IE被主页被改了,我用杀毒工具扫了一遍都没发现病毒,我把主页改回自己的地址,可是一重启它又回来了!”.“我的系统一开 ...

  9. 学习C++语言的50条忠告

    50条忠告:(其中有几条觉得写的不够贴切,所以删了,发了余下的部分) 1.把C++当成一门新的语言学习: 2.看<Thinking In C++>,不要看<C++变成死相>: ...

  10. 加密传输SSL协议3_非对称加密

    困死了,这里对非对称加密体系开个头,具体的实验明天写 非对称加密体系 为了解决对称加密中密钥的传输的问题,一些天才的数学家就提出了非对称式的加密体系,也称为公钥加密体系. 加密和解密的密钥是不同的.一 ...