答案：我需要给其他元素加载时间。因此，我在下面的代码周围添加了一个setTimeout方法。
当我尝试将类或样式添加到流时，列表中的前4个元素会发生更改，但其他元素不会。我不知道这是否是querySelectorAll或CSS的问题。
此外，类节点被添加到项中，但没有添加到流中，这让我相信它与querySelectorAll有关。
这甚至可能是我为之扩展的网站上其他类的错。
问题代码如下：
var streams = document.querySelector("#sideNav").querySelector(".side-bar-contents").querySelector(".tw-relative").querySelectorAll(".tw-transition");
// putting varies attributes and moving follwed to created div
var list = document.createElement("ul");
var number = 0;
streams.forEach((stream) => {
console.log(stream);
// Stream info
stream.id = number;
stream.setAttribute("draggable", "true");
stream.className = '';
// List info
var item = document.createElement("li");
item.setAttribute("draggable", "true");
item.classList.add("node");
item.id = number;
// adding to html
item.appendChild(stream);
list.appendChild(item);
//stream.classList.add("node");
number += 1;
});
清单文件：
"manifest_version": 2,
"name": "TFO",
"version": ".1",
"homepage_url": "https://github.com/obsasiyo147/TFO",
"description": "An extention that helps you orginaize your follows in a variety of ways.",
"content_scripts": [
{
"matches": ["*://*.twitch.tv/*"],
"js": ["TFO.js"],
"css":["TFO.css"]
}
]
}
当代码运行时，前4个看起来如何：
<div style="transition-property: transform, opacity; transition-timing-function: ease; transition-delay: 0ms; transition-duration: 250ms;" class="" id="0" draggable="true"><div>
其余部分的外观：
<div style="transition-property: transform, opacity; transition-timing-function: ease; transition-delay: 0ms; transition-duration: 250ms;" class="tw-transition tw-transition--enter-done tw-transition__scale-over tw-transition__scale-over--enter-done" id="6" draggable="true"><div>
我不得不删除列表中的一些元素，但在id 6处对类所发生的事情，就是我必须删除的div在stackoverflow上所发生的。
来自sideNav的代码如下：
<div id="sideNav" class="">
<div class="side-nav side-nav--expanded tw-c-background-alt tw-flex-shrink-0 tw-full-height"
data-test-selector="side-nav" data-a-target="side-nav-bar">
<div class="tw-flex tw-flex-column tw-full-height">
<div class="side-nav__overlay-wrapper tw-flex tw-full-height tw-overflow-hidden tw-relative">
<div class="tw-flex-grow-1 scrollable-area scrollable-area--suppress-scroll-x"
data-test-selector="scrollable-area-wrapper" data-simplebar="init">
<div class="simplebar-track vertical" style="visibility: visible;">
<div class="simplebar-scrollbar" style="top: 2px; height: 593px;"></div>
</div>
<div class="simplebar-track horizontal" style="visibility: visible;">
<div class="simplebar-scrollbar" style="left: 2px; width: 185px;"></div>
</div>
<div class="simplebar-scroll-content" style="padding-right: 17px; margin-bottom: -34px;">
<div class="simplebar-content side-nav__scrollable_content"
style="padding-bottom: 17px; margin-right: -17px;">
<div>
<div
class="collapse-toggle tw-absolute tw-flex tw-flex-grow-0 tw-flex-shrink-0 tw-justify-content-center tw-mg-y-05 tw-pd-y-05 tw-right-0 tw-top-0 tw-z-above">
<button data-test-selector="side-nav__visibility-toggle"
aria-label="Collapse Side Nav" data-a-target="side-nav-arrow"
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-inline-flex tw-justify-content-center tw-overflow-hidden tw-relative"><span
class="tw-button-icon__icon">
<div style="width: 2rem; height: 2rem;">
<div class="ScIconLayout-sc-1bgeryd-0 kbOjdP tw-icon">
<div class="ScAspectRatio-sc-1sw3lwy-1 dNNaBC tw-aspect">
<div class="ScAspectSpacer-sc-1sw3lwy-0 gkBhyN"></div><svg
width="100%" height="100%" version="1.1" viewBox="0 0 20 20"
x="0px" y="0px" class="ScIconSVG-sc-1bgeryd-1 cMQeyU">
<g>
<path
d="M16 16V4h2v12h-2zM6 9l2.501-2.5-1.5-1.5-5 5 5 5 1.5-1.5-2.5-2.5h8V9H6z">
</path>
</g>
</svg>
</div>
</div>
</div>
</span></button></div>
<div class="side-bar-contents">
<div class="">
<div class="tw-flex-grow-1" id="dropzone">
<div class="side-nav-section tw-flex tw-flex-column" aria-label="Organizer"
role="group">
<div class="side-nav-header tw-mg-1 tw-pd-t-05"
data-a-target="side-nav-header-expanded" role="group">
<h5 class="same-font">ORGANIZER CHANNEL</h5>
</div>
<div class="tw-relative tw-transition-group">
<ul>
<li draggable="true" class="node" id="0">
<div style="transition-property: transform, opacity; transition-timing-function: ease; transition-delay: 0ms; transition-duration: 250ms;"
class="" id="0" draggable="true">
<div>
<div class="side-nav-card tw-relative ffz--side-nav-card-offline"
data-test-selector="side-nav-card"><a
class="side-nav-card__link tw-align-items-center tw-flex tw-flex-nowrap tw-full-width tw-link tw-link--hover-underline-none tw-pd-x-1 tw-pd-y-05"
data-a-id="followed-channel-0"
data-test-selector="followed-channel"
href="/arris_tier">
<div
class="side-nav-card__avatar side-nav-card__avatar--offline tw-align-items-center tw-flex-shrink-0">
<figure aria-label="Arris_Tier"
class="tw-avatar tw-avatar--size-30">
<img class="tw-block tw-border-radius-rounded tw-image tw-image-avatar"
alt="Arris_Tier"
src="https://static-cdn.jtvnw.net/jtv_user_pictures/85f5f83e-c20e-451c-a031-88c1cde3de5a-profile_image-70x70.png">
</figure>
</div>
<div
class="tw-ellipsis tw-flex tw-full-width tw-justify-content-between">
<div data-a-target="side-nav-card-metadata"
class="tw-ellipsis tw-full-width tw-mg-l-1">
<div
class="side-nav-card__title tw-align-items-center tw-flex">
<p data-a-target="side-nav-title"
class="tw-c-text-alt tw-ellipsis tw-ellipsis tw-flex-grow-1 tw-font-size-5 tw-line-height-heading tw-semibold"
title="Arris_Tier">
Arris_Tier</p>
</div>
<div class="side-nav-card__metadata tw-pd-r-05"
data-a-target="side-nav-game-title">
<p class="tw-c-text-alt-2 tw-ellipsis tw-font-size-6 tw-line-height-heading"
title="3 new videos">3 new
videos</p>
</div>
</div>
<div class="side-nav-card__live-status tw-flex-shrink-0 tw-mg-l-05"
data-a-target="side-nav-live-status">
<span
class="tw-c-text-alt tw-font-size-6">Offline</span>
</div>
</div>
</a></div>
</div>
</div>
</li>
<li draggable="true" class="node" id="1">
<div style="transition-property: transform, opacity; transition-timing-function: ease; transition-delay: 0ms; transition-duration: 250ms;"
class="" id="1" draggable="true">
<div>
<div class="side-nav-card tw-relative ffz--side-nav-card-offline"
data-test-selector="side-nav-card"><a
class="side-nav-card__link tw-align-items-center tw-flex tw-flex-nowrap tw-full-width tw-link tw-link--hover-underline-none tw-pd-x-1 tw-pd-y-05"
data-a-id="followed-channel-1"
data-test-selector="followed-channel"
href="/maria2000">
<div
class="side-nav-card__avatar side-nav-card__avatar--offline tw-align-items-center tw-flex-shrink-0">
<figure aria-label="Maria2000"
class="tw-avatar tw-avatar--size-30">
<img class="tw-block tw-border-radius-rounded tw-image tw-image-avatar"
alt="Maria2000"
src="https://static-cdn.jtvnw.net/jtv_user_pictures/ecad756f-821e-49ff-92ec-555908fff485-profile_image-70x70.png">
</figure>
</div>
<div
class="tw-ellipsis tw-flex tw-full-width tw-justify-content-between">
<div data-a-target="side-nav-card-metadata"
class="tw-ellipsis tw-full-width tw-mg-l-1">
<div
class="side-nav-card__title tw-align-items-center tw-flex">
<p data-a-target="side-nav-title"
class="tw-c-text-alt tw-ellipsis tw-ellipsis tw-flex-grow-1 tw-font-size-5 tw-line-height-heading tw-semibold"
title="Maria2000">Maria2000
</p>
</div>
<div class="side-nav-card__metadata tw-pd-r-05"
data-a-target="side-nav-game-title">
<p class="tw-c-text-alt-2 tw-ellipsis tw-font-size-6 tw-line-height-heading"
title="2 new videos">2 new
videos</p>
</div>
</div>
<div class="side-nav-card__live-status tw-flex-shrink-0 tw-mg-l-05"
data-a-target="side-nav-live-status">
<span
class="tw-c-text-alt tw-font-size-6">Offline</span>
</div>
</div>
</a></div>
</div>
</div>
</li>
<li draggable="true" class="node" id="2">
<div style="transition-property: transform, opacity; transition-timing-function: ease; transition-delay: 0ms; transition-duration: 250ms;"
class="" id="2" draggable="true">
<div>
<div class="side-nav-card tw-relative ffz--side-nav-card-offline"
data-test-selector="side-nav-card"><a
class="side-nav-card__link tw-align-items-center tw-flex tw-flex-nowrap tw-full-width tw-link tw-link--hover-underline-none tw-pd-x-1 tw-pd-y-05"
data-a-id="followed-channel-2"
data-test-selector="followed-channel"
href="/wetshrimp">
<div
class="side-nav-card__avatar side-nav-card__avatar--offline tw-align-items-center tw-flex-shrink-0">
<figure aria-label="WETSHRIMP"
class="tw-avatar tw-avatar--size-30">
<img class="tw-block tw-border-radius-rounded tw-image tw-image-avatar"
alt="WETSHRIMP"
src="https://static-cdn.jtvnw.net/jtv_user_pictures/8dd36e12-dbd4-478f-a1d4-993741bde041-profile_image-70x70.png">
</figure>
</div>
<li draggable="true" class="node" id="6">
<div style="transition-property: transform, opacity; transition-timing-function: ease; transition-delay: 0ms; transition-duration: 250ms;"
class="tw-transition tw-transition--enter-done tw-transition__scale-over tw-transition__scale-over--enter-done"
id="6" draggable="true">
<div>
<div class="side-nav-card tw-relative ffz--side-nav-card-offline"
data-test-selector="side-nav-card"><a
class="side-nav-card__link tw-align-items-center tw-flex tw-flex-nowrap tw-full-width tw-link tw-link--hover-underline-none tw-pd-x-1 tw-pd-y-05"
data-a-id="followed-channel-6"
data-test-selector="followed-channel"
href="/jonzherka">
<div
class="side-nav-card__avatar side-nav-card__avatar--offline tw-align-items-center tw-flex-shrink-0">
<figure aria-label="JonZherka"
class="tw-avatar tw-avatar--size-30">
<img class="tw-block tw-border-radius-rounded tw-image tw-image-avatar"
alt="JonZherka"
src="https://static-cdn.jtvnw.net/jtv_user_pictures/6679df7d-63e9-40c2-8cb7-6509c1db10f6-profile_image-70x70.png">
</figure>
</div>
<div
class="tw-ellipsis tw-flex tw-full-width tw-justify-content-between">
<div data-a-target="side-nav-card-metadata"
class="tw-ellipsis tw-full-width tw-mg-l-1">
<div
class="side-nav-card__title tw-align-items-center tw-flex">
<p data-a-target="side-nav-title"
class="tw-c-text-alt tw-ellipsis tw-ellipsis tw-flex-grow-1 tw-font-size-5 tw-line-height-heading tw-semibold"
title="JonZherka">JonZherka
</p>
</div>
<div class="side-nav-card__metadata tw-pd-r-05"
data-a-target="side-nav-game-title">
<p
class="tw-c-text-alt-2 tw-ellipsis tw-font-size-6 tw-line-height-heading">
</p>
</div>
</div>
<div class="side-nav-card__live-status tw-flex-shrink-0 tw-mg-l-05"
data-a-target="side-nav-live-status">
<span
class="tw-c-text-alt tw-font-size-6">Offline</span>
</div>
</div>
</a></div>
</div>
</div>
</li>
我认为选择器/页面本身可能有问题。您将querySelector链接起来的方式本质上没有什么问题。其行为应与document.querySelectorAll("#sideNav .side-bar-contents .tw-relative .tw-transition")相同
我建议在您的代码中添加一个debugger;语句&使用Firefox或Chrome的开发工具一行一行地浏览它，看看发生了什么。
需要注意的一点是：如果将stream.id和item.id都设置为number，那就是非标准HTML，因为ID应该是唯一的。其他网站确实有重复的ID(甚至是YouTube)，所以这不会造成问题，但我通常建议不要这样做
如果您在此页面上运行以下操作，您可以看到所有预期的更改都应用于"；溢出博客"侧面板。在Firefox&没有问题。包括添加node的类，尽管它不会出现在console.log中，因为在div获得类之前，您正在记录div。
var ul = document.querySelector("body")
.querySelector("#sidebar")
.querySelector(".s-sidebarwidget")
.querySelector("ul.d-block")
var divs = ul.querySelectorAll("div")
var number = 0;
divs.forEach((div) => {
debugger;
div.id = number;
div.setAttribute("draggable", "true");
div.className = '';
var li = document.createElement("li");
li.setAttribute("draggable", "true");
li.classList.add("node");
li.id = number;
li.appendChild(div);
ul.appendChild(li);
div.classList.add("node");
number += 1;
});
但是，是的，你的代码本身看起来不错。它可能是无害的，比如在页面加载时加载前4个条目，然后运行扩展，然后页面通过AJAX加载列表的其余部分。或者，可能是由于某种原因，它在第五元素上出错了。您可以用try catch包装该部分，并在出现错误时记录输出。例如，来自MDN
streams.forEach((stream) => {
try {
....
} catch (error) {
console.error(error);
}
});
您可以制作一个长选择器
它不会被路上的其他类混淆
let number = 0;
const process = stream => {
// Stream info
stream.id = number;
stream.setAttribute("draggable", "true");
stream.className = ''; // why?
// List info
var item = document.createElement("li");
item.setAttribute("draggable", "true");
item.classList.add("node");
item.id = number;
// adding to html
item.appendChild(stream);
list.appendChild(item);
//stream.classList.add("node");
number += 1;
};
const list = document.getElementById("list");
const divs = document.querySelectorAll("#sideNav .side-bar-contents .tw-relative .tw-transition")
divs.forEach(process)<div id="sideNav">
<div class="side-bar-contents">Content 1</div>
<div class="side-bar-contents">Content 2
<div class="tw-relative">Realtive 1</div>
<div class="tw-relative">Realtive 2
<span class="tw-transition">Transition 1</span>
<span class="tw-transition">Transition 2</span>
</div>
</div>
</div>
<div id="list"></div>