querySelectorAll获取textarea
时间: 2023-08-10 10:57:15 浏览: 50
您可以使用`querySelectorAll`方法来获取页面上的所有`textarea`元素。以下是一个示例:
```javascript
const textareas = document.querySelectorAll('textarea');
console.log(textareas);
```
这将返回一个包含所有`textarea`元素的NodeList。您可以根据需要使用它们进行进一步的操作。
相关问题
<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`。
然后,可以使用以下代码实现来回添加:
```javascript
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`,表示返回全部。直接清空第二个文本框的值。
最后,以上述代码实现来回添加。
<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') 实现来回添加 全部添加 用节点来操作
首先,需要给每个按钮添加一个事件监听器,用于触发相应的操作。然后,需要获取到两个文本框的节点,用于添加和显示数据。
以下是代码示例:
HTML部分:
```
<form>
<textarea class="input" cols="30" rows="10">山东 深圳</textarea>
<button class="add-one">添加一个</button>
<button class="add-all">全部添加</button>
<button class="back-add">返回添加</button>
<button class="back-all">返回全部</button>
<textarea class="output" cols="30" rows="10"></textarea>
</form>
```
JS部分:
```
let input = document.querySelector('.input');
let output = document.querySelector('.output');
let addOneBtn = document.querySelector('.add-one');
let addAllBtn = document.querySelector('.add-all');
let backAddBtn = document.querySelector('.back-add');
let backAllBtn = document.querySelector('.back-all');
let dataList = [];
addOneBtn.addEventListener('click', function() {
let data = input.value.trim();
if (data) {
dataList.push(data);
output.value = data;
input.value = '';
}
});
addAllBtn.addEventListener('click', function() {
let dataArr = input.value.split('\n');
dataList = dataList.concat(dataArr);
output.value = dataList.join('\n');
input.value = '';
});
backAddBtn.addEventListener('click', function() {
input.value = dataList.pop() || '';
output.value = dataList.join('\n');
});
backAllBtn.addEventListener('click', function() {
input.value = dataList.join('\n');
dataList = [];
output.value = '';
});
```
运行后,可以进行来回添加和全部添加的操作,并用节点来操作显示数据。