JavaScript文檔加載模式以及元素獲取
一、文檔加載模式
1.事件三要素：事件源（觸發(fā)時間的元素）；事件名稱（click點(diǎn)擊事件）；事件處理程序（事件出發(fā)后要執(zhí)行的代碼函數(shù)形式）存在問題：瀏覽器加載一個頁面的時候，是按照自上而下的順序加載的，若將script標(biāo)簽寫到head內(nèi)部，在代碼執(zhí)行時候，頁面還沒有加載，頁面中的DOM對象也沒有加載。就會導(dǎo)致js中無法獲取頁面中的DOM對象。解決方法：onload事件，會在整個頁面加載完之后才觸發(fā)，為window綁定一個onload事件，該事件對應(yīng)的響應(yīng)函數(shù)將會在頁面加載完成之后執(zhí)行，這樣可以確保我們的代碼執(zhí)行時所有的DOM對象已經(jīng)加載完了
<style>
button{
width:100px;
height:100px;
background-color:green;
margin:0 auto;
font-size:30px;
}
</style>
</head>
<body>
<div></div>
<button id="button">點(diǎn)擊</button>
<script>
window.onload = function (ev) {
var btn = document.getElementById("button");
btn.onclick = function (ev) {
alert("成功了");
}
}
</script>
</body>
運(yùn)行顯示：
點(diǎn)擊按鈕
二、文檔頁面元素獲取
根據(jù)id、標(biāo)簽名、name、類名、選擇器獲取元素
<script>
window.onload = function (ev) {
var btn = document.getElementById("button");
btn.onclick = function (ev) {
alert("成功了");
}
}
window.onload = function (ea) {
var btn1 = document.getElementById("button")
console.log(btn1);
var btn2 = document.getElementsByClassName("button2");
console.log(btn2[0]);
var btn3 = document.getElementsByTagName("button");
console.log(btn3[0]);
var btn4 = document.getElementsByName("button3");
console.log(btn4[0]);
var btn5 = document.querySelector("#button2");
console.log(btn5);
var btn6 = document.querySelectorAll("#button1");
console.log(btn6[0]);
}
</script>
運(yùn)行顯示：
三、源碼：
地址:https://github.com/ruigege66/JavaScript/blob/master/D27_1_Document.html
博客園：https://www.cnblogs.com/ruigege0000/
CSDN：https://blog.csdn.net/weixin_44630050?t=1
腳本之家：http://chabaoo.cn/article/191885.htm
到此這篇關(guān)于JavaScript文檔加載模式以及元素獲取的文章就介紹到這了,更多相關(guān)JavaScript 文檔加載 元素獲取內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JS為promise增加abort功能，想了解JS異步的同學(xué)，可以參考下2021-04-04
JS中video標(biāo)簽自動播放音視頻并繪制波形圖效果
html中的<video>標(biāo)簽可以用來播放常見的音視頻格式，支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等，當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān)，這篇文章主要介紹了video標(biāo)簽自動播放音視頻并繪制波形圖,需要的朋友可以參考下2023-09-09
JS實(shí)現(xiàn)標(biāo)簽頁效果(配合css)
實(shí)現(xiàn)的效果是當(dāng)鼠標(biāo)移到某一個標(biāo)簽的時候，在下面的內(nèi)容區(qū)顯示對應(yīng)的內(nèi)容，并且相應(yīng)標(biāo)簽的顏色需要改變,這樣的效果是CSS和JS配合實(shí)現(xiàn)的,下面我們就來看看具體代碼2013-04-04
這篇文章主要介紹了JS實(shí)現(xiàn)日期加減的方法，有需要的朋友可以參考一下2013-11-11
利用uni-app和uView實(shí)現(xiàn)多圖上傳功能全過程
最近在使用uniapp開發(fā)的微信小程序中使用了圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于利用uni-app和uView實(shí)現(xiàn)多圖上傳功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
本篇文章主要介紹了js中DOM實(shí)現(xiàn)三級列表的代碼，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
JavaScript數(shù)組去重的五種方法及其他細(xì)節(jié)和拓展
JavaScript數(shù)組去重這個問題,經(jīng)常出現(xiàn)在面試題中,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的五種方法及其他細(xì)節(jié)和拓展的相關(guān)資料,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼
用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼,需要的朋友可以參考下。2007-03-03
這篇文章主要介紹了繼承行為在 ES5 與 ES6 中的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
分享一個自定義的console類 讓你不再糾結(jié)JS中的調(diào)試代碼的兼容
在寫JS的過程中，為了調(diào)試我們常常會寫很多 console.log、console.info、console.group、console.warn、console.error代碼來查看JS的運(yùn)行情況，但發(fā)布時又因?yàn)镮E不支持console，又要去掉這些代碼，一不小心就會出錯2012-04-04