var li = document.getElementsByTagName('li') for (let i = 0 ; i <li.length; i++){ li[i].onclick = function(){ console.log(i); } }为什么能获取到每个li
时间: 2024-04-28 16:25:58 浏览: 17
这段代码能获取到每个li元素是因为在for循环中使用了let关键字来声明变量i,而不是使用var关键字。使用let关键字声明的变量具有块级作用域,因此每个循环迭代中都会创建一个新的变量i,从而避免了使用var关键字导致的变量共享问题。因此,每个li元素的onclick事件处理函数中的i变量都是对应该元素所在的循环迭代中创建的变量,从而能正确地输出每个li元素的索引值。
相关问题
var lilist = document.getElementsByTagName("li");解释代码
这行代码使用了 JavaScript 的 DOM 操作,它通过获取 HTML 文档中的所有 `li` 元素并将其存储在 `lilist` 变量中。具体来说,`document` 对象代表当前 HTML 文档,`getElementsByTagName` 方法可以获取指定标签名的所有元素,返回的结果是一个类数组对象(NodeList),它包含了所有符合条件的元素。因此,`lilist` 变量就是一个包含了所有 `li` 元素的 NodeList 对象。我们可以通过遍历这个 NodeList 对象来访问每一个 `li` 元素。
注释这段代码<!DOCTYPE html> <html> <body> <ul id="ab"> <li>香蕉</li> <li>苹果</li> <li>香橙</li> <li>葡萄</li> <li>哈密瓜</li> <li>香瓜</li> </ul> 水果: <input type="text" id="a" ><br/> 插入或删除的地方: <input type="text" id="b" ><br/> <button onclick="add()">添加</button> <button onclick="move()">删除</button> <script> function add() { var x=document.createElement("li"); var y=document.getElementById("a"); x.innerHTML=y.value; var parent=document.getElementById("ab"); var node=document.getElementById("b").value; var child=parent.childNodes[node-1]; parent.insertBefore(x, child); } function move() { var child=document.getElementsByTagName("li"); var parent=document.getElementsByTagName("ul"); var node=document.getElementById("b").value; parent[0].removeChild(child[node-1]); } </script> </body> </html>
下面是对这段HTML代码的注释:
```html
<!DOCTYPE html>
<html>
<body>
<!-- 创建一个无序列表 -->
<ul id="ab">
<li>香蕉</li>
<li>苹果</li>
<li>香橙</li>
<li>葡萄</li>
<li>哈密瓜</li>
<li>香瓜</li>
</ul>
<!-- 输入框,用于输入需要添加或删除的水果 -->
水果: <input type="text" id="a" ><br/>
<!-- 输入框,用于指定插入或删除的位置 -->
插入或删除的地方: <input type="text" id="b" ><br/>
<!-- 添加和删除按钮 -->
<button onclick="add()">添加</button>
<button onclick="move()">删除</button>
<script>
// 添加水果的函数
function add() {
// 创建一个新的列表项
var x=document.createElement("li");
// 获取输入框中的值,将其作为列表项的内容
var y=document.getElementById("a");
x.innerHTML=y.value;
// 获取列表对象和插入位置
var parent=document.getElementById("ab");
var node=document.getElementById("b").value;
// 在指定位置前插入新的列表项
var child=parent.childNodes[node-1];
parent.insertBefore(x, child);
}
// 删除水果的函数
function move() {
// 获取所有的列表项和列表对象
var child=document.getElementsByTagName("li");
var parent=document.getElementsByTagName("ul");
// 获取指定位置的列表项并从列表中删除
var node=document.getElementById("b").value;
parent[0].removeChild(child[node-1]);
}
</script>
</body>
</html>
```
这段代码创建了一个包含多个水果的无序列表,并提供了添加和删除水果的功能。用户可以在两个输入框中分别输入需要添加或删除的水果名称和插入或删除的位置,然后按下相应的按钮完成操作。其中,添加水果的函数使用 `createElement` 方法创建新的列表项,使用 `insertBefore` 方法将其插入到指定位置前。删除水果的函数使用 `removeChild` 方法将指定位置的列表项从列表中删除。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)