html 页面中内容的加载顺序(简单易懂)

最新推荐文章于 2024-06-09 09:49:42 发布

国保马

最新推荐文章于 2024-06-09 09:49:42 发布

阅读量5.5k

点赞数 1

分类专栏： JavaWeb 文章标签： html javascript js java javaweb

本文链接：https://blog.csdn.net/qq_42475949/article/details/110672037

版权

JavaWeb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

浏览器加载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>

国保马

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
html 页面中内容的加载顺序(简单易懂)

浏览器加载html 页面时的加载顺序今天来总结一下浏览器在加载html 页面时的加载顺序，如果顺序记反或者记错的话，会对思路有受影响。我下面用最贱的的JavaScript 来进行描述。执行顺序简单来说：1. head -> body2.如果有<script type="text/javascript">... </script>时，同样也是从上到下加载，但是分两种情况当需要用到document(DOM对象)来获取body体中的数据时比如：两种情况
复制链接

扫一扫

专栏目录