JavaScript中DOM：document（網頁

JavaScript中DOM：document（網頁）

.1 DOM: document=網頁

在JS中，瀏覽器已經為我們提供了document對象

document對象代表整個網頁，該對象由瀏覽器提供，可以直接使用

<body>

<button id="btn">我是一個按鈕</button>

<script>

// 在JS中，瀏覽器已經為我們提供了document對象

// document對象代表整個網頁，該對象由瀏覽器提供，可以直接使用

// getElementById()是document的方法，通過方法可以根據元素的id屬性獲取一個元素

var btn=document.getElementById('btn');

// 修改btn的innerHTML屬性

btn.innerHTML="I'm Button";

// alert(btn.innerHTML);

// alert(btn);

// 通過JS來修改button中的文字

</script>

</body>

對象的分類:

JS中，可以將對象分為“內部對象”、“宿主對象”和“自定義對象”三種。

1，內部對象

js中的內部對象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各種錯誤類對象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

其中Global和Math這兩個對象又被稱為“內置對象”，這兩個對象在腳本程序初始化時被創建，不必實例化這兩個對象。

2.宿主對象

宿主對象就是執行JS腳本的環境提供的對象。對于嵌入到網頁中的JS來說，其宿主對象就是瀏覽器提供的對象，所以又稱為瀏覽器對象，如IE、Firefox等瀏覽器提供的對象。不同的瀏覽器提供的宿主對象可能不同，即使提供的對象相同，其實現方式也大相徑庭！這會帶來瀏覽器兼容問題，增加開發難度。

瀏覽器對象有很多，如Window和Document，Element，form，image，等等。

3.自定義對象

顧名思義，就是開發人員自己定義的對象。JS允許使用自定義對象，使JS應用及功能得到擴充

1.2 事件（event）

事件（event）

- 事件指用戶和瀏覽器的交互瞬間

- 在網頁中，像點擊鼠標、縮放窗口、點擊鍵盤、移動鼠標...

- 可以在事件時來對事件做一些處理，對其進行響應

<body>

<!-- 設置事件響應的方式一:

- 可以通過在元素的事件屬性中設置js代碼的形式來響應事件

https://developer.mozilla.org/zh-CN/docs/Web/Events -->

<!--<button id="btn" onmouseenter="alert('你點我干嘛！');">點我一下</button>-->

<button id="btn">點我一下</button>

<script>


/*設置事件響應的方式二:

- 可以在script標簽來設置事件的響應*/

// 獲取要設置事件的對象

var btn=document.getElementById('btn');

// 可以為元素對應的事件屬性設置響應函數形式來處理事件

btn.onclick=function () {

alert('哈哈哈');

};

</script>

</body>

1.3網頁加載window.onload:

網頁的加載是按照自上向下的順序一行一行加載的

Window.onload 函數只能綁定一個!

如果將script標簽寫在網頁的上方，它會優先于body加載

編寫DOM相關的代碼時，有兩個編寫位置：

1.編寫在body標簽的最后

2.編寫在window.onload=function(){}的響應函數中

// 希望還是將代碼寫在網頁上邊

// 希望這些代碼，可以在網頁加載完畢之后在執行

// load事件表示資源加載，當資源加載完畢后事件會觸發

window.onload=function () {

// window的load事件，會在網頁加載完畢后觸發

// 可以將希望在網頁加載完才執行的代碼，統一設置在load事件的響應函數中

// 這樣即可確保代碼在網頁加載完成后才執行

//獲取id為btn的元素

var btn=document.getElementById('btn');

//為btn綁定單擊響應函數

btn.onclick=function () {

alert('哈哈哈哈');

};

};

1.4 DOM 查詢:

<script>

//定義一個函數，用來解決綁定代碼重復的問題

/*

參數：

id 要綁定單擊事件的按鈕的id

callback 事件的響應函數

*/

function myClick(id, callback){

var btn=document.getElementById(id);

btn.onclick=callback;

}

