form.querySelectorAll会取到display=none的元素吗
时间: 2024-06-02 21:10:53 浏览: 13
是的,`form.querySelectorAll`方法会取到`display:none`的元素。该方法会返回所有符合选择器的元素,无论其显示状态如何。如果您需要排除`display:none`的元素,请在选择器中添加`:not([style*="display:none"])`,以排除所有内联样式包含`display:none`的元素。例如:`form.querySelectorAll('input:not([style*="display:none"])')`。
相关问题
获取表单内父容器没有被display=none隐藏的input,select,radio等的表单name属性值
可以使用以下代码获取表单内父容器没有被 `display=none` 隐藏的 input、select、radio 等表单元素的 `name` 属性值:
```javascript
// 获取表单元素的父容器
const formContainer = document.querySelector('#form-container');
// 获取所有 input、select、radio 等表单元素
const formElements = formContainer.querySelectorAll('input, select, radio');
// 遍历所有表单元素,找到没有被 display=none 隐藏的元素,并获取其 name 属性值
const formValues = {};
formElements.forEach((element) => {
if (getComputedStyle(element.parentElement).display !== 'none') {
formValues[element.name] = element.value;
}
});
console.log(formValues);
```
这段代码会将所有没有被 `display=none` 隐藏的表单元素的 `name` 属性值存储在一个对象中,并打印出来。你可以根据你的需求进行修改和使用。
const elements = form1.querySelectorAll('[name]:not([name^="skus"]):not([type="hidden"]:not([style*="display:none"])');什么意思
这段代码使用了 CSS 选择器语法,它的意思是在 form1 中查找所有带有 name 属性且不以 "skus" 开头的元素,并且这些元素不是隐藏的(即没有设置 display:none 或者 type="hidden")。
具体解释如下:
- querySelectorAll() 是一个 DOM API,用于在文档中查找匹配某个 CSS 选择器的所有元素,并返回一个 NodeList 对象。
- [name] 表示查找所有带有 name 属性的元素。
- :not([name^="skus"]) 表示排除所有 name 属性以 "skus" 开头的元素,即只查找不以 "skus" 开头的元素。
- :not([type="hidden"]:not([style*="display:none"])) 表示排除所有 type 属性为 "hidden" 或者被设置为 display:none 的元素,即只查找不隐藏的元素。注意,这里使用了 :not() 函数的嵌套形式,表示排除两种不符合条件的元素。
- 最后将查找到的元素存储在 elements 变量中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)