堆棧內存溢出
  簡體   English   中英

HTML中document.getElementsByName中的for循環

[英]for loop in document.getElementsByName in HTML

 原文  2018-03-02 11:41:54  3   6    javascript/ jquery/ html/ xml/ xslt

問題描述

我正在嘗試使用以下Javascript代碼通過elementName訪問每個節點： 

 function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { if (h1[i].name == "demoNode") { var att = h1[i].createAttribute("class"); att.value = "democlass"; h1[i].setAttributeNode(att); } } } 
 .democlass { color: red; } 
 <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p> <button onclick="myFunction()">Try it</button>

該代碼應將標題文本着色為紅色。 但這似乎對我不起作用。 你能讓我知道為什么嗎？ 這是jsfiddle的演示鏈接

6 個解決方案

解決方案1
 1 已采納  2018-03-02 11:48:23

  • 要獲取名稱的屬性值，請使用h1[i].getAttribute("name")
  • 要設置屬性類，請使用h1[i].setAttribute("class","democlass")

另外，您不需要if條件，因為要獲取的元素已經在使用name了。 

 function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { h1[i].setAttribute("class", "democlass"); } } 
 .democlass { color: red; } 
 <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p> <button onclick="myFunction()">Try it</button>

解決方案2
 1  2018-03-02 11:59:58

除了for loop您還可以使用map ：

但是首先我們需要將NodeList的實例轉換為數組，因為document.getElementsByName返回了nodelist。 

 function myFunction() { var h1 = document.getElementsByName("demoNode"); Array.prototype.map.call(h1, (key) => key.setAttribute('class','democlass')) } 
 .democlass { color: red; } 
 <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p> <button onclick="myFunction()">Try it</button>

解決方案3
 1  2018-03-02 12:08:48

正如標記了jQuery一樣，我創建了一個jQuery代碼段，該代碼段與您要執行的操作相同。 這樣做的好處是不需要定義myFunction ，並且一般來說它的代碼更少。 這是jsFiddle

jQuery的 

$("document").ready(function () {
    $("button").click(function () {
        $("[name='demoNode']").each(function (elem) {
            $(this).addClass("democlass");
        });
    });
});

解決方案4
 0  2018-03-02 11:55:31

首先，您的代碼包含少量語法錯誤。

您不能僅使用來檢索或設置元素的屬性. 。 所以下面的代碼是錯誤的h1[i].name ，它應該像這樣： 

var val = h1[1].getAttribute("name");
   or
h1[1].setAttribute("name", "value");

另外一個是您不需要創建class屬性，因為它是原始屬性，它總是包含在每個元素中。 因此，您只需為其分配類名即可。 

 function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { h1[i].setAttribute("class", "democlass"); } } 
 .democlass { color: red; } 
 <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p> <button onclick="myFunction()">Try it</button>

解決方案5
 0  2018-03-02 11:59:44

您還可以使用HTMLElement的屬性classList及其方法add。 https://developer.mozilla.org/en-US/docs/Web/API/Element/classList 

 function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { h1[i].classList.add('democlass'); } } 
  .democlass { color: red; } 
 <!DOCTYPE html> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p> <button onclick="myFunction()">Try it</button>

而且，您需要在JSFiddle中為JS選擇負載類型“ In head”，以使功能可用。 https://jsfiddle.net/8s5fw33e/

解決方案6
 0  2018-03-02 12:05:51

正如其他人所說，檢查是多余的。

首先，用於檢查屬性名稱值的if條件為false。 要獲取屬性值，請使用getAttribute("attribute_name") 。 第二部分無效，是h1[i].createAttribute() 

 function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { if (h1[i].getAttribute("name") == "demoNode") { var att = document.createAttribute("class"); att.value = "democlass"; h1[i].setAttributeNode(att); } } } //myFunction(); 
 .democlass { color: red; } 
 <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <h1 name="demoNode">Hello World</h1> <p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p> <button onclick="myFunction()">Try it</button>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 document.getElementsByName 找不到元素 document.getElementsByName（）不是Firefox中的函數 form.getElementsByName 不是 function，但 document.getElementsByName 是 javascript：document.getElementsByName(&quot;sample[]&quot;) 不起作用 YUI3.0 中的 document.getElementsByName(&quot;&quot;) 等效 在IE上，document.getElementsByName不起作用 使用document.getElementsbyName（）獲取數組的長度 在數組中執行 document.getElementsByName C# 中的 jscript document.getElementsByName 如何總結javascript document.getElementsByName
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM