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

来源：互联网发布：淘宝联盟软件编辑：程序博客网时间：2024/06/03 09:24

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中的类名顺序可以不一致。

如果您有任何疑问或本文侵犯了您的著作权，请联系我。 mail to kylin

阅读全文

0 0