Javascript ES6获取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>ES6方式获取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>
let family = document.querySelector('#family');
console.log(family);
let item_list = document.querySelectorAll('.item-list');
console.log(item_list);
item_list.forEach(li => {
console.log(li);
});
console.log(document.querySelectorAll('[name]'));
console.log(document.querySelectorAll('input[name]'));
console.log(document.querySelector('input[name=account]'));
console.log(document.querySelector('input[name=password]'));
let data_list = document.querySelectorAll('[name=data-list]');
console.log(data_list);
data_list.forEach(li => {
console.log(li);
});
let lis = document.querySelectorAll('li');
console.log(lis);
lis.forEach(li => {
console.log(li);
});
</script>
间接获取
<!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>
let son = document.querySelector('.son');
console.log(son);
console.log(son.parentNode);
console.log(son.parentElement);
let family = document.querySelector('#family');
console.log(family.childNodes);
console.log(family.children);
let ul = document.querySelector('ul');
let lis = ul.children;
for (const li of lis) {
console.log(li.innerText);
}
console.log('+++++++++++++++++++++++++++++++');
console.log(ul.firstElementChild);
console.log(ul.firstElementChild.innerText);
console.log(ul.firstChild);
console.log('+++++++++++++++++++++++++++++++');
console.log(ul.lastElementChild);
console.log(ul.lastElementChild.innerText);
console.log(ul.lastChild);
console.log('+++++++++++++++++++++++++++++++');
let b = document.querySelector('#b');
console.log(b.nextSibling);
console.log(b.nextElementSibling);
</script>