* JavaScript分三個(gè)部分:

ECMAScript標(biāo)準(zhǔn):JS的基本的語(yǔ)法

DOM:Document Object Model --->文檔對(duì)象模型----操作頁(yè)面的元素

BOM:Browser Object Model----->瀏覽器對(duì)象模型---操作的是瀏覽器

一、DOM對(duì)象

文檔:把一個(gè)html文件看成是一個(gè)文檔,由于萬(wàn)物皆對(duì)象,所以把這個(gè)文檔看成是一個(gè)對(duì)象

1.1 什么是HTML? DOM

? ? HTML? Document Object Model（文檔對(duì)象模型）

??? HTML DOM 定義了訪問(wèn)和操作HTML文檔的標(biāo)準(zhǔn)方法

??? HTML DOM 把 HTML 文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù))

1.2 DOM樹(shù)

?

畫(huà)dom樹(shù)是為了展示文檔中各個(gè)對(duì)象之間的關(guān)系，用于對(duì)象的導(dǎo)航。

html文件看成是一個(gè)文檔,那么這個(gè)文檔看成是一個(gè)對(duì)象,文檔中的所有的標(biāo)簽都可以看成是一個(gè)對(duì)象

頁(yè)面中的每個(gè)標(biāo)簽,都是一個(gè)元素(element),每個(gè)元素都可以看成是一個(gè)對(duì)象

標(biāo)簽可以嵌套,標(biāo)簽中有標(biāo)簽,元素中有元素

html頁(yè)面中都有一個(gè)根標(biāo)簽--html--也叫根元素

頁(yè)面中的有一個(gè)根元素(標(biāo)簽--html),里面有很多的元素(有很多的標(biāo)簽,有很多的對(duì)象)

文檔:一個(gè)頁(yè)面就是一個(gè)文檔

元素(element):頁(yè)面中的所有的標(biāo)簽都是元素,元素可以看成是對(duì)象

節(jié)點(diǎn)(node):頁(yè)面中所有的內(nèi)容都是節(jié)點(diǎn):標(biāo)簽,屬性,文本

root:根

1.3 事件概念

點(diǎn)擊操作:------>事件:就是一件事,有觸發(fā)和響應(yīng),事件源

按鈕被點(diǎn)擊,彈出對(duì)話框

按鈕---->事件源

點(diǎn)擊---->事件名字

被點(diǎn)了--->觸發(fā)了

彈框了--->響應(yīng)

?1.4 初次體驗(yàn)

第一個(gè)版本

html代碼,點(diǎn)擊按鈕彈出對(duì)話框,對(duì)話框:alert()====>js的代碼

html代碼中嵌入了js的代碼,不方便后期的修改和維護(hù)

<input type="button" value="顯示效果" onclick="alert('我被點(diǎn)了')" />

第二個(gè)版本

js代碼很多,但是沒(méi)有分離html和js該怎么做

<script>function f1() {//函數(shù)中可以寫(xiě)很多的代碼 alert("這是一個(gè)對(duì)話框");} </script> <input type="button" value="顯示效果" onclick="f1()"/>

第三個(gè)版本

開(kāi)始分離html和js

<input type="button" value="開(kāi)始分離代碼" id="btn" /><script>function f2() {alert("開(kāi)發(fā)分離html和js代碼");}function f2() {alert("嘎嘎");}//html標(biāo)簽中的id屬性中存儲(chǔ)的值是唯一的,//id屬性就像人的身份證號(hào)碼一樣,不能重復(fù),頁(yè)面中的唯一的標(biāo)識(shí)//從文檔中找到id值為btn的這個(gè)標(biāo)簽(元素)//document.getElementById("id屬性的值");======>返回的是一個(gè)元素對(duì)象//根據(jù)id獲取這個(gè)標(biāo)簽(元素)var btnObj=document.getElementById("btn");//為按鈕注冊(cè)點(diǎn)擊事件 btnObj.onclick=f2;//不加括號(hào) </script>

最終的版本代碼

<input type="button" value="最終版" id="btn1"/> <script> // //根據(jù)id屬性的值從整個(gè)文檔中獲取這個(gè)元素(標(biāo)簽)var btnObj1=document.getElementById("btn1");//為該元素注冊(cè)點(diǎn)擊事件 btnObj1.onclick=function () {alert("哦,這真是太好了");};//根據(jù)id屬性的值從整個(gè)文檔中獲取這個(gè)元素(標(biāo)簽) //為該元素注冊(cè)點(diǎn)擊事件 document.getElementById("btn1").onclick=function () {alert("哦,這真是太好了"); }; </script>

?

轉(zhuǎn)載于:https://www.cnblogs.com/dongye95/p/9185895.html

總結(jié)

以上是生活随笔為你收集整理的JS的DOM和BOM的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。