<!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>查询子节点</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li id="item">3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
console.dir(ul);
// console.log(ul.firstChild); // 不实用
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
//window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。
//为什么使用 window.onload()?
//因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
window.onload = function () {
var box = document.getElementsByClassName('box')[0];
console.log(box);
}
</script>
<div class="box">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
上述运行结果:
为什么使用 window.onload()?
因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用,如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报 出"undefined"错误。
下面是不使用window.onload()的例子:
<!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>查询子节点</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li id="item">3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
console.dir(ul);
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
var box = document.getElementsByClassName('box')[0];
console.log(box);
</script>
<div class="box">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
上述运行结果: