代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul class="nav"> <li>我的首页</li> <li>产品首页</li> <li>练习方式</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> let lis = document.querySelectorAll('.nav li') console.log(lis) // 解套出li对象 console.log(lis[0]) console.log(lis[1]) console.log(lis[2]) // 也可以用for循环遍历 for(let index = 0; index < lis.length; index++){ // 通过下标解套出DOM对象 console.log(lis[index]) // 经验:程序并没有真正的批量修改,底层逻辑还是一个个修改 lis[index].innerHTML = '你好~' } </script> </body> </html>
效果图:
web API-DOM-案例-打印li对象
最新推荐文章于 2024-10-12 10:19:22 发布