Question

我是JS的初学者，所以请原谅我的无知。我也没有设法找到我的问题的答案，但毫无疑问，有人必须先问过......所以我在这里发帖。

这是我写的一个简单表格：

    <head>
        <title>wowzy</title>
        <link href="stylesheet.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
       <form name="forma" id="prvaForma" action="/nonsense.php" method="POST">
           <label for="first">1st Value</label>
           <input id="first" type="text" name="firstField" value="1st Value here" onClick = 'check();'>
           <label for="second">2nd Value</label>
           <input id="second" type="text" name="2ndField" value="2nd Value here">
           <input type="submit" value="SUBMIT!">
       </form>
    </body>

这是主体

后面脚本标签内的JS函数

function check() {
    var v1 = document.body.prvaForma.first.value;
    alert("this is the value: " + v1);
}

现在，这不起作用，我被告知要做些什么来使其发挥作用，例如。

var v1 = document.getElementById("first").value

但是，我想知道它为什么不起作用。我只想到了脑中的DOM模型，并构建了通向我想要选择的元素的路径，即。

document.body.prvaForma.first.value

您可以在此处清楚地看到DOM层次结构，最后选择元素的成员“value”。

我主要使用MATLAB和C编程，我在C ++中有一些OO背景。 JS现在看起来非常混乱，所以任何帮助都会受到赞赏。

Answer 1

当您迈出JS的第一步时，我建议使用开发人员console来调试和探索该语言。使用F12键打开。

现在，针对您的问题，请查看document.forms的文档，您可能会发现在表单中选择值非常有用。

Answer 2

这是DOM级别0的样子（DOM2和3几乎完全相同） - http://www.technologyuk.net/the_internet/web/document_object_model.shtml

因此，要访问您使用的表单项

var ele = document.forms['prvaForma'].elements;
var val = ele['firstField'].value

Answer 3

我只想到了脑中的DOM模型，并构建了它的路径导致我想要选择的元素，即
document.body.prvaForma.first.value

但DOM节点上没有与这些路径匹配的属性！它们只会与常规属性发生冲突。

DOM节点确实具有允许它们访问父节点和子节点（构建DOM树）的属性，并且它们确实存储了有关节点本身的一些信息（标记名，id或{{等属性1}}）。

通常，你会在它们上使用方法来查找树中的节点，其中最突出的是使用DOM选择器（你从CSS中知道它们）。包括class或getElementById等快捷方式。

然后在节点上有一些快捷方式属性，例如getElementsByClassName，它产生所有元素类型子节点的集合。同样，.children上有一个.body快捷方式，用于访问文档中的document节点。但这些都是例外！

您可能正在寻找的例外是.forms collection，它按名称（属性）保存文档中的所有<body>元素。每个表单都有一个.elements collection，它通过名称（属性）保存表单中的输入。所以你可以使用

<form>

但是通过document.forms["forma"].elements["firstField"]访问输入更加清晰。

在Javascript中获取DOM元素

3 个答案: