css nth-child nth-last-of-type with javascript - 没有jquery

Question

是否有可能只使用纯javascript到nth-child（）和nth-last-of-type（）来吸引（没有jquery）？我想在很大程度上避免使用jquery。

Answer 1

使用document.querySelectorAll。

例如

var elements = document.querySelectorAll('div:nth-child(5)');

---

document.querySelectorAll

  

<强>摘要

     

返回文档中元素的列表（使用depth-first   与指定匹配的文档节点的预订遍历）   选择者组。返回的对象是NodeList。

     

<强>语法

     

elementList = document.querySelectorAll（selectors）;

     

，其中

     

elementList 是元素对象的非实时NodeList。

     

选择器是一个包含一个或多个以逗号分隔的CSS选择器的字符串。

     

返回的NodeList将包含文档中的所有元素   由任何指定的选择器匹配。如果是选择者   string包含一个CSS伪元素，返回的elementList将是   空。

Answer 2

This should help。您可以使用它来通过类名获取所需的元素。如果没有类，你也可以.getElementById。

var x = document.getElementsByClassName("class-name")[index#];

在此处查看：JSFiddle

Answer 3

使用CSS ：last-child 选择器

：last-child 选择器匹配 其父的最后一个子元素。

例如

var elements = document.querySelectorAll('div:last-child');

console.log(elements);

// example output
// NodeList(32)[div.container, div, div, ...]

参考：https://www.w3schools.com/cssref/sel_last-child.asp