html js 选择器,js-选择器大全

选择器

- 元素节点选择器(只有元素节点)

- 直接选择器

- 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