您的位置：首页 > Web前端 > JavaScript

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

2017-06-12 20:53 267 查看

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

比较项\js or jQuerywindow.onload$(document).ready()
执行时机需要等到网页中所有内容加载完成后执行（包括图片）网页中DOM结构绘制完成后执行
编写个数不能同时编写多个可以同时编写执行多个
简化写法无(document).ready(function())简写为(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中的类名顺序可以不一致。

如果您有任何疑问或本文侵犯了您的著作权，请联系我。 mail to kylin
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript DOM jQuery
相关文章推荐
新的分享
章节导航