浏览器加载html 页面时的加载顺序
今天来总结一下浏览器在加载html 页面时的加载顺序,如果顺序记反或者记错的话,会对思路有受影响。我下面用最贱的的JavaScript 来进行描述。
执行顺序
简单来说:
1. head -> body
2.
如果有<script type="text/javascript">... </script>时,
同样也是从上到下加载,但是分两种情况
当需要用到document(DOM对象)来获取body体中的数据时
比如:
两种情况
document 获取body中的数据只能在方法体中,和window.onload() 加载体里,中获取,在别的地方获取不到。因为按照执行顺序还没加载到,就要去获取肯定是获取不到的。 除非在body体中加一个
一:DOM对象在方法中获取数据
我们知道浏览器的执行顺序是从上到下。当执行到方法体的时候,先会保存起来先不加载,等到下面标签调用的时候,它才加载。
标签调用:
这是属于静态加载
二:DOM对象在window.onload中获取数据
首先我们要知道 window.onload()
方法是干嘛的,他和jQuery中 $(function(){})
一样的,当浏览器执行到这一行时,会先去加载body体。他们其实是body标签中隐形的。
当执行完body体完后使用document就可以回去到标签对象数据。
两种情况的区别
- 方法体的方法,必须依附在body体上面,如果后来有需求的话,在
Document对象的主要方法:
方法 | 描述 |
---|---|
document.getElementById(elementId) | 通过标签的id属性查找标签dom对象,elementId是标签的id属性值 |
getElementsByName(elementName) | 通过标签的name属性查找标签dom对象,elementName标签的name属性值 |
getElementsByTagName(tagname) | 通过标签名查找标签dom对象。tagname是标签名 |
createElement(tagName) | 方法,通过给定的标签名,创建一个标签对象。tagName是要创建的标签名 |
document对象的三个查询方法,如果有id属性,优先使用getElementById方法来进行查询
如果没有id属性,则优先使用getElementsByName方法来进行查询
如果id属性和name属性都没有最后再按标签名查getElementsByTagName
以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll() {
var elementsByName = document.getElementsByName("hobby");
for (var i = 0; i < elementsByName.length; i++) {
elementsByName[i].checked = true;
}
}
window.onload = function () {
//全部不选
var checkNo = document.getElementById("checkNo");
checkNo.onclick = function () {
var elementsByName = document.getElementsByName("hobby");
for (var i = 0; i < elementsByName.length; i++) {
elementsByName[i].checked = false;
}
}
//反转
var checkReverse = document.getElementById("checkReverse");
checkReverse.onclick = function () {
var elementsByName = document.getElementsByName("hobby");
for (var i = 0; i < elementsByName.length; i++) {
elementsByName[i].checked = !elementsByName[i].checked;
}
}
}
</script>
</head>
<body>
<lable>兴趣爱好:</lable>
<input type="checkbox" name="hobby" value="cpp"/>C++
<input type="checkbox" name="hobby" value="java"/>Java
<input type="checkbox" name="hobby" value="php">PHP
<br/>
<button id="checkAll" onclick="checkAll()">全选</button>
<button id="checkNo">全不选</button>
<button id="checkReverse">反转</button>
</body>
</html>