选择器
- 元素节点选择器(只有元素节点)
- 直接选择器
- id选择器:document.getElementById("id名")
- class选择器:document.getElementsByClassName("class名")
- tag选择器:document.getElementsByTagName("tag名")
- name选择器:document.getElementsByName("name名")
- ES5新增选择器:
- querySelector选择器:document.querySelector("css选择器")
- querySelectorAll选择器:document.querySelectorAll("css选择器")
- 总结:
- 返回单个元素:
- id,querySelector
- 返回数组:
- class,tag,name,querySelectorAll
- 关系选择器:先有基准元素
- 父子关系
- 父选子:先拿到父
```js
// 父选子:先拿到父
var olist = document.querySelector(".list");
// var olist = document.getElementsByClassName("list")[0];
console.log(olist);
// 第一个子:
console.log(olist.firstElementChild);
// 最后一个子:
console.log(olist.lastElementChild);
// 所有子:
console.log(olist.children);
// 其他的子:
// console.log(olist.children[索引]);
```
- 子选父:先拿到子
```js
// var oEm = document.querySelector("em");
var oEm = document.getElementsByTagName("em")[0];
// 子选父:一个!直接的父级!
console.log(oEm.parentNode);
console.log(oEm.parentNode.parentNode);
```
- 兄弟关系
```js
// 先选择当前
var olist = document.querySelector(".list");
```
```js:
console.log(olist.previousElementSibling);
```
```js
console.log(olist.nextElementSibling);
```
标签:console,log,js,olist,document,选择器,大全
来源: https://www.cnblogs.com/piaoyi1997/p/12875739.html