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>