获取dom对象(3)

最新推荐文章于 2024-07-20 23:54:17 发布

banxingbi2471

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量76

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cxy020/p/3812319.html

版权

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>获取dom对象</title>
</head>
<body>
    <input class="btn1" type="button" value="mybtn1" />
    <input class="btn1" type="button" value="mybtn2" />
    <img src="" alt="img1" />
    <img src="" alt="img2" />
    <div id="mydiv">
        <input class="btn2" type="button" value="mybtn3" />
        <input class="btn2" type="button" value="mybtn4" />
    </div>
</body>
</html>

<script type="text/javascript">
    //兼容ie浏览器测试
    var console = console || {};
    console.log = console.log || function(a){
        alert(a);
    }

    /*
    getElementsByTagName(tag);
    通过元素名获取到tag相同的dom对象集合.
    这个方法效率比较低,在实际开发中用的比较少,建议大家也根据实际情况使用.
    但是在我们使用框架获取dom的时候,不知不觉就用了这个方法,比如:jquery的$(".class").
    这个问题,后面再讲,我们先看一下这个方法的实例.
    */

    //获取所有的input元素
    var input = document.getElementsByTagName("input");

    //我们知道文档中有四个input,输出length
    console.log(input.length);//4

    //如果我们要获取其中的某一个或几个input,就只能循环获取了
    //如:获取class=btn1的按钮
    for(var i = 0,len = input.length; i < len; i++){
        var dom = input[i];
        //获取dom的class,注意dom属性中的class,属性名叫className
        //有一点可以留意的是,dom属性中,一般包含多个英文单词的或者属性带_的,在js中命名格式都是驼峰式.
        var name = dom.className;
        if(name === "btn1"){
            console.log(dom.value);//mybtn1,mybtn2
        }
    }

    /*
    其实这个方法还有更高效的使用方法,因为每一个dom对象都有这个方法.
    如:
    需要获取到id=mydiv所有的input子元素,我们就不需要先获取全部的,然后再循环.
    直接先得到mydiv的dom,然后通过mydiv的getElementsByTagName方法获取input元素
    */
    var mydiv = document.getElementById("mydiv");
    var input = mydiv.getElementsByTagName("input");

    //输出获取到的input
    for(var i = 0,len = input.length; i < len; i++){
        var dom = input[i];
        console.log(dom.value);//mybtn3,mybtn4
    }

    /*
    这个方法,还有一种用法,当传入特殊字符"*"的时候,将返回文档全部元素.
    这个功能,我们经常用来封装一些其他方式的获取dom方法.
    比如:
    使用jquery的时候,经常通过class获取dom,但是在DHTML中是没有这个方法的.
    */

    //获取全部元素
    var all = document.getElementsByTagName("*");
    for(var i = 0,len = all.length; i < len; i++){
        var dom = all[i];
        console.log(dom.tagName);//HTML,HEAD,META,TITLE,BODY,INPUT ...
    }

    /*
    扩展知识点:
    js获取dom的三个基本方法就这样了,当然js还有很多其它的方式获取dom元素.
    比如:
    通过层级关系,firstChild/lastChild/previousSibling/nextSibling
    父子关系查找等.parentNode/children/childNodes

    当然了在最新的js版本中,又加入了两个新的获取dom方法,并且效率很高.
    他们分别是:
    document.querySelector();
    document.querySelectorAll();
    他们只适用 IE8+，chrome，firefox
    */

</script>

转载于:https://www.cnblogs.com/cxy020/p/3812319.html

banxingbi2471

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取dom对象(3)

<html><head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>获取dom对象</title></head><body> <input c...
复制链接

扫一扫