window.onload=function () {

//為id為btn01的按鈕綁定一個單擊響應函數

//獲取按鈕對象

var btn01=document.getElementById('btn01');

// 為其綁定單擊響應函數

btn01.onclick=function () {

// getElementById()用來根據id屬性來獲取一個元素

// 查找#bj節點

var bj=document.getElementById('bj');

// innerHTML 可以用來查看和設置元素內部的html代碼

alert(bj.innerHTML);

};

// 為btn02綁定一個單擊響應函數

var btn02=document.getElementById('btn02');

btn02.onclick=function () {

// 查找所有li節點

// getElementsByTagName() 用于根據標簽名來獲取一組元素節點對象

// 返回是一個類數組對象，所有符合條件的元素都會一起返回

var lis=document.getElementsByTagName('li');

// 遍歷數組

for(var i=0; i<lis.length; i++){

alert(lis[i].innerHTML);

}

};

//為id為btn03的按鈕綁定一個單擊響應函數

var btn03=document.getElementById('btn03');

btn03.onclick=function () {

// 查找name=gender的所有節點

// getElementsByName() 根據元素的name屬性來獲取一組元素節點對象

var inps=document.getElementsByName('gender');

// 遍歷inps

for(var i=0; i<inps.length; i++){

// 獲取自結束標簽的innerHTML，會返回空串

// alert(inps[i].innerHTML);

/*

讀取一個元素的屬性：

元素.屬性名

例子：

name屬性 元素.name

value屬性 元素.value

id屬性 元素.id

特殊：

class屬性 元素.className

修改屬性：

元素.屬性名=屬性值

*/

// alert(inps[i].className);

alert(inps[i].value);

}

};

//為btn04綁定一個單級響應函數

var btn04=document.getElementById('btn04');

btn04.onclick=function () {

// 獲取id為city的節點

var city=document.getElementById('city');

// 查找#city下所有li節點

var li=city.getElementsByTagName('li');

// li=document.querySelectorAll('#city li');

alert(li.length);

};

// 為btn05綁定一個單擊響應函數

var btn05=document.getElementById('btn05');

btn05.onclick=function () {

// 獲取id為city的元素

var city=document.getElementById('city');

// 返回#city的所有子節點

// childNodes 是元素的屬性，可以用來獲取當前元素的所有子節點

// childNodes會返回當前元素的所有子節點（包括元素和文本）

// IE8以下的瀏覽器不會將空白的文本節點當成子節點

var cns=city.childNodes;

//遍歷cns

// for(var i=0; i<cns.length; i++){

// alert(cns[i]);

// }

// alert(cns.length);

/*

children 是元素的屬性，用來獲取當前元素的子元素

*/

var cr=city.children;

alert(cr.length);

};

// 為id為btn06的按鈕綁定一個單擊響應函數

myClick('btn06', function () {

// 獲取id為phone的元素

var phone=document.getElementById('phone');

// 返回#phone的第一個子節點

// firstChild用于獲取元素的第一個子節點（包括空白的文本節點）

// lastChild 用于獲取當前元素的最后一個子節點

// firstElementChild 用來獲取當前元素的第一個子元素

// lastElementChild 用來獲取當前元素的最后一個子元素

var fc=phone.firstChild;

var fec=phone.firstElementChild;

alert(fec);

});

myClick('btn07',function () {

//獲取id為北京元素

var bj=document.getElementById('bj');

// 返回#bj的父節點

// parentNode 用來獲取一個元素的父節點

var pn=bj.parentNode;

// innerText用來獲取標簽內部的文本內容，會自動去除html標簽

alert(pn.innerText);

});

myClick('btn08',function () {

// 獲取id為android的元素

var and=document.getElementById('android');

// 返回#android的前一個兄弟節點

// previousSibling 用來獲取當前元素的前一個兄弟節點

// previousElementSibling 用來獲取當前元素的前一個兄弟元素

// nextSibling 獲取當前元素的下一個兄弟節點

// nextElementSibling 獲取當前元素的下一個兄弟元素

var prev=and.previousSibling;

prev=and.previousElementSibling;

// and.nextElementSibling

alert(prev);

});

// 返回#username的value屬性值

myClick('btn09',function () {

// 獲取id為username的元素

var um=document.getElementById('username');

alert(um.value);

});

// 設置#username的value屬性值

myClick('btn10',function () {

var um=document.getElementById('username');

um.value="老弟可真帥啊！";

});

// 返回#bj的文本值

myClick('btn11',function () {

// 獲取id為bj的元素

var bj=document.getElementById('bj');

// alert(bj.innerHTML);

// alert(bj.innerText);

// bj.innerHTML='深圳';

// 獲取bj的第一個子節點

// var fc=bj.firstChild;

// 文本節點的nodeValue，表示的是文本節點中的文字

// alert(fc.nodeValue);

alert(bj.firstChild.nodeValue);

});

};

