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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188797.html
