在javascript中按名稱獲取子節點

Question

如何獲得具有特定名稱的html標記的所有子代？

假設我有一個<div>看起來像這樣

<div id=test>
    <input name=test1/>
    <input name=test2/>
</div>

如果我有div元素，如何獲得名稱為test1或test2的孩子？ 我試過了

div.getElementsByName('test1')

但這行不通嗎？

Answer 1

document.querySelector('input[name="test1"]')

或者，如果您要定位特定元素的特定子元素：

var test = document.querySelector('#test')
var test1 = test.querySelector('input[name="test1"]');
window.console.log(test1)

Answer 2

您的初始代碼無效，因為html中的名稱屬性未用引號引起來。 他們應該是：

<div id=test>
  <input name="test1" />
  <input name="test2" />
</div>

請注意，即使您期望並收到一個結果， getElementsByName也會返回一個匹配元素的實時NodeList，它是一個類似於數組的對象。

---

如果您只想接收一個元素，而不是只包含一個元素的數組，那么我在下面提供了幾種選擇：

使用id屬性：如果您知道您的名字在整個文檔中將是唯一的 ，我建議您使用id代替name或class屬性。 這樣做將允許：

HTML：

 <div id=test> <input id="test1" name="test1"/> <input id="test2" name="test2"/> </div> 

JavaScript：

 document.getElementById("test1"); 

使用 document.querySelector ：

如果仍然需要使用name屬性，則可以將document.querySelector與以下選擇參數一起使用：

 document.querySelector('div > input[name="test1"]') 

document.querySelector返回文檔中與選擇參數匹配的第一個元素。

在上面的示例中，返回第一個元素，它是名稱屬性等於“ test1”的input ，它是div的子級。

Answer 3

選項1：

var x = document.getElementsByName("test1");

選項2：

var x = document.querySelectorAll("input[name='test1']");

在這兩種情況下，您都將獲得數組作為響應：x [0]，x [1]，...

div.getElementsByName（'test1'）

由於getElementsByName是文檔對象的方法而無法使用，您只能調用document.getElementsByName（'elementName'）。

Answer 4

如果要獲取具有包含部分匹配項的值的任何標簽，請將querySelectorAll與屬性選擇器和子字符串匹配項一起使用。

var tags = document.querySelectorAll('*[name*="test"]');
console.log(tags);