</script>

</head>

<body>

<div id="total">

<div class="inner">

<p>

你喜歡哪個城市?

</p>

<ul id="city">

<li id="bj">北京</li>

<li>上海</li>

<li>東京</li>

<li>首爾</li>

</ul>

<br>

<br>

<p>

你喜歡哪款單機游戲?

</p>

<ul id="game">

<li id="rl">紅警</li>

<li>實況</li>

<li>極品飛車</li>

<li>魔獸</li>

</ul>

<br />

<br />

<p>

你手機的操作系統是?

</p>

<ul id="phone">

<li>IOS</li>

<li id="android">Android</li><li>Windows Phone</li></ul>

</div>

<div class="inner">

gender:

<input class="haha" type="radio" name="gender" value="male" >

Male

<input class="haha" type="radio" name="gender" value="female">

Female

<br>

<br>

name:

<input type="text" name="name" id="username" value="abcde">

</div>

</div>

<div id="btnList">

<div><button id="btn01">查找#bj節點</button></div>

<div><button id="btn02">查找所有li節點</button></div>

<div><button id="btn03">查找name=gender的所有節點</button></div>

<div><button id="btn04">查找#city下所有li節點</button></div>

<div><button id="btn05">返回#city的所有子節點</button></div>

<div><button id="btn06">返回#phone的第一個子節點</button></div>

<div><button id="btn07">返回#bj的父節點</button></div>

<div><button id="btn08">返回#android的前一個兄弟節點</button></div>

<div><button id="btn09">返回#username的value屬性值</button></div>

<div><button id="btn10">設置#username的value屬性值</button></div>

<div><button id="btn11">返回#bj的文本值</button></div>

</div>

</body>

1.5Dom練習切換圖片:

<style>

#outer{

width: 520px;

background-color: #bfa;

margin: 50px auto;

text-align: center;

}

img{

vertical-align: bottom;

margin: 10px;

}

</style>

<script>

window.onload=function () {

// 點擊按鈕切換圖片，點擊上一張切換到上一張，點擊下一張切換到下一張

// 獲取圖片標簽

var img=document.getElementsByTagName('img')[0];

// 切換圖片實際上就是修改img的src屬性

// img.src="img/3.jpg";

// 創建一個數組，用來存儲圖片的路徑

var imgPath=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];

//創建一個變量用來存儲當前顯示的圖片的索引

var current=0;

// 設置圖片的信息

var info=document.getElementById('info');

info.innerHTML='一共 '+imgPath.length+' 張圖片，當前第 '+(current+1)+' 張';

//為兩個按鈕綁定單擊響應函數

var prev=document.getElementById('prev');

var next=document.getElementById('next');

// 如何做到在五張圖片之間切換？

prev.onclick=function () {

// 上一張

// 索引自減

current--;

//判斷current是否小于0

if(current < 0){

current=imgPath.length - 1;

}

// 修改img的src來切換圖片

img.src=imgPath[current];

// 圖片切換完畢，修改信息

info.innerHTML='一共 '+imgPath.length+' 張圖片，當前第 '+(current+1)+' 張';

};

next.onclick=function () {

// 下一張

// 索引自增

current++;

//判斷current是否大于4

if(current > imgPath.length - 1){

current=0;

}

img.src=imgPath[current];

info.innerHTML='一共 '+imgPath.length+' 張圖片，當前第 '+(current+1)+' 張';

};

};

</script>

</head>

<body>

<div id="outer">

<p id="info">一共 5 張圖片，當前第 1 張</p>

<img src="img/1.jpg" alt="冰棍">

<button id="prev">上一張</button>

<button id="next">下一張</button>

</div>

</body>

1.6DOM 其它查詢方法:

getElementsByName()它返回的是一個實時更新的數組所有的getElementsXxx的方法都是這個特點==頁面代碼加載完成后才更新添加

querySelector()- 可以根據選擇器的字符串去頁面中查詢元素

- 會返回滿足選擇器的第一個元素

querySelectorAll() //兩種都是靜態獲取

- 根據選擇器獲取一組元素節點對象

<script>

//getElementsByName()它返回的是一個實時更新的數組 所有的getElementsXxx的方法都是這個特點==頁面代碼加載完成后才更新添加

// 如果在網頁中添加新的符合條件的元素，它會自動被添加到數組中

