querySelector选择元素的子元素

querySelector选择元素的子元素可以通过使用父元素的children属性进行获取。例如，使用querySelector选择到的元素fu，可以通过fu.children来获取该元素的所有子元素节点。 另外，可以使用下标来获取具体的子元素节点，例如ul.children可以获取到ul元素的第一个子元素节点。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* *3* [获取父元素节点和子节元素节点，以及通过下标获取子元素节点](https://blog.csdn.net/weixin_49833951/article/details/113644112)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]

相关问题

querySelector选择子元素

querySelector() 方法用于选择文档中的第一个匹配指定选择器的元素。如果你需要选择所有匹配的元素，可以使用 querySelectorAll() 方法。下面是一个演示例子：

// 选择class为"example"的第一个子元素
var element1 = document.querySelector(".example");

// 选择id为"example"的第一个子元素
var element2 = document.querySelector("#example");

// 选择name为"example"的第一个子元素
var element3 = document.querySelector("[name='example']");

// 选择标签名为"div"的第一个子元素
var element4 = document.querySelector("div");

console.log(element1);
console.log(element2);
console.log(element3);
console.log(element4);

这个例子中，querySelector() 方法根据不同的选择器选择了不同的子元素，并将结果打印到控制台上。

document.querySelector选择非最后一个元素的元素

有多种方法可以选择非最后一个元素的元素，以下是其中一些常见的方法：

1. 使用:nth-last-child伪类

可以使用:nth-last-child伪类来选择除了最后一个子元素以外的所有子元素。例如，以下代码将选择ul元素中除了最后一个li元素以外的所有li元素：

ul li:not(:last-child) {
  /* CSS样式 */
}

2. 使用:nth-child伪类

类似于:nth-last-child，也可以使用:nth-child伪类来选择除了最后一个子元素以外的所有子元素。例如，以下代码将选择ul元素中除了最后一个li元素以外的所有li元素：

ul li:nth-child(-n+2) {
  /* CSS样式 */
}

3. 使用:last-child伪类

可以使用:last-child伪类来选择除了最后一个元素以外的所有同级元素。例如，以下代码将选择ul元素中除了最后一个li元素以外的所有li元素：

ul li:last-child:not(:last-of-type) {
  /* CSS样式 */
}

4. 使用JavaScript

可以使用JavaScript来选择非最后一个元素的元素，例如：

const elements = document.querySelectorAll('li');
for (let i = 0; i < elements.length - 1; i++) {
  elements[i].classList.add('my-class');
}

这将选择所有li元素并将“my-class”类添加到除了最后一个元素以外的所有元素中。