javascript - 在 Javascript 中指定文档元素

Question

我想在前面部分选择特定值时显示输入表单的隐藏部分。

为什么这个 Javascript 工作

  function unhideRecipient() {
    var recipDiv = document.getElementById("recipientDetails");
    // recipient1 = document.getElementById("recipient1");   // ?????
    if (recipient1.value == "0") {                           // ?????
      recipDiv.style.display = "block";
    } else {
      recipDiv.style.display = "none";
    }
  }

鉴于此 HTML

<form>
  <label>Recipient:</label>
  <select name="recip1" id="recipient1" onchange="unhideRecipient()">
    <option value="1">Alice Doe</option>
    <option value="2">Bobby Poe</option>
    <option value="3">Clive Roe</option>
    <option value="0">Other ...</option>
  </select>
  <br />
  <div id="recipientDetails">
    <label>Name:</label>       <input type="text"> <br />
    <label>StreetName:</label> <input type="text"> <br />
    <label>City:</label>       <input type="text"> <br />
  </div>
</form>

有了这种风格

  label { display: inline-block; width: 6em; text-align: right; }
  div#recipientDetails { display: none; }

我曾期望在 Javascript 中需要注释掉的变量赋值，但它似乎只使用元素id属性值就好像它是一个对象名称一样工作。

我是否误解了 - 我在哪里可以阅读更多关于此的信息？

https://codepen.io/anon/pen/ydgpML

标签： javascriptdom