css选择器querySelectorAll
* querySelectorAll(css的选择器)
* 通过css的选择器获取到的一组元素
* 获取的也是类数组
*
* 主语
* document 从整个页面去获取一组元素
* 父级 从父级下去获取一组元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
{# #color>li:first-child{#}
{# background: #ff0000;#}
{# }#}
{# #}
{# #color>li:nth-child(4){#}
{# background: yellow;#}
{# }#}
</style>
<script>
window.onload=function(){
var lis=document.querySelectorAll('li'); console.dir(lis); var color=document.getElementById('color');
var lis1=color.querySelectorAll('li');
var lis2=document.querySelectorAll('#color li');
console.dir(lis1);
console.dir(lis2); var lis3=document.querySelectorAll('#color ul li');
console.dir(lis3);
lis3[lis3.length-1].style.background='gold'; var greens=document.querySelectorAll('.green');
console.dir(greens);
greens[0].style.background='green'; var uls=document.querySelectorAll('ul');
console.dir(uls);
uls[2].style.background='blue';
}
</script>
</head>
<body>
<ul id="color">
<li>red</li>
<li class="green">green</li>
<li>blue</li>
<li>yellow</li>
<li>
<ul>
<li>pink</li>
<li>white</li>
<li>black</li>
<li>gold</li>
</ul>
</li>
</ul>
<ul class="color2">
<li>red</li>
<li class="green">green</li>
<li>blue</li>
<li>yellow</li>
<li>pink</li>
</ul>
</body>
</html>
css选择器querySelectorAll的更多相关文章
- FizzlerEx —— 另一个HtmlAgilityPack的CSS选择器扩展,
之前我介绍过HtmlAgilityPack的CSS选择器扩展——ScrapySharp,它可以非常方便的实现通过CSS选择器表达式来查询HtmlNode.今天在使用的过程中,发现它不支持nth-chi ...
- [2019.03.16]使用DOM操作函数和CSS选择器来针对已有的HTML进行只凭JS的改动
刚入职的时候看到公司用的HTML日志生成工具附带的Panel,工具不够用,找个Fail还要找半天,于是自己琢磨着添砖加瓦.以前也是个半吊子前端工程师,现在可倒好,想要改页面却连页面生成的模板在哪里都不 ...
- 怎样通过CSS选择器获取元素节点或元素节点集合
使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可. // 标签选择器 document.quer ...
- 前端面试题-CSS选择器
一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...
- jQuery原理系列-css选择器实现
jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- CSS选择器的权重与优先规则?
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
随机推荐
- NAS (Network Attached Storage)
当电脑硬盘容量满了,多数使用者第一个想法就是买一块几TB的硬盘来扩充,如果是笔电的使用者,第一个想到的是买一个外接式硬盘来备份资料,这样的想法并没有错,那是当你还不知道有「NAS」这个好用的东西,才会 ...
- 数据持久化系列之Mysql
一.命令行操作 1.显示所有库: show databases; 2.要操作某个库,比如库名: db_book:use db_book; 3.查看表的基本结构,比如表名: t_book:desc t_ ...
- node day2 vue read html
app.js var http = require("http"); var fs = require('fs'); var url = require('url'); http. ...
- github与github网站push神器
GitBook.Editor(全英文,无汉化) 链接: http://pan.baidu.com/s/1slIZ5jJ 密码: q9mw source tree (汉化中文) 本地需要安装git客户端 ...
- C# Android 开发中使用 Sqlite.NET ORM
开发环境:VS2015 Xamarin Sqlite.NET ORM 不就相当于 Entiry Framework For Xamarin 吗? 相当于用 C# 开发安卓程序访问 Sqlite 可以使 ...
- PythonStudy——三种字符串 Three strings
# 普通字符串:u'以字符作为输出单位'print(u'abc') # 用于显示 # 二进制字符串:b'' 二进制字符串以字节作为输出单位print(b'abc') # 用于传输 # 原义字符串:r' ...
- Flask 框架
装饰器知识回顾 http://www.cnblogs.com/0bug/p/7978595.html 普通装饰器格式: def wrapper(func): def inner(*args, **kw ...
- 测试WCF遇到的一些问题
win7+iis7 1.localhost访问bad request错误. 主机地址不要指定为127.0.0.1.设置为”全部未分配“. 2.错误 500.19(由于权限不足而无法读取配置文件)的问题 ...
- 解决mysqli的中文乱码问题
有时候我们向服务器传汉字,出现内容为空,或???的问题,是因为mysqli对utf8的解码属于 Unicode码,会解析为 Unicode 码:所以我们要对内设置成gbk码, 尽管gbk码,很古来,但 ...
- 干掉hao123劫持浏览器主页
原因可能是安装某个软件流氓捆绑了IE主页导致的,建议这样尝试: 一.如果安装有三方安全防护类软件,排查流氓软件,建议运行系统自带的Windows Defender或者MSE程序扫描系统. 二.如果有检 ...