* JavaScript分三個部分:

ECMAScript標準:JS的基本的語法

DOM:Document Object Model --->文檔對象模型----操作頁面的元素

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

一、DOM對象

文檔:把一個html文件看成是一個文檔,由于萬物皆對象,所以把這個文檔看成是一個對象

1.1 什么是HTML? DOM

? ? HTML? Document Object Model（文檔對象模型）

??? HTML DOM 定義了訪問和操作HTML文檔的標準方法

??? HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹)

1.2 DOM樹

?

畫dom樹是為了展示文檔中各個對象之間的關系，用于對象的導航。

html文件看成是一個文檔,那么這個文檔看成是一個對象,文檔中的所有的標簽都可以看成是一個對象

頁面中的每個標簽,都是一個元素(element),每個元素都可以看成是一個對象

標簽可以嵌套,標簽中有標簽,元素中有元素

html頁面中都有一個根標簽--html--也叫根元素

頁面中的有一個根元素(標簽--html),里面有很多的元素(有很多的標簽,有很多的對象)

文檔:一個頁面就是一個文檔

元素(element):頁面中的所有的標簽都是元素,元素可以看成是對象

節點(node):頁面中所有的內容都是節點:標簽,屬性,文本

root:根

1.3 事件概念

點擊操作:------>事件:就是一件事,有觸發和響應,事件源

按鈕被點擊,彈出對話框

按鈕---->事件源

點擊---->事件名字

被點了--->觸發了

彈框了--->響應

?1.4 初次體驗

第一個版本

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

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

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

第二個版本

js代碼很多,但是沒有分離html和js該怎么做

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

第三個版本

開始分離html和js

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

最終的版本代碼

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

?

轉載于:https://www.cnblogs.com/dongye95/p/9185895.html

總結

以上是生活随笔為你收集整理的JS的DOM和BOM的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。