JavaScript getElementById 短语法有效。使用起来可以吗？

Question

这是我的 HTML 代码:

<div id=demo1></div>
    <button onclick=demo()>this is button</button>
}

这是我的 JavaScript 代码:

function demo(){
  demo1.innerHTML="this is good syntax";
}

这是一个展示其如何完美工作的链接...在您说此语法不起作用之前请先检查该链接。

https://codepen.io/navehazan/pen/QgEeOr

我的问题是，当我只能使用 demo1.innerHTML 时，为什么还要使用 document.getElementById("demo1").innerHTML？

Answer 1

您正在寻找的称为“命名访问”。具有“name”或“id”属性的元素直接作为属性附加到 dom。您甚至可以使用窗口对象 window['demo1'] 访问该元素。因此，如果元素具有文档中唯一的 id 或名称，则可以通过这种方式选择元素。

警告:

如果你有这样的标记怎么办？

<div id=demo1></div>
<input name="demo1"/>
<button onclick=demo()>this is button</button>

https://codepen.io/pen/VWKqdv

标记有效，因为您没有重复的 ID。但命名访问的工作方式是将“id”和“name”关联在一起。因此，在这种情况下，您将无法通过命名访问来选择元素，因为“demo1”将与“div”和“img”关联，并且它将返回一个数组。为了避免这个问题，我们使用 document.getElementById()

命名访问: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object