window.onload=function () {

// getElementsByClassName() 用于根據元素的class屬性值來獲取一組元素節點對象

var box1=document.getElementsByClassName('box1');

// alert(box1.length);

// for(var i=0; i<box1.length; i++){

// box1[i].innerHTML='哈哈哈哈哈哈';

// }

/*

querySelector()- 可以根據選擇器的字符串去頁面中查詢元素

- 會返回滿足選擇器的第一個元素

querySelectorAll() //兩種都是靜態獲取

- 根據選擇器獲取一組元素節點對象

*/

var result=document.querySelector('.box1');

result=document.querySelectorAll('.box1');

result=document.querySelector('[class=box1]');

result=document.querySelector('div');

result=document.querySelector('div:nth-child(2)');

// alert(result.innerHTML);

/*

document.all 是一個過時的屬性

它表示頁面中的所有元素

可以使用 document.getElementsByTagName('*') 來代替

document.body 獲取頁面中的body元素

document.documentElement 獲取頁面的根元素html

*/

// alert(document.all.length);

// var all=document.getElementsByTagName('*');

// alert(all.length);

// alert(document.body);

// alert(document.getElementsByTagName('body')[0]);

alert(document.documentElement);

};

</script>

</head>

<body>

<div class="box1">1</div>

<div class="box1">2</div>

<div class="box1">3</div>

<div class="box1">4</div>

</body>

歡迎關注我的原創文章：小伙伴們！我是一名熱衷于前端開發的作者，致力于分享我的知識和經驗，幫助其他學習前端的小伙伴們。在我的文章中，你將會找到大量關于前端開發的精彩內容。

學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師，還是僅僅對前端開發感興趣，我的文章將能為你提供寶貴的指導和知識。

在我的文章中，你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識，并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者，我的文章都能夠滿足你的學習需求。

此外，我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展，新的框架和工具層出不窮。通過我的文章，你將會了解到最新的前端技術趨勢，并了解如何應對這些變化。

我深知學習前端不易，因此我將盡力以簡潔明了的方式解釋復雜的概念，并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發，并提升你的技能。

如果你想了解更多關于前端開發的內容，不妨關注我的原創文章。我會不定期更新，為你帶來最新的前端技術和知識。感謝你的關注和支持，我們一起探討交流技術共同進步，期待與你一同探索前端開發的奇妙世界！

#2023年度創作挑戰#

錯，是我，你沒有走錯片場，從今天開始，打算在自己公眾號里寫一些自己學習HTML、CSS、JS過程中的一些心得和代碼。

今天算是第一天吧，是照著別人的視頻一邊抄一邊寫的。時間有點倉促，沒來得及做注釋。雖然代碼各種不規范，但是好歹運行成功了（封面圖和下圖為證）。以此紀念吧！

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

}

@font-face{

font-family: "qingshu";

src:url("MFQingShu_Noncommercial-Regular.ttf");//本地字體

}

#pp{

font-family: "qingshu";

margin: 0；

padding:0;

width: 600px;

height: 600px;

background: orange;

line-height: 600px;

font-size: 100px;

text-align: center;

text-shadow: 5px 5px blue;

transform: scale(0.5) translate(200px,50px);

transform: scale(0.5) rotate(180deg);

box-shadow: 10px;

}

h3{

margin-left: 200px;

}

</style>

window.onload=function Time(){

var time=new Date;

var hour=time.getHours();

var min=time.getMinutes();

var sec=time.getSeconds();

document.getElementById("pp").innerHTML="時間："+hour+":"+min+":"+sec;

setTimeout(window.onload,1000)

}

</script>

</head>

<body>

<h3>

2018年11月8日練習

</h3>

</body>

</html>

最后，希望看完的各位，不要取關。。。

為了開原創，加上了，昨晚上寫的廢話。。。

人也許只有選對了路，才會覺得努力不會白費。即便路上掙扎和苦悶，但是，你做的事情如果真的是自己想做的事情，這些困難都不事兒。

一直覺得，人最可怕的莫過于自己都不知道自己喜歡啥。。。

追逐夢想并不是最累的，尋找到真正屬于自己的道路才是最辛苦的。因為期間，你將經歷無數次選擇以及伴隨而來的內心的情緒起伏和失望。

發現自己很多時候，內心對很多人很多事都是充滿敬畏感的。但是自己的外在表現卻又是對大多人和事不屑一顧。。。這也許就是傳說中的心口不一吧！

也許你覺得領導交代給你的工作，是信任你，幫你提高個人能力，或者說是給你鍛煉和學習的機會。

