[華為云在線課程][JavaScript的DOM編程][學習筆記]

第1章，JavaScript的DOM對象

1.1，JavaScript的DOM節點和DOM樹

HTML的DOM定義：

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

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

HTML DOM把HTML文檔呈現，帶有元素、屬性和文本的樹形結構

Document（文檔）：表示的就是整個HTML網頁文檔

Object（對象）：表示網頁中每一部分都轉換成立一個對象

Model（模型）：使用模型來表示對象之間的關系，這樣方便我們獲取對象

DOM樹

DOM節點定義：

HTML文檔中的每個部分都是一個節點

DOM的規定如下：

整個文檔是一個文檔節點

每個HTML標簽是一個元素節點

包含在HTML元素中的文本是文本節點

每一個HTML屬性是一個屬性節點

DOM節點關系：

節點樹中的節點彼此擁有層級關系

父（parent），子（child）和同胞（sibling）等術語用于描述這些關系，父節點擁有子節點，同級的子節點被稱為同胞。

節點層級關系描述：

在節點樹中，頂端節點被稱為根（root）

每個節點都有父節點、除了根（它沒有父節點）

一個節點可擁有任意數量的自節點

同胞是擁有相同父節點的節點

1.2，JavaScript的DOM節點查找

JavaScript的DOM節點查找兩種方式：

1，直接查找節點

按照id查找，拿到的是一個標簽對象；document.getElementById(idname);

按照class標簽去找，獲取的是一個數組里存放的標簽；document.getElementByClassName(classname);

通過標簽名去找，獲取的也是一個數組；document.getElementByTagName(tagname);

按照name屬性去找，獲取的也是一個數組；document.getElementByName(name);

獲取html的方法：document.documentElement;

獲取body的方法：document.body;

通過選擇器獲取一個元素：querySelector;

通過選擇器獲取一組元素：querySelectorAll;

JavaScript的DOM直接查找節點案例：

你喜歡哪個城市？

• 北京
• 上海
• 杭州
• 深圳

你喜歡哪款單機游戲？

• 紅警
• 實況
• 極品飛車
• 魔獸

JavaScript的DOM節點查找兩種方式：

2，導航查找節點：通過某一個標簽的位置去查找另一個標簽

父節點標簽元素：parentElement;

所有子標簽：children;

第一個子標簽元素：firstElementChild;

最后一個子標簽元素：lastElementChild;

下一個兄弟標簽元素：nextElementSibling;

上一個兄弟標簽元素：previousElementSibling;

JavaScript的DOM導航查找節點案例：

你喜歡哪個城市？

• 北京
• 上海
• 東京
• 首爾

你喜歡哪個城市？

• 北京
• 上海
• 東京
• 首爾

1.3，JavaScript的DOM節點操作

創建節點：createElement(標簽名)：創建一個指定名稱的元素

添加節點：

追加一個子節點（作為最后的子節點），node.appendChild(newnode);

把增加的節點放到某個節點的前邊，node.insertBefore(newnode,某個節點);

刪除節點：removeChild()：獲得要刪除的元素，通過父元素調用刪除

替換節點：node.replaceChild(newnode,某個節點);

JavaScript的DOM節點操作案例：

1.4，JavaScript的DOM節點屬性操作

1，獲取文本節點的值：innerText innerHTML

innerText：不管你是賦值還是取值，只能識別純文本

innerHTML：既可以識別純文本，也可以識別標簽

2，屬性（attribute）操作：

elementNode.setAttribute(name,value);

elementNode.getAttribute(屬性名);

elementNode.removeAttribute("屬性名");

3，獲取當前選中的value值：

input

select

textarea

請選擇值： 南京 北京

4，對class的操作：

className：打印樣式名稱

add：添加樣式

remove：移除樣式

5，對樣式css的操作：

標簽對象.style.樣式屬性=“具體值”;

Hello World!

第2章，JavaScript的DOM事件

2.1，JavaScript的DOM事件流

事件流描述的是從頁面中接受事件的順序

事件發生時會在元素節點與根節點之間按照特定的順序傳播，路徑所經過的所有節點都會收到該事件，這個傳播過程即DOM事件流

事件傳播的順序對應瀏覽器的兩種事件流模型：捕獲型事件流和冒泡型事件流：

冒泡型事件流：事件的傳播是從最特定的事件目標到最不特定的事件目標。即從DOM樹的葉子到根

捕獲型事件流：事件的傳播是從最不特定的事件目標到最特定的事件目標。即從DOM樹的根到葉子

JavaScript的DOM事件流的事件冒泡案例：

JavaScript的DOM事件流的事件捕獲案例：

2.2，JavaScript的DOM事件處理程序

1，HTML事件處理程序：

HTML事件處理程序就是直接把事件添加到HTML結構中

2，JavaScript傳統事件處理程序：

JavaScript中非常傳統的方式，就是在一個元素上直接綁定方法，即先獲取元素，再以屬性方式添加事件

該方式也叫做DOM0級事件處理程序

直接通過onclick把事件綁定在html上

通過給事件賦值null的形式就可以清理我們DOM0級事件，oBtn.onclick=null;

同一級元素的同一種事件只能綁定一個函數，否則后面的函數就會覆蓋前面的函數

不存在兼容性問題

缺點：一個事件處理程序只能對應一個處理函數

3，W3C事件處理程序：

W3C中推薦使用addEvenListener()函數進行事件綁定，使用removeEventListener()函數刪除事件

這種方式也叫做DOM2級事件處理程序，它們都接收三個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值

2.3，JavaScript的DOM事件流阻止

1，JavaScript的DOM事件流阻止：

事件流阻止，這里阻止的是它的繼續傳播以及有可能產生的默認動作

W3C中定義了兩個方法：stopPropagation()和preventDefault()用于阻止事件流

event.stopPropagation()，方法用于阻止事件冒泡

event.preventDefault()，方法用于阻止事件的默認行為

JavaScript的DOM事件流阻止案例

2，JavaScript的DOM事件委托

事件委托，通俗來講，就是把一個元素響應事件的函數委托到另一個元素

一般來講，會把一個或者一組元素的事件委托到它的父層或者更外層元素上，真正綁定事件的是外層元素，當事件響應到需要綁定的元素上時，會通過事件冒泡機制從而觸發它的外層元素的綁定事件上，然后在外層元素上去執行函數

事件委托的優點：減少內存消耗；動態綁定事件

JavaScript的DOM事件委托案例：

• 111
• 222
• 333
• 444

• 111
• 222
• 333
• 444

JavaScript

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。