在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中的名称属性未包含在引号中。他们应该是：

th:field

请注意，即使您期望并收到一个结果，getElementsByName也会返回匹配元素的实时NodeList，这是一个类似于数组的对象。

如果你只想收到一个元素而不是一个包含一个元素的数组，我在下面提供了几个选择：

  

使用<div id=test> <input name="test1" /> <input name="test2" /> </div> 属性：如果您知道整个文档中的唯一，我会建议使用id而不是。{   名称或类属性。这样做可以实现：

     

HTML：

id

     

JavaScript的：

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

  

使用 document.querySelector：

     

如果您仍然需要使用name属性，那么您可以使用   document.querySelector具有以下选择   参数：

document.getElementById("test1");

     

document.querySelector返回第一个元素   与选择参数匹配的文档。

     

在上面的例子中，它说，返回第一个元素   document.querySelector('div > input[name="test1"]') ，其name属性等于“test1”，它是a的子级   input。

Answer 3

选项＃1：

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

选项＃2：

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

在这两种情况下，您都会得到数组作为响应：x [0]，x [1]，...

  

div.getElementsByName（＆＃39; TEST1＆＃39）

不起作用，因为getElementsByName是文档对象的方法，您只能调用document.getElementsByName（＆＃39; elementName＆＃39;）。

Answer 4

如果要获取包含部分匹配值的任何标记，请将querySelectorAll与属性选择器和子字符串匹配使用。

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