DOM中一些常见选择器的使用

在js中我们或多或少的都会使用到一些选择器,来选取相应的元素,以供后面的程序使用,下面我们就来对着实例,来了解一些DOM中一些常见选择器的使用规则**

首先,先来看看这些选择器使用的前提
在这里插入图片描述
 基本选择器:
id:document.getElementById(“id名”) id选择器一个页面一般只有一个
在这里插入图片描述在这里插入图片描述
class:document.getElementsByClassName(“class名”)
在这里插入图片描述在这里插入图片描述
tagName:document.getElementsByTagName(“标签名”);
在这里插入图片描述
在这里插入图片描述
name:document.ElementsByName(“name名”)
在这里插入图片描述
在这里插入图片描述
 ES5新增的两个选择器:
document.querySelector:一次只能选择一个,参数:类似于css的选择器,但只支持一些常用的
在这里插入图片描述在这里插入图片描述
document.querySelectorAll:选择所有符合要求的标签
参数:类似于css的选择器,但只支持一些常用的
返回值:返回一个数组;不能够直接获取数组中的元素,只能通过索引来获取
在这里插入图片描述
在这里插入图片描述
 关系选择器:根据标签之间的关系,选择指定的元素:
根据父元素选择子元素(所有的子元素)
在这里插入图片描述
在这里插入图片描述
子元素选择父元素:先获取子元素,再根据子元素获取父元素
在这里插入图片描述
在这里插入图片描述
父元素选子元素的基础上,延申:如何选择第一个和最后一个子元素:
在这里插入图片描述
在这里插入图片描述
兄弟选择器:先选择当前元素,然后在根据当前元素取选择其兄弟元素
在这里插入图片描述
在这里插入图片描述
总结:
js选择器选择到的元素都是对象,叫元素对象
js选择器选择到的如果是数组,虽然也是对象,但是叫数组对象,不能够直接操作
1.直接选择到元素对象:
如果选择到了,那就是这个元素,只有一个,叫元素对象
如果没选到就是null;
如:id,querySelector、关系选择器中子选父、
2.将选择到的元素对象放到一个(伪)数组中,伪数组:可以使用数组的索引和长度但是不能使用数组的方法
如果选择到了,放在了一个数组中,需要解析这个数组之后才能拿到元素对象
如果没有选择到那么也是一个数组,只不过是一个空数组,里面没有元素
如:class、name、tagName、querySelectorAll、关系选择器中父选子、

发布了9 篇原创文章 · 获赞 15 · 访问量 285

猜你喜欢

转载自blog.csdn.net/qq_44732010/article/details/104674420