Javascript 通过document.X访问DOM元素_Javascript_Dom

Javascript 通过document.X访问DOM元素

javascript dom

Javascript 通过document.X访问DOM元素,javascript,dom,Javascript,Dom,我在哪里可以看到更多关于这方面的信息？我认为必须始终使用document.getElementById与元素交互来源请考虑此JavaScript：以及以下HTML： <html> <head> <title> </title> <script type="text/javascript" src="teams.js" > </script> </head> <body> <table>

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

来源

请考虑此JavaScript：

以及以下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>

使用document.querySelector：

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

document.querySelector“[name=tName]”

这将选择具有属性名称和值tName的元素，正如其他海报所提到的，有几种方法可以访问DOM元素

如果您只是在查看访问表单元素，请查看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
}

除了.getElementById之外，还有一些官方支持的方法，包括GetElementsByCassName和getElementsByTagName。在这里，您可以在文档[name]中引用命名元素的功能是教程常用的速记，但官方并不支持使用表单名，元素名从一开始就存在

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

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
}