使用document.getElementByID和document.form有什么区别?

时间:2014-02-02 22:31:02

标签: javascript html forms

我试图通过简单的编程思想来教自己javascript。我的任务是自己计算两个数字,并通过使用四个可用运算符中的任何一个来提供总结果。这是一个非常简单的计算器,以达到目的。我认为我不需要复制我的HTML代码 - 所以我只是发布了我的javascript。

由于我是一般编程和javascript的新手,我环顾网络并找到了一些代码指针。

<script>
function add() {
        var entry1 = document.getElementById("entry1").value;
        var entry2 = document.getElementById("entry2").value;
        var sum = Number(entry1)+Number(entry2);
        document.getElementById("results").value=sum    
 }

function sub() {
        var entry1 = document.form.entry1.value;
        var entry2 = document.form.entry2.value;
        var sum = Number(entry1)-Number(entry2);
        document.form.results.value=sum    
}

function multi() {
        var entry1 = document.form.entry1.value;
        var entry2 = document.form.entry2.value;
        var sum = Number(entry1)*Number(entry2);
        document.getElementById("results").value=sum    
}

function div() {
        var entry1 = document.form.entry1.value;
        var entry2 = document.form.entry2.value;
        var sum = Number(entry1)/Number(entry2);
        document.getElementById("results").value=sum    
}
</script>

我认为这可以让你深入了解我正在玩的东西。我觉得有趣的是我找到了一种使用document.getElementByID的方法,但我想我想要了解的是如何使用这两种方式...... document.form...document.getElementById

使用“document.getElementById”将搜索整个DOM,查找“entry1”。 “document.form”中的“Form”是指将整个内容封装在<body>标记中的表单。作为一个理论,我在<div name="blah">前面做了一个<form name="form">标记,看看如果我将document.form更改为document.blah它是否会使用“blah”...它就会崩溃。当我尝试document.blah.form.entry1 ....)时发生了同样的事情。我想你可以看到我的目标。

我很好奇为什么document.form.entry1.value;的作用类似于document.getElementById("entry1").value;

3 个答案:

答案 0 :(得分:0)

正如其他人所提到的,document.getElementById将用于选择特定元素而不管它是什么。 document.forms用于专门定位表单及其元素。

答案 1 :(得分:0)

我认为document.form指向命名或标识为ID的特定表单,例如<form name="form" id="form">
请仔细检查语法document.forms而不是document.<an_identifier>
document.<an_identifier>可能是IE的方言。

答案 2 :(得分:-1)

对我来说,它只是一种语法糖。

你在哪里找到“有趣”的样本?让我稍微重构一下。希望它能帮助你更好地理解主要思想。

<script>



function add(a,b) {
       return Number(a) + Number(b);
 }

function sub(a,b) {
         return Number(a) - Number(b);
}

function multi(a,b) {
        return Number(a) * Number(b);
}

function div(a,b) {
        return Number(a) / Number(b);
}

function main () { //as an entry point;
  var entry1 = document.getElementById('entry1').value,
      entry2 = document.getElementById('entry2').value;
      $results =  document.getElementById("results");

  $results.value = add (entry1, entry2);
  //$results.value = sub (entry1, entry2);
  //$results.value = multi (entry1, entry2);
  //$results.value = div (entry1, entry2);
}
</script>
顺便说一句:即使是功能也是多余的,但是我可以保留原样。

享受JS世界