javascript - 如何从 nodeList 获取元素？如何使用byTagname/ByClassName？

Question

看来我应该在使用 nodeType 之前注意它，否则会得到 Cannot read property '1' of null。出于这个原因，我越来越依赖于 document.querySelector 与 getElementbyTagname/getElementsByClassName。如何从 getElementsBy* 获取元素并使用它

现在我用这个，它有效:

var my_el = document.querySelector("some_long_path >div > form > div.field-invalid > textarea");
my_el.value="Hey, I input this into a text area ! :D" ;

如何从 getElementsBy* 中获取元素？ :

my_el = document.getElementsByName("emailform")[0][1]; //ERROR

我需要一个示例来说明如何遍历 getElementsBy 返回的节点列表？并获取一个元素来使用它。

Here is the form

Answer 1

NodeList 只不过是一个数组，尽管没有一些便利。您仍然可以使用数组表示法访问单个元素，尽管数组的 forEach 方法不可用(多年来没有检查过)，因此您可以自己动手。

function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
function allByClass(className,parent){return (parent == undefined ? document : parent).getElementsByClassName(className);}
function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);}
function forEachNode(nodeList, func){for (var i=0, n=nodeList.length; i<n; i++) func(nodeList[i], i, nodeList); }

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
  var liElems = allByTag('li');
  
  liElems[0].innerText += " (1st)";
  liElems[1].innerText += " (2nd)";
  liElems[2].innerText += " (3rd)";
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>