JavaScript DOM（一）--頁面載入完成事件與獲取元素節點

阿新 • • 發佈：2019-01-16

window.onload與$(document).ready()比較

比較項\js or jQuery	window.onload	$(document).ready()
執行時機	需要等到網頁中所有內容載入完成後執行（包括圖片）	網頁中DOM結構繪製完成後執行
編寫個數	不能同時編寫多個	可以同時編寫執行多個
簡化寫法	無	$(d o c u m e n t) . r e a d y (f u n c t i o n ()) 简写为$ (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（一）--頁面載入完成事件與獲取元素節點

window.onload與$(document).ready()比較

獲取元素節點

JavaScript DOM（一）--頁面載入完成事件與獲取元素節點

主角人物移動（一）-滑鼠點選事件與通過射線獲取點選座標

從零開始學 Web 之 DOM（二）對樣式的操作，獲取元素的方式

Javascript 基礎（一）

Javascript系列（一）語法、關鍵保留字、變量

JavaScript基礎（一）

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

JavaScript學習（一）——基礎知識查漏補缺

JavaScript學習（一）

JS之DOM（一）

《深入理解java虛擬機器》讀書筆記（一）---- 類載入機制

laravel框架原始碼分析（一）自動載入

WebGIS 之 ArcGIS API for JavaScript 總結（一）

JavaScript 學習（一）瞭解JavaScript

Android開發人員不得不學習的JavaScript基礎（一）

javascript精雕細琢（一）：var let const function宣告的區別

JS：Basic JavaScript入門（一）--引數

你不知道的 Virtual DOM（一）：Virtual Dom 介紹

前端專案javascript 筆記（一）持續更新

JavaScript總結（一）

JavaScript DOM（一）--頁面載入完成事件與獲取元素節點

window.onload與$(document).ready()比較

獲取元素節點

相關推薦