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

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

Answer 1

您所看到的内容称为“命名访问”。具有“name”或“id”属性的元素将作为属性直接附加到dom。您甚至可以使用窗口对象窗口['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

Answer 2

demo.innerHTML="some text"

无法工作你需要定义＆＃34; demo＆＃34;首先作为DOM，检查下面的行

var demo = document.getElementById("demo")

Answer 3

这是一种新的语法，虽然它有效，但使用

更好更安全

document.getElementById("demo1").innerHTML=