在没有 ID 时更改第一个和第二个文本输入值

Question

如果他们有 ID，我知道如何使用 javascript 更改文本输入值，但如果他们没有 ID 怎么办？我需要查找并更改页面上第一个和第二个文本输入的值。我该怎么做？

<input type="text" id="text" value="no value">

<button onclick="myFunction()">Change Values</button>

function myFunction() {
document.getElementById("text").value = "Text is now changed";
}

我需要知道如何更改页面上第一个和第二个输入文本的值（如果它们没有 ID）。例如，将 "no value 1" 更改为 "yes value 1"，将 "no value 2" 更改为 "yes value 2"。我该怎么做？

<input type="text" value="no value 1">
<input type="text" value="no value 2">

Answer 1

如果我正确理解你的问题，使用 document.getElementsByTagName 是一个答案。

const inputElements = document.getElementsByTagName('input');
inputElements[0].value = "insert input 1";
inputElements[1].value = "insert input 2";

检查这个 jsfiddle (https://jsfiddle.net/hentleman/09tr7bku/1/)

Answer 2

旧学校，但仍然有效：

function changeEm() {
document.forms[0][0].value = "yes value 1";
document.forms[0][1].value = "yes value 2";
}

<body onload=changeEm()>
<form>
<input type="text" value="no value 1">
<input type="text" value="no value 2">
</form>
</body>

Answer 3

文档元素的查询方法有很多种，document.getElementsByTagName.

是其中一种

此方法 returns 一个 HTMLCollection，它是 HTML 个对象的可迭代对象。

有了这些知识，假设您有以下 HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Get Inputs</title>
</head>
<body>
  <input type="text" value="First" />
  <input type="text" value="Second" />
</body>
</html>

您可以使用 document 的 getElementsByTagName 获取 HTML 中的所有 input 元素，如下所示：

const inputEls = document.getElementsByTagName("input");

inputEls 将包含 HTMLInputElement 的 HTMLCollection，现在我们可以迭代集合并用它做一些事情。

最后的 JavaScript 必须如下所示：

const inputEls = document.getElementsByTagName("input");

for (let input of inputEls) {
  // Here you are able to access every input element of te collection
// And consume HTMLInputElement object
  console.log(input.value);
}

在没有 ID 时更改第一个和第二个文本输入值

Change the first and second text input value when they don't have an ID

javascript

text

input

onclick

userscripts