querySelectorAll获取textarea

您可以使用`querySelectorAll`方法来获取页面上的所有`textarea`元素。以下是一个示例：

const textareas = document.querySelectorAll('textarea');
console.log(textareas);

这将返回一个包含所有`textarea`元素的NodeList。您可以根据需要使用它们进行进一步的操作。

相关问题

<form> <textarea name="" id="" cols="30" rows="10">山东 深圳 </textarea> <button >添加一个</button> <button >全部添加</button> <button >返回添加</button> <button >返回全部</button> <textarea name="" id="" cols="30" rows="10"></textarea> </form> <script> let button = document.querySelectorAll('.button') let textarea = Document.querySelectorAll('.textarea') 根据这行代码 实现来回添加 全部添加

可以通过绑定按钮的点击事件来实现这些功能。具体实现如下所示：

<form>
  <textarea id="input" cols="30" rows="10"></textarea>
  <button id="addOne">添加一个</button>
  <button id="addAll">全部添加</button>
  <button id="returnOne">返回添加</button>
  <button id="returnAll">返回全部</button>
  <textarea id="output" cols="30" rows="10"></textarea>
</form>

<script>
  const input = document.getElementById('input')
  const output = document.getElementById('output')
  const addOneBtn = document.getElementById('addOne')
  const addAllBtn = document.getElementById('addAll')
  const returnOneBtn = document.getElementById('returnOne')
  const returnAllBtn = document.getElementById('returnAll')

  let addedItems = []

  addOneBtn.addEventListener('click', () => {
    const newItem = input.value.trim()
    if (newItem) {
      addedItems.push(newItem)
      output.value = newItem
      input.value = ''
    }
  })

  addAllBtn.addEventListener('click', () => {
    const items = input.value.trim().split(/\s+/)
    addedItems = [...addedItems, ...items]
    output.value = addedItems.join('\n')
    input.value = ''
  })

  returnOneBtn.addEventListener('click', () => {
    const lastItem = addedItems.pop()
    if (lastItem) {
      output.value = lastItem
    }
  })

  returnAllBtn.addEventListener('click', () => {
    output.value = addedItems.join('\n')
    addedItems = []
  })
</script>

这个示例代码中，我们首先获取到需要操作的元素，包括输入框、输出框和四个按钮。然后，我们定义了一个数组 `addedItems` 用于存储添加的条目。在每个按钮的点击事件中，我们根据按钮的功能来对输入框和输出框进行操作，并更新 `addedItems` 数组的内容。

其中，“添加一个”按钮会将输入框中的文本添加到 `addedItems` 数组中，并将其显示在输出框中；“全部添加”按钮会将输入框中的所有文本按照空格分隔后添加到 `addedItems` 数组中，并将其显示在输出框中；“返回添加”按钮会将 `addedItems` 数组中最后一个元素移除，并将其显示在输出框中；“返回全部”按钮会将 `addedItems` 数组中的所有元素移除，并将其显示在输出框中。

这样，用户就可以通过这四个按钮来实现对输入框中的文本进行添加、移除和显示的功能。

<form> <textarea name="" id="" cols="30" rows="10">山东 深圳 </textarea> <button class="qwq">添加一个</button> <button class="qwe">全部添加</button> <button class="qwww">返回添加</button> <button class="qwxsz">返回全部</button> <textarea name="" id="" cols="30" rows="10"></textarea> </form> <script> let button = document.querySelectorAll('.button') let textarea = document.querySelectorAll('.textarea') </script> 根据这行代码 实现来回添加

首先，将按钮的类名更正为与代码中一致的类名，即`.qwq`、`.qwe`、`.qwww`、`.qwxsz`。

然后，可以使用以下代码实现来回添加：

let button = document.querySelectorAll('.qwq, .qwe, .qwww, .qwxsz');
let textarea = document.querySelectorAll('textarea');

let valuesToAdd = [];

button.forEach((btn) => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    if (btn.classList.contains('qwq')) {
      let valueToadd = textarea[0].value.trim();
      if (valueToadd !== '') {
        valuesToAdd.push(valueToadd);
        textarea[0].value = '';
        textarea[1].value = valuesToAdd.join(' ');
      }
    } else if (btn.classList.contains('qwe')) {
      valuesToAdd = textarea[0].value.trim().split(/\s+/);
      if (valuesToAdd.length > 0) {
        textarea[0].value = '';
        textarea[1].value = valuesToAdd.join(' ');
      }
    } else if (btn.classList.contains('qwww')) {
      textarea[0].value = valuesToAdd.join(' ');
      valuesToAdd = [];
      textarea[1].value = '';
    } else if (btn.classList.contains('qwxsz')) {
      textarea[1].value = '';
    }
  });
});

解释一下代码：

首先，通过选择器获取按钮和文本框的元素。

然后，定义一个变量 `valuesToAdd` 用于存储待添加的值，初始值为空数组。

接着，遍历所有按钮，对每个按钮都添加一个点击事件监听器。

在事件监听器中，首先阻止默认行为。

然后，通过 `classList.contains()` 方法判断按钮的类名，分别执行以下操作：

- 如果类名为 `qwq`，表示添加一个值。获取第一个文本框的值，去除首尾空格后存入 `valueToadd` 变量，如果不为空，将其加入 `valuesToAdd` 数组，清空第一个文本框的值，并将 `valuesToAdd` 数组中的值用空格拼接后显示在第二个文本框中。

- 如果类名为 `qwe`，表示全部添加。获取第一个文本框的值，去除首尾空格后通过正则表达式 `/s+/` 将其拆分成数组 `valuesToAdd`，如果数组长度大于 0，则清空第一个文本框的值，并将 `valuesToAdd` 数组中的值用空格拼接后显示在第二个文本框中。

- 如果类名为 `qwww`，表示返回添加。将 `valuesToAdd` 数组中的值用空格拼接后显示在第一个文本框中，将 `valuesToAdd` 数组重置为空数组，并清空第二个文本框的值。

- 如果类名为 `qwxsz`，表示返回全部。直接清空第二个文本框的值。

最后，以上述代码实现来回添加。