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

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

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

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

比较项\js or jQuerywindow.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中的类名顺序可以不一致。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值