文档章节

页面元素查找之Selectors API

尼阿卡
 尼阿卡
发布于 2016/04/11 10:30
字数 600
阅读 13
收藏 1

DOM操作    

在HTML5之前,页面元素查找使用的是原生javascript的方法,主要有以下三个基本的操作方法

1.getElementById(): 查找指定id值的元素

2.getElementsByName():查找指定name值得所有元素

3.getElementsByTagName():查找指定标签名的所有元素

    这几个方法用起来也挺方便的,但是DOM操作的代价是非常高的,因为这会导致浏览器执行回流操作,而执行了过多的回流操作后,你会发现网站变得越来越慢了,用户体验也就下降了,所以要尽量减少DOM操作。

DOM操作实例

//取得ID为mydiv的元素
var myDiv=document.getElementById("#myDiv");

//取得name为myName的所有元素。
var myName=document.getElementsByName("myName");

//取得标签为li的元素
 var myLi=document.getElementsByTagName("li");

Selectors API

    HTML5中引入了Selectors API, Selectors API致力于让浏览器原生支持CSS查找。Selectors API与现在CSS中使用的选择规则一样,通过它可以查找页面中的一个或多个元素。Selectors API 中有两个基本操作

1.querySelector():根据参数中指定的选择规则,返回在页面中找到的第一个匹配元素

2.querySelectorAll():根据参数中指定的选择规则,返回在页面中找到的所有匹配元素

    Selectors API 函数还支持或操作:

//返回类名为first或second的第一个元素
var selector = document.querySelector(‘.first’,‘.second’);

//返回类名为first或second的所有元素
var selector = document.querySelectorAll(‘.first’,‘.second’);

    对于queryselector来说,选择的是满足规则中任意条件的第一个元素。对于querySelectorAll来说,页面中的元素只要满足规则中的任何一个条件,都会被返回。不同规则间用逗号隔开。

Selectors API实例

//取得li元素
 var body=document.querySelector("li");
 
//取得ID为mydiv的元素
var myDiv=document.querySelector("#myDiv");

//取得类为“Selected”的第一个元素
var selected = document.querySelector(".selected");

//取得类为button的第一个图像元素
var imgs=document.querySelector("img.button");

//取得<div>中的所有em元素。
var ems=document.getElementById("myDiv").querySelectorAll("em");

//取得所有<p>元素中的所有<span>元素
var spans  = document.querySelectorAll("p span");

© 著作权归作者所有

尼阿卡
粉丝 3
博文 24
码字总数 8902
作品 0
珠海
程序员
私信 提问
querySelectorAll() 和 getElementBy() 方法的区别

querySelectorAll和getElementsBy方法都可以用在element上,但是querySelector作用于Element、nodeList、DocumentFragment时的查找范围是从整个文档开始,返回的是一个 Static Node List(对于...

晚风0623
2018/12/03
144
0
Html CSS学习(四)CSS选择器

CSS选择器 Html用于呈现网页的内容与结构,CSS用于设置页面中内容的外观,即表现形式,在对内容进行样式的设置时,首先要选择欲应用样式的内容,这主要通过CSS的选择器进行。本部分内容主要对...

AzureMonkey
01/14
21
0
Scrapy 示例 —— Web 爬虫框架

在这个教材中,我们假定你已经安装了Scrapy。假如你没有安装,你可以参考这个安装指南。 我们将会用开放目录项目(dmoz)作为我们例子去抓取。 这个教材将会带你走过下面这几个方面: 创造一个新的...

西门飞
2013/07/09
24.2K
31
Jsoup解析HTML实例及文档方法详解

如何解析一个HTML文档: 代码如下: String html = "<html><head><title>First parse</title></head>" + "<body><p>Parsed HTML into a doc.</p></body></html>";Document doc = Jsoup.parse......

小湘西
2015/11/19
176
0
使用Python的Scrapy框架编写web爬虫的简单示例

在这个教材中,我们假定你已经安装了Scrapy。假如你没有安装,你可以参考这个安装指南。 我们将会用开放目录项目(dmoz)作为我们例子去抓取。 这个教材将会带你走过下面这几个方面: 创造一个新的...

Airship
2016/04/09
158
1

没有更多内容

加载失败,请刷新页面

加载更多

mysql-connector-java升级到8.0后保存时间到数据库出现了时差

在一个新项目中用到了新版的mysql jdbc 驱动 <dependency>     <groupId>mysql</groupId>     <artifactId>mysql-connector-java</artifactId>     <version>8.0.18</version> ......

ValSong
今天
5
0
Spring Boot 如何部署到 Linux 中的服务

打包完成后的 Spring Boot 程序如何部署到 Linux 上的服务? 你可以参考官方的有关部署 Spring Boot 为 Linux 服务的文档。 文档链接如下: https://docs.ossez.com/spring-boot-docs/docs/r...

honeymoose
今天
6
0
Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
今天
8
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
今天
5
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部