JavaScript学习笔记--getElementById,getElementsByTagName,getElementsByClassName获取元素区分

注意,JavaScript语言区分大小写
有3种DOM方法可获取节点元素,分别是通过元素Id,标签名和类名字来获取

getElementById

这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。只有一个参数:元素的id值,id值必须写在单引号或双引号里。
document. getElementById(id)
例子:typeof操作符可以验证操作数是字符串,数值,函数。布尔值还是对象
在这里插入图片描述

getElementsByTagName

这个方法返回一个对象数组,每个对象分别对应着文档的标签元素。
参数是标签名。
element.getElementsByTagName(tag)
例子
在这里插入图片描述即使整个文档里这个标签只有一个元素,getElementsByTagName也返回一个数组,此时长度是1
在这里插入图片描述getElementsByTagName允许吧一个通配符(*)作为它的参数
例子:如果你想知道一个文档里共有多少个元素节点,可以这样写
document.getElementsByTagName("*").length

getElementByClassName

通过class属性中的类名来访问元素,返回值是一个数组

document. getElementsByClassName(class)
例子,返回包含类名为“liSecond”的所有元素的数组长度
在这里插入图片描述

要指定多个类名,只要在字符串参数中用空格隔开即可,类名的排列顺序不重要,元素带有更多的类名也可以
在这里插入图片描述有部分浏览器对getElementsByClassName方法不支持
这里提供一个大致相同的办法

//这个例子不适用于多个类名
//接受两个函数,node表示DOM树中的搜索起点,classname表示搜索类名
        function getElemenstByClassName(node, classname) {
        
            if (node.getElementByClassName)
            {
                //使用现有的办法
                return node.getElementByClassName(classname);
            }
            else
            {
                var results = new Array();
                //遍历循环所有标签
                var elems = node.getElementsByTagName("*");
            
                for (var i = 0; i < elems.length; i++) {
                    //查找带有相应类名的元素
                    if (elems[i].className.indexOf(classname) != -1)
                    {
                        results[results.length] = elems[i];

                    }
                }
                return results;
            }
        }
  • 13
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值