然而，事實并不是這樣的。領導只是面對要解決的問題，只是在尋找合適去做這件事情或者其他人不愿意做的人。至于領導口中的鍛煉和學習，只是嘴里的漂亮話而已。

還有，領導總喜歡拿一些非常基礎的工作來測試你的工作態度。

這個做法尤其喜歡用在新來的員工身上，這些工作還要求新來的不能投機取巧，要用最笨方法去做，名曰磨練和考驗。

這些做法看似沒啥問題，可是人做很多事都會有慣性。這些“新來的”也許半年后還在做這些基礎工作。

而對于一些比較牛的技術人員，對于這些工作，大多數會選擇拒絕，他們可以找到更高層級的工作，而不是每天被這些瑣事所累！

對于這些人，他們甚至直接出錢把這些瑣事交給閑人去做。

這種境界，也只有到了這個高度的人才能體會到。

然而，如今的一些小公司，大多數領導和員工的能力都不強，于是只能交代給你最基礎的工作，工資當然也是最基礎的。

對于這些瑣事，你也并不愛做，但卻不得不做。因為你已經會做而且已經做的爛熟于心了。

而尋找其本質，你只不過是幫領導干活的一個勞動工具而已。談那么多的理想，都是扯淡。

最近覺得，自己的狀態一直是被公司的工作所綁架了，其中包括時間和精力。

我這人吧，心不狠，又不會拒絕別人。自己的工作也可能會因為時間有限或者業務不精干的一塌糊涂。所以，我這人一直活得太累。

人能活在這個世界上，都不容易。每個人都是在辛苦的過著日子。也許你擅長人際關系，你去搞銷售，搞管理。

你擅長做事情或者琢磨東西，那就去做技術或者研發。

那些看似被你成為成長的工作大部分是在利用和浪費你的時間而已，因為，你真的不一定能從中學到東西。你也無法面面俱到，全都做好。

所以，我覺得人這一輩子，還是找到自己擅長的事情，并把它變成自己喜歡去做也愿意做好的事情。

總之，面對自己完全不感興趣的工作，給自己的生活和心靈留點時間和空間吧！進而尋找到自己的一技之長，這樣才能在社會中立足。

最后，路終歸是自己走的，開心與否，只有自己知道，與他人無關。。。

2018年11月9日 00：15

HTML DOM 允許 JavaScript 改變 HTML 元素的內容。

改變 HTML 輸出流

JavaScript 能夠創建動態的 HTML 內容：

今天的日期是： Thu Aug 25 2016 09:23:24 GMT+0800 (中國標準時間)

在 JavaScript 中，document.write() 可用于直接向 HTML 輸出流寫內容。

實例

<!DOCTYPE html>

<html>

<body>

document.write(Date());

</script>

</body>

</html>

	絕對不要在文檔加載完成之后使用 document.write()。這會覆蓋該文檔。

改變 HTML 內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById(id).innerHTML=新的 HTML

本例改變了 <p>元素的內容：

實例

<html>

<body>

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="新文本!";

</script>

</body>

</html>

本例改變了 <h1> 元素的內容：

實例

<!DOCTYPE html>

<html>

<body>

<h1 id="header">Old Header</h1>

var element=document.getElementById("header");

element.innerHTML="新標題";

</script>

</body>

</html>

實例講解：

上面的 HTML 文檔含有 id="header" 的 <h1> 元素
我們使用 HTML DOM 來獲得 id="header" 的元素
JavaScript 更改此元素的內容 (innerHTML)

改變 HTML 屬性

如需改變 HTML 元素的屬性，請使用這個語法：

document.getElementById(id).attribute=新屬性值

本例改變了 <img> 元素的 src 屬性：

實例

<!DOCTYPE html>

<html>

<body>

document.getElementById("image").src="landscape.jpg";

</script>

</body>

</html>

實例講解：

上面的 HTML 文檔含有 id="image" 的 <img> 元素
我們使用 HTML DOM 來獲得 id="image" 的元素
JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：2022年上海公安學院本科招生網上登記即將開始！
下一篇：css實現網站通用頭部

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript中DOM：document（網頁

.1 DOM: document=網頁

對象的分類:

1.2 事件（event）

1.3網頁加載window.onload:

1.4 DOM 查詢:

1.5Dom練習切換圖片:

1.6DOM 其它查詢方法:

您的項目需求