【重學JS】鞏固基礎-day11-DOM文檔對象模型

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

☆☆☆ 溫故而知新! 今天學習鞏固的內容(DOM-文檔對象模型) 重要!! 今天依然要加油喲!! ☆☆☆

可做爲初學者的學習路線, 可參考一下, 學習進度也不是特別趕! 持續更新,

用本身的理解, 簡單又全面歸納基礎知識點, 大部份內容爲白話文內容, 基礎中的基礎 方便加深理解!

鞏固學習 JavaScript 基礎知識, 加深理解記憶, 打牢地基才能築高樓! 加油

開始今天的學習吧! 認真對待!!

一、梳理昨天學習知識點

• BOM 模型（瀏覽器對象模型） ：

  location、 history、 event、 document、 screen、 navigator、 window

• window 對象有哪些常見方法 ：

  alert   prompt confirm setInterval   setTimeout open("url","","外觀")   close

• location : 頁面跳轉

  location.href = url

  assign()  replace()

• document 查找頁面元素的方式 :

  對元素操做

  • 樣式操做   .style.樣式   .style.cssText   .className
  • 屬性操做
  • 內容操做

  value、 innerHTML、   innerText

二、DOM  document  object model   文檔對象模型

2.1 節點 ： 

html 爲 dom 根節點

• 全部的 html 元素都叫作元素節點
• 全部元素節點的屬性 叫作屬性節點    好比 ： src 屬性
• 全部元素節點的內容 叫作文本節點    好比 ： <p>文本節點</p>
• 一切都是節點

2.2 節點關係(屬性，經過這些節點關係屬性   找到相關元素) ：

父節點 ： parentNode

• 第一個孩子節點：  firstElementChild(沒有 Element 表示兼容 IE firstChild)

• 最後孩子節點 ：  lastElementChild

• 前一個兄弟節點 ： previousElementSibling

• 後一個兄弟節點 ： nextElementSibling

• 孩子節點 ：

  • children
  • childNodes

tagName 或 nodeName 獲取標籤名

2.3 區分節點類型屬性 nodeType

值有三種狀況

            nodeType 值
    元素節點      1
    文本節點      3
    屬性節點      2
複製代碼

三、節點的動態操做  （建立     添加     刪除）

建立     添加     刪除

3.1 建立 ： 

document.createElement()   建立元素節點

document.createTextNode();   建立文本節點（瞭解）

注意 ： 動態建立的元素   添加事件時， 事件添加在動態建立元素以後（在同一個函數體內部 ）

也能夠經過委託實現

3.2 添加:   appendChild():

用法 ：   父節點.appendChild(要添加的節點)

insertBefore()

用法:

父節點.insertBefore( 要添加的子節點 , 參照節點 )

若是參照節點爲 null ， 默認是 同 appendChild 效果   追加

必定要寫滿兩個參數

3.3 刪除 ： removeChild()   或 remove()

• 父節點.removeChild( 要刪除的元素 )

• 要刪除的元素.remove()

四、節點克隆

cloneNode( )

若是有參數 true， 表示即克隆元素自己，又克隆內容     深克隆

若是不加參數 true ， 只克隆元素自己               淺克隆

五、文檔碎片 :

至關於 計算機 緩存 ，

• 做用 ： 提升程序的執行效率

document.createDocumentFragment()

---

面試題 ：

請準確編寫這樣一個函數：

該函數接受兩個參數，第一個參數爲一個 DOM 元素，第二個參數爲一個正整數， 要求第二個參數傳入的數字是幾，就向 DOM 元素上掛載幾個<div>hello world</div>標籤，實現過程當中，請考慮 JS 性能優化。

function fn( ele , m ){...}
複製代碼

六、節點屬性動態操做

getAttribute()  

能夠獲取自定義和固有 屬性值

obj.getAttribute(「屬性名」)
複製代碼

setAttribute()

設置屬性

obj.setAttribute("屬性",「值」)
複製代碼

---

預告: 加油, 追夢人

學習就是一個不斷進行的過程, 堅持下去, 定有收穫!

日積月累, 鞏固基礎, 早進大廠!

堅持很不容易, 堅持下來更不容易, 你真棒!

Calm Down & Carry On!

更多閱讀:

前文更新回顧

【重學 JS】天天學習鞏固基礎:

【day1】js 初始

【day2】各類運算符、

【day3】數據類型、

【day4】循環結構 & 條件語句、

【day5】函數(重點)、

【day6】做用域 & 事件、

【day7】對象 & 數組方法總結、

【day8】字符串方法 & 部分排序、

【day9】Math 對象 & 封裝函數、

【day10】BOM-瀏覽器對象模型、

更多期待再路上...任重而道遠