怎么获得document.querySelector包含元素的长度
时间: 2023-07-08 11:48:39 浏览: 60
要获取 `querySelectorAll` 方法得到的元素列表的长度,可以使用 `length` 属性。例如,假设我们使用 `querySelectorAll` 方法获取了所有 `div` 元素,可以像这样获取它们的数量:
```
const divs = document.querySelectorAll('div');
const numDivs = divs.length;
console.log(numDivs); // 输出所有 div 元素的数量
```
相关问题
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { text-align: right; } #pwdTd> img,#pwdTwoTd > img { width: 17px; height: 15px; position: absolute; right: 5px; top: 5px; } #pwdTd,#pwdTwoTd { position: relative; } </style> <script type="text/javascript"> window.onload = function() { var username = document.querySelector("#username"); var pwd = document.querySelector("#pwd"); var pwdTwo = document.querySelector("#pwdTwo"); var usernameText = document.querySelector("#usernameText"); var pwdText = document.querySelector("#pwdText"); var pwdTwoText = document.querySelector("#pwdTwoText"); var phone = document.querySelector("#phone"); var phoneText = document.querySelector("#phoneText"); //绑定失去焦点事件 username.onblur = function() { var usernameV = document.querySelector("#username").value; if (usernameV.length == 0) { usernameText.innerHTML = "账号不能为空"; usernameText.style.color = "red"; usernameText.style.fontSize = "13px" } else { usernameText.innerHTML = ""; } }; username.onfocus = function() { //pwdText.innerHTML = ""; }; //给密码框设置焦点事件 pwd.onblur = function() { var pwdV = document.querySelector("#pwd").value; var reg1 = /^[0-9]{6,20}$/; var reg2 = /^[A-z]{6,20}$/; if (pwdV.length == 0) { pwdText.innerHTML = "密码不能为空"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (pwdV.length < 6) { pwdText.innerHTML = "密码长度不能小于六位"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (reg1.test(pwdV)) { pwdText.innerHTML = "密码过于简单(不能是纯数字)"; pwdText.style.color = "red"; pwdText.style.fontSize = "13px"; } else if (reg2.test(pwdV)) { pwdText.innerHTML = "密码过于简单(不能是纯英文)";
这是一个HTML文档的开头部分,其中包含了一些元素和属性。其中,<!DOCTYPE html>是文档类型声明,告诉浏览器这是一个HTML5文档。<html>是HTML文档的根元素,包含了整个文档的内容。<head>是文档头部元素,包含了一些元数据,如字符集、标题、样式表等。<meta charset="utf-8">是设置文档的字符集为UTF-8,确保文档中的中文等非ASCII字符能够正确显示。<title>是设置文档的标题,显示在浏览器的标签页上。<style type="text/css">是定义文档的样式表,其中table { text-align: right; }是设置表格中的文本对齐方式为右对齐。
const arr = ["./image/cs1.png", (src = "./image/cs2.png")]; // 获取列数和元素列表 const numCols = 3; const items = document.querySelectorAll(".item"); // 创建列数组,并设置初始高度为0 const cols = new Array(3).fill(10); console.log( cols); // 获取每一列的宽度和间距 const containerWidth = document.querySelector(".container").offsetWidth; const itemWidth = containerWidth / numCols - 20; // 遍历元素列表,将每个元素插入到最短的列中 cols.forEach.call(items, function (item) { // 找到最短的列 const shortestColIndex = cols.indexOf(Math.min.apply(null, cols)); console.log(Math.min.apply(null, cols)); // 设置元素样式 item.style.width = `${itemWidth}px`; item.style.position = "absolute"; item.style.left = `${shortestColIndex * (itemWidth + 20)}px`; item.style.top = `${cols[shortestColIndex]}px`; // 更新列高度 cols[shortestColIndex] += item.offsetHeight + 20; });
这段代码实现了一个瀑布流布局,主要分为以下几个步骤:
1. 定义一个包含图片路径的数组 `arr`。
2. 获取元素列表和列数,这里列数为 `3`。
3. 创建一个长度为 `3` 的数组 `cols`,用于存储每一列的高度,初始值为 `10`。
4. 获取每一列的宽度和间距,这里间距为 `20`。
5. 遍历元素列表,将每个元素插入到最短的列中。
6. 找到最短的列,即 `cols` 数组中值最小的索引,使用 `Math.min.apply(null, cols)` 可以得到 `cols` 数组中的最小值。
7. 设置元素的样式,包括宽度、位置和高度等。
8. 更新 `cols` 数组中最短列的高度,即将该列的高度加上当前元素的高度和间距,以便下次插入元素时可以插入到该列下面。
9. 遍历完所有元素后,就可以得到一个瀑布流布局。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)