JavaScript DOM（一）--页面加载完成事件与获取元素节点

最新推荐文章于 2024-07-29 09:49:14 发布

原创最新推荐文章于 2024-07-29 09:49:14 发布 · 9.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #DOM #jQuery

本文探讨了JavaScript中的window.onload与$(document).ready()两种页面加载完成事件的区别，并详细介绍了DOM获取元素节点的四种方法：getElementsByName、getElementsByTagName、getElementById和getElementsByClassName。同时提到了相关jQuery写法及兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.onload与$(document).ready()比较

比较项\js or jQuery	window.onload	$(document).ready()
执行时机	需要等到网页中所有内容加载完成后执行（包括图片）	网页中DOM结构绘制完成后执行
编写个数	不能同时编写多个	可以同时编写执行多个
简化写法	无	$(document).ready(function() {}) 简写为 $(function(){})

注：
如果在body上监听了onload事件，window.onload事件将不再触发。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery ready与js onload</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        console.log('begin.time:', Date.now());
        window.onload = function () {
            console.log('js onload', Date.now());
        };
        $(function () {
            console.log('jQuery ready', Date.now());
        });
    </script>
</head>
<body onload="console.log('body.onload')">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif"/>
</body>
</html>

获取元素节点

js DOM获取节点一共有四个方法，分别是：

document.getElementsByTagName('div');
document.getElementById('wrapper');
document.getElementsByClassName('outer');
document.getElementsByName('myDiv');

其对应的jQuery写法如下所示：

$('div');
$('#wrapper');
$('.outer');
$('[name=myDiv]')

完整代码如下所示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            // 标签选择器
            console.log($('div'));
            console.log(document.getElementsByTagName('div'));
            // ID选择器
            console.log($('#wrapper'));
            console.log(document.getElementById('wrapper'));
            // 类选择器
            console.log($('.outer'));
            console.log(document.getElementsByClassName('outer'));
            // 获取name
            console.log($('[name=myDiv]'));
            console.log(document.getElementsByName('myDiv'));
						// 选择器可以混合使用
						console.log(document.getElementById('wrapper').getElementsByTagName('div'));
						console.log(document.getElementById('wrapper').getElementsByClassName('outer'));
        });
    </script>
</head>
<body>
<div id="wrapper" class="outer">
    <div name="myDiv" class="outer">
        <div>这是被div包裹的文本</div>
        <p name="myDiv">这是被p标签包裹的文本</p>
    </div>
</div>
</body>
</html>

注：
1.document.getElementsByName主要用在表单中，和input等结合使用。
2.document.getElementsByName有一定的兼容性问题，主要集中在ie以及Firefox中，使用中请注意兼容性问题。
3.getElementsByTagName允许把一个通配符作为他的参数，比如 *
4.getElementById可以和getElementsByTagName以及getElementsByClassName通用，但是getElementById在前，getElementsByTagName和getElementsByClassName在后。（见示例程序）
5. getElementsByClassName可以查找带有多个类名的元素，只需要在字符串参数中用空格隔开即可，和实际DOM中的类名顺序可以不一致。