在Javascript中获取DOM元素

Question

I am complete beginner in JS, so pardon my ignorance. 我是JS的初学者，请原谅我的无知。 I also didn't manage to find the answer to my question, although, undoubtedly, someone must have asked it before... so I'm posting here. 我也没有设法找到我的问题的答案，尽管毫无疑问，一定有人曾经问过它...所以我在这里发布。

Here is a simple form I wrote: 这是我写的一个简单表格：

    <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>

and here is the JS function inside the scripts tag following the body 这是主体后面的scripts标记内的JS函数

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

Now, this doesn't work and I have been told what to do to make it work, eg 现在，这行不通，并且有人告诉我如何使它生效，例如

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

however, I would like to know why does it not work. 但是，我想知道为什么它不起作用。 I just imagined the DOM model in my head, and contructed the path that leads toward the element I want to select, ie 我只是想像中的DOM模型，并构造了通往我要选择的元素的路径，即

document.body.prvaForma.first.value

You can clearly see the DOM hierarchy here, and in the end, selecting the member "value" of the element. 您可以在此处清楚地看到DOM层次结构，最后选择元素的成员“值”。

I've been mostly programming in MATLAB and C, and I have some OO background in C++. 我主要是使用MATLAB和C进行编程，并且具有C ++的OO背景。 JS seems awfully confusing right now, so any help is appreciated. JS现在似乎非常令人困惑，因此可以提供任何帮助。

Answer 1

As you are taking your first steps in JS, I recommend using the developer console to debug and explore the language. 在您开始使用JS的第一步时，建议您使用开发者控制台来调试和探索该语言。 Open in with the F12 key. 用F12键打开。

Now, being specific to your question, take a look at the documentation of document.forms , you might find it useful to select values inside forms. 现在，针对您的问题，看看document.forms的文档，您可能会发现在表单内选择值很有用。

Answer 2

This is what DOM level 0 looks like (DOM2 and 3 are almost identical) - http://www.technologyuk.net/the_internet/web/document_object_model.shtml 这就是DOM级别0的样子（DOM2和3几乎相同）-http: //www.technologyuk.net/the_internet/web/document_object_model.shtml

So to access your form items you would use 因此，要使用您的表单项

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

Answer 3

I just imagined the DOM model in my head, and constructed the path that leads toward the element I want to select, ie 我只是想像中的DOM模型，并构造了通往我要选择的元素的路径，即
 document.body.prvaForma.first.value 

But DOM nodes do not have properties on them that match such paths! 但是DOM节点上没有与此类路径匹配的属性！ They only would collide with regular properties. 它们只会与常规属性发生冲突。

DOM nodes do have properties that allow them to access parent and child nodes (which builds up the DOM tree), and they do store some information about the node itself (tagname, attributes such as id or class ). DOM节点确实具有允许它们访问父节点和子节点（它们构成DOM树）的属性，并且确实存储了有关节点本身的一些信息（标记名，诸如id或class属性）。

Usually, you would use methods on them to find nodes in the tree, the most prominent of which is by using DOM selectors (you know them from CSS). 通常，您将对它们使用方法来在树中查找节点，其中最突出的是通过使用DOM选择器（您从CSS中知道它们）。 Including shortcut methods like getElementById or getElementsByClassName . 包括快捷方式方法，例如getElementById或getElementsByClassName 。

And then there are some shortcut properties on the nodes, like .children which yields a collection of all element-typed child nodes. 然后，节点上有一些快捷方式属性，例如.children ，它产生所有元素类型的子节点的集合。 Similarly, there is a .body shortcut on the document which accesses the <body> node in the document. 同样， document上有一个.body快捷方式，用于访问document中的<body>节点。 But these are exceptions! 但是这些都是例外！

The exception you might be looking for is the .forms collection , which holds all the <form> elements in a document by their name (attribute). 您可能正在寻找的例外是.forms集合，该集合按名称（属性）保存文档中的所有<form>元素。 And each form has an .elements collection , which holds inputs in that formular by their name (attribute). 每个表单都有一个.elements集合，该集合按名称（属性）将输入保留在该公式中。 So you might use 所以你可能会用

document.forms["forma"].elements["firstField"]

but accessing the input by its id is much cleaner. 但是通过其id访问输入要干净得多。

在Javascript中获取DOM元素

问题描述

3 个解决方案

解决方案1
0 2014-06-09 13:37:47

解决方案2
0 2014-06-09 13:38:51

解决方案3
0 已采纳 2014-06-09 13:39:28

在Javascript中获取DOM元素

问题描述

3 个解决方案

解决方案1 0 2014-06-09 13:37:47

解决方案2 0 2014-06-09 13:38:51

解决方案3 0 已采纳 2014-06-09 13:39:28

解决方案1
0 2014-06-09 13:37:47

解决方案2
0 2014-06-09 13:38:51

解决方案3
0 已采纳 2014-06-09 13:39:28