Question

我正在学习不使用jquery只有纯粹的javascript，只是启动并遇到麻烦..... 如何选择儿童dom

<div class="row-button">
    <input type="submit" />
</div>

我正在尝试下面的代码，但都显示错误消息。

var submit_button = document.getElementsByClassName("row-button");
console.log(submit_button.nodeType); //undefined
console.log(submit_button.firstChild); // undefined
console.log(submit_button.childNodes[0]);  // TypeError: 'undefined' is not an object (evaluating 'submit_button.childNodes[0]')

或者我认为可能需要添加窗口onload以确保dom准备就绪

window.onload = function () {
    var submit_button = document.getElementsByClassName("row-button");
    console.log(submit_button.nodeType); //undefined
    console.log(submit_button.firstChild); // undefined
    console.log(submit_button.childNodes[0]);  // TypeError: 'undefined' is not an object (evaluating 'submit_button.childNodes[0]')
}

Answer 1

注意：它是getElement s ByClassName。

这意味着它返回一个匹配元素的NodeList（类似数组的对象）。

尝试：

submit_button = document.querySelector(".row-button");

这不仅会增加对IE8的支持，还会返回一个元素，这是第一个具有所需类的元素。

Answer 2

getElementsByClassName("row-button")

返回类"row-button"的元素数组。因此，要获得第一个（并且仅在您的代码中），请使用

 var submit_button = document.getElementsByClassName("row-button")[0];

纯javascript选择儿童dom

2 个答案: