javascript - 如何在表单标签中调用非表单元素

Question

给出以下标记：

<form>
    <p>Example text.</p>
    <label>My Label</label>
    <input type="text">
</form>

. . . 我如何从 HTMLCollection 表单中获取 p 元素。例如：

<script>
    var myForm = document.getElementsbyTagName('form')[0];
    console.log(myForm[0]);
</script>

此代码返回输入元素，而不是段落。那么，我将如何抓取该段落？

Answer 1

您也可以getElementsByTagName在表单上使用：

// Get the first paragraph element, if any
var p = myForm.getElementsByTagName('p')[0];

在现代浏览器上，您可以使用querySelector和querySelectorAll使用几乎任何 CSS 表达式：

// Get the first paragraph element, if any
var p = myForm.querySelector('p');

querySelector找到第一个匹配元素。querySelectorAll返回匹配元素的静态列表。

Answer 2

myForm.childNodes[1]将返回<p>Example text.</p>：

var myForm = document.getElementsByTagName('form')[0];
console.log(myForm.childNodes[1]);

jsFiddle 示例