通过 document.X 访问 DOM 元素答案

【问题标题】：Accesing DOM elements through document.X通过 document.X 访问 DOM 元素
【发布时间】：2017-12-16 04:40:07
【问题描述】：

我在哪里可以看到更多关于这个的信息？我认为您必须始终使用 document.getElementById 才能与元素交互。

来源 (Getting data from Google docs into Javascript)

所以考虑一下这个 JavaScript：

function Data(response) {
  document.Team.tName.value = response.feed.entry[0].gs$cell.$t; // HERE !
}

还有以下 HTML：

<html>
<head>
<title>
</title>
<script type="text/javascript" src="teams.js" >
</script>
</head>
<body>
<table>             
    <form name="Team">
    <tr>                
        <td>
        <input  size="19"  name="tName" readonly >
        </td>               
    </tr>
    </form>
    </table>
<script src="https://spreadsheets.google.com/feeds/cells/18WEeF3d9pJWYK1sheNHgc0KOi845cjyZgJ8x6TVisFM/1/public/values?alt=json-in-script&callback=Data&range=A1"></script>
</body>
</html>

【问题讨论】：

除了.getElementById之外，还有一些官方支持的方式，包括getElementsByClassName和getElementsByTagName。
您在此处找到的可以引用 document[name] 的命名元素的功能是教程常用的简写，但不受官方支持
developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement 从一开始就使用表单名称和元素名称

标签： javascript dom

【解决方案1】：

正如其他发帖者所提到的，有几种方法可以访问 DOM 元素。

如果您只想访问表单元素，请查看HTMLFormElement.elements (MDN)。

HTMLFormElement.elements 属性返回包含在 FORM 元素中的所有表单控件的 HTMLFormControlsCollection (HTML 4 HTMLCollection)，但具有 image 类型属性的输入元素除外。

您将获得一个整洁的表单元素集合，您可以通过它们的名称属性直接访问它们，也可以通过遍历集合来访问它们。

var formElements = document.querySelector('#some-form').elements;

console.log(formElements['some-form__input-yo'].value); // form element value

// OR

for (let element of formElements) {
   console.log(element.value); // form element value
}

https://jsfiddle.net/93nemsfq/

【讨论】：

【解决方案2】：

使用document.querySelector：

function Data(response) {
  document.querySelector('[name=tName]').value = response.feed.entry[0].gs$cell.$t; 
}

`document.querySelector`

返回文档中与指定选择器或选择器组匹配的第一个元素。

`document.querySelector('[name=tName]')`

这将选择具有name 属性和tName 值的元素

【讨论】：