点击切换帐号登陆
帐号密码登陆

通过CSS选择器语法来获取元素

# 通过CSS类选取元素

## 1. DOM方法

* `getElementsByClassName()`: 参数是CSS选择器
* CSS选择器: 一个或多个用空格分隔的字符串
* 在HTML文档与HTML元素均可调用
* `class`是`JS`关键字,所以在元素上获取class属性值,使用`className`
* 该方法返回: `HTMLCollection`

---------------------------------------------------

## 2. 选择器API

* `querySelectorAll()`: 获取所有满足条件的节点列表
* `querySelector()`: 获取所有满足条件的第一个节点
* 均返回 `NodeList`
* 不支持伪类选择器

---------------------------------------------------

## 3. document.all[]

* `document.all[]`: 返回HTML文档中所有元素
* 目前已被标准DOM方法替代,如`getElementsByTagName()...`
* 尽管如此, 有时用这个属性还是非常方便的

---------------------------------------------------

## 4. 示例源码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getElementsByClassName()</title>
</head>
<body>
<ul>
<li class="item"></li>
<li class="item red"></li>
<li class="item"></li>
</ul>
<script>
var items = document.getElementsByClassName('item');
console.log(items);  // HTMLCollection, 3
// 获取第二个节点的class属性的值
var first = items[1];
console.log(first.className);

var items = document.getElementsByClassName('item red');
console.log(items);  // HTMLCollection, 1

// querySelectorAll(): 根据css选择器返回所有满足条件的节点列表
var items = document.querySelectorAll('.item');
console.log(items);  // NodeList

// querySelector():根据css选择器返回所有满足条件的第一个节点
var items = document.querySelector('.item');
console.log(items);  // Element Object

// document.all
console.log(document.all); // HTMLCollection, 10
console.log(document.all[3]); // 第3个, <title>
</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号