时间戳

首页 > 解决方案 > 为什么不能用 document.forms 选择标签？

javascript - 为什么不能用 document.forms 选择标签？

问题描述

是否可以使用 document.forms 获取标签或 div ？

如果是。如何 ？

如果不。为什么 ？

当我尝试时，它给出“未定义”；

示例代码：

<form name="form1">
    <div id="div1">
        <label id="label1" for="uname">Username: </label> 
        <input type="text" id="uname" name="username" >
        <button id="button1" onclick="func1()" >Okay!</button>
    </div>
</form>

<script>
var form=document.forms['form1'];

function func1() {
    event.preventDefault(); // -
    console.log(form["uname"]); // gives input element
    console.log(form["button1"]); // gives buttonn element
    console.log(form["label1"]); // undefined
    console.log(form["div1"]); // undefined
    
    // I can get them like :
    console.log(form["uname"].previousElementSibling); // gives label element
    console.log(form["uname"].parentElement); // gives div element
    // ...etc
    // but, the questions is why I can't with document.forms
}
</script>

标签： javascripthtmlforms

解决方案

您不能选择 div 因为 div 不是表单元素的一部分。资源

var form=document.forms['form1'];

function func1() {
    event.preventDefault(); // -
    console.log(form["uname"]); // gives input element
    console.log(form["button1"]); // gives buttonn element
    console.log( form["uname"].labels[0] )
    console.log(form["div1"]); // cant select div, because div are not form element
    
    // I can get them like :
    console.log(form["uname"].previousElementSibling); // gives label element
    console.log(form["uname"].parentElement); // gives div element
    // ...etc
    // but, the questions is why I can't with document.forms
}
<form name="form1">
    <div id="div1">
        <label id="label1" for="uname">Username: </label> 
        <input type="text" id="uname" name="username" >
        <button id="button1" onclick="func1()" >Okay!</button>
    </div>
</form>

推荐阅读