相关疑难解决方法(0)

做getElementsByClassName(等类似的功能getElementsByTagName和querySelectorAll)的工作方式相同getElementById,还是他们返回元素的数组？

我问的原因是因为我试图改变所有元素的样式getElementsByClassName.见下文.

//doesn't work
document.getElementsByClassName('myElement').style.size = '100px';

//works
document.getElementById('myIdElement').style.size = '100px';

我是Javascript初学者.

我正在通过它创建网页window.onload,我必须通过类名(slide)找到一堆元素,并根据某些逻辑将它们重新分配到不同的节点.我有一个函数Distribute(element),它将一个元素作为输入并进行分配.我想做这样的事情(例如这里或这里所概述的):

var slides = getElementsByClassName("slide");
for(var i = 0; i < slides.length; i++)
{
   Distribute(slides[i]);
}

然而这对我来说并没有什么魔力,因为getElementsByClassName实际上并没有返回数组,而是a NodeList,这是......

......这是我的推测......

...在函数Distribute内部被更改(在此函数中正在更改DOM树,并且发生某些节点的克隆).For-each循环结构也没有帮助.

变量幻灯片的行为确实是非确定性的,通过每次迭代,它都会大大改变元素的长度和顺序.

在我的情况下迭代NodeList的正确方法是什么？我在考虑填充一些临时阵列,但我不知道该怎么做......

编辑:

我忘了提到的重要事实是,在另一个内部可能有一个幻灯片,这实际上是slides由于用户Alohci我刚刚发现的变量.

我的解决方案是先将每个元素克隆到一个数组中,Distribute()然后逐个传递数组.

在提供关于问题属性的错误答案之后,我检查了元素的返回并找到了一种方法..item()Node.childNodes__proto__childNodesformforEach

所述forEach的方法Node.childNodes中没有的说明书中记载NodeList,在Methods以MDN,或接口节点列表,并没有出现在被提及迭代使用的forEach方法的节点列表或链接到该问题页; 虽然它出现在Chromium 50中.

该方法仅适用于相对较新版本的Chrome/Chromium吗？如果是,是否记录在案？

有没有关于forEach()方法的文件Node.childNodes？

document.querySelector("form").addEventListener("submit", function(e) {
  e.preventDefault();
  var form = e.target;
  form.childNodes.forEach(function(el) {
    if (el.tagName === "INPUT" && el.type !== "submit")
      snippet.log("name:" + el.name + ", value:" + el.value)
  });
});

<form>
  <input type="text" name="firstName" value="The first name">
  <input type="text" name="lastName" value="The last name">
  <input type="email" name="emailAddress" value="email@example.com">
  <br>
  <input type="submit" …

我试图为每个类名为 的元素分配一个单击事件director__card--iconBox。我选择这些元素的方式是通过getElementsByClassName. background-color在编写当前代码后，我正在测试将其父 div应用于红色的函数。最终目标是能够翻转 div 并显示稍后出现的 div 的背面。

const toggleButton = document.getElementsByClassName("director__card--iconBox");

toggleButton.forEach((el) =>
  el.addEventListener("click", (event) => {
    const card = event.target.parentElement.querySelector(".director__card");
    card.classList.toggle("open");
  })
);

我正在取回一个 HTMLCollection。我的想法是，由于 HTMLCollection，这不会起作用？我尝试过 querySelectorAll 返回节点列表，但 NodeList 返回空。

我尝试了很多方法来解决这个问题，但无法解决。

我的问题是我尝试<img>通过执行来选择所有内容

document.getElementsByTagName("img")

然后.src=text[x]像这样添加：

document.getElementsByTagName("img").src=text[x];

好吧，那是行不通的。我也尝试过使用这个：

var r = document.getElementsByTagName("img");
r.src=text[x];

再说一次，什么也没有。如果我使用这个代码（immg是所有的ID <img>）：

document.getElementById('immg').src=text[x];

它确实有效，但仅适用于第一个对象，因为它只搜索具有 ID 的一个元素immg，而不是所有元素。

我的完整代码：

第一个功能

function generateChar()
{
    var text = [
        "img/Water1.png",
        "img/Water2.png",
        "img/Water3.png",
        "img/Water4.png",
        "img/Water5.png",
        "img/Water6.png",
    ];
    var size = text.length;
    var x = Math.floor(size*Math.random());
    //document.getElementsByTagName("img").src=text[x];
    //document.getElementById('immg').src=text[x];
    var r = document.getElementsByTagName("img");

    r.src=text[x];
    //console.log(r);
}

其他有用的代码：

var nbDiv = 50;
for(var i = 0; i < nbDiv; i++){
    var div = document.createElement('div');
    var imgg = document.createElement('img'); …

我正在构建一个数组

const myCanvas = documen.getElementsByTagName('canvas')

它实际上是有效的。它返回给我这样的东西：

images: [
0: canvas,
1: canvas,
2: canvas
]

这是一个 Typescript 项目，我想迭代这个数组并转换每个图像以记录它。

像这样：

for (const image of myCanvas) {
      console.log(canvas.toDataURL());
    }

（我没有使用 foreach 因为它不适用于 HTMLCollectionOf 类型）

我需要迭代 getElementsByTagName 返回给我的 HTMLCollection。输出是Type 'HTMLCollectionOf' 必须有一个返回迭代器的 'Symbol.iterator' 方法

<div id="wpq2">
   <div class="subClass">
   <a id="linkTO" class="subClass">New Item</a>
   or
   <a class="subClass">edit</a>
   this list
   </div>
</div>

我想隐藏所有的东西，除了

   <a id="linkTO" class="subClass">New Item</a>

我无法访问 html ，我必须使用 javascript

我试过了

var parentID = document.getElementById('wpq2');
var sub = parentID.getElementsByClassName('subClass');
var lastChild = sub[0].lastChild;
lastChild.style.display = 'none';

使用javascript不知道该怎么做

请建议

我试图通过JavaScript点击元素中的所有隐藏类.这是我用来尝试这样做的虚拟代码:

    <style>
    .hidden {display:none;}
    </style>
    

    <div>Value 1</div>
    <div class="hidden">Value 2</div>
    <div class="hidden">Value 3</div>
    <div class="hidden">Value 4</div>
    
    
    <button onclick="removeHidden()">Show All</button>
    
    
    <script>
    function removeHidden()
    {
        var hidden = document.getElementsByClassName("hidden");
        for(var i=0; i<hidden.length; i++)
        {
            hidden[i].classList.remove("hidden");
        }
    }
    </script>

单击按钮时,我希望删除所有类"隐藏",但奇怪的是,它会从第二个div和第四个div中删除隐藏的类,但会跳过第三个.

我得到的结果是:

Value 1
Value 2
Value 4

知道为什么那是因为我真的不明白吗？

我也尝试过这段代码但结果相同:

var els = document.getElementsByClassName("hidden");

Array.prototype.forEach.call(els, function(el) {
    el.ClassList.remove("hidden");
});

我正在学习 DOM 操作并有一个 HTML 文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 class="test">
        Title
    </h1>
    <h2 class="test">
        Here is the list of all the programming languages:
    </h2>
    <ul>
        <li>JavaScript</li>
        <li>Python</li>
        <li>Go</li>
    </ul>
    <script>
        const test = document.getElementsByClassName('test');
        test.forEach(item => {
            console.log(item);
        });
    </script>
</body>
</html>

我尝试使用 forEach 方法访问 html 元素，但它给出错误，指出 test.forEach 不是函数。