Javascript 传统获取DOM
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>传统的获取方式DOM</title> </head> <body> <div id="family"> <div class="father"> 爸爸 <div class="son">儿子</div> </div> </div> <div id="b">我是div</div> <span>我是span</span> <ul> <li name="data-list" class="item-list">李昊哲</li> <li name="data-list" class="item-list">李胜龙</li> <li name="data-list" class="item-list">大美丽</li> <li name="data-list" class="item-list">小可爱</li> </ul> <input type="text" name="account" id="account" value="admin"> <input type="password" name="password" id="password" value="admin"> </body> </html> <script> // 根据id获取 let family = document.getElementById('family'); console.log(family); // 根据 css类选择器 获取 // HTMLCollection let item_list = document.getElementsByClassName('item-list'); console.log(item_list); // console.log(item_list[0]); for (const li of item_list) { console.log(li); } // 根据属性名name获取 // NodeList let data_list = document.getElementsByName('data-list'); console.log(data_list); data_list.forEach(li => { console.log(li); }); // 根据标签名获取 // HTMLCollection let lis = document.getElementsByTagName('li') console.log(lis); for (const li of lis) { console.log(li); } </script>