JavaScript之怎样获取元素节点

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏csxiaoyao

golang之fmt格式占位符总结

65560
来自专栏老马寒门IT

06-老马jQuery教程-jQuery高级

1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQue...

23690
来自专栏Golang语言社区

厚土Go学习笔记 | 21. range用法

range是一个内置函数。可以遍历数组、切片slice、字典map。 当遍历数组和切片的时候,返回的是索引和元素。 当遍历字典的时候,返回字典的键和值。 //r...

446100
来自专栏张善友的专栏

c#处理空白字符

空白字符是指在屏幕不会显示出来的字符(如空格,制表符tab,回车换行等)。空格、制表符、换行符、回车、换页垂直制表符和换行符称为 “空白字符”,因为它们为与间距...

25260
来自专栏java工会

你真的了解Override吗,属性能够被重写吗?

最近想到了一个问题,Java的属性能够被Override吗?首先让我们看一下下面这个继承的例子。

22740
来自专栏LanceToBigData

JS对象与Dom对象与jQuery对象之间的区别

通过问题看本质: 举例: js的写法:document.getElementById('save').disabled=true; 在jquery中我是这...

26010
来自专栏Golang语言社区

Go语言中字符串的查找方法小结

1.func Contains(s, substr string) bool这个函数是查找某个字符是否在这个字符串中存在,存在返回true import ( ...

371100
来自专栏问天丶天问

Linux 字符串截取

21050
来自专栏Pythonista

Golang之strings包

比较全的是golang中文网的:https://studygolang.com/articles/5769

22420
来自专栏Golang语言社区

Go 语言范围(Range)

Go 语言中 range 关键字用于for循环中迭代数组(array)、切片(slice)、通道(channel)或集合(map)的元素。在数组和切片中它返回元...

33650

扫码关注云+社区

领取腾讯云代金券