前端知識點(diǎn)總結(jié)——DOM

Vultr 發(fā)布于2019-08-22 14:58 / 2014人閱讀

摘要：前端知識點(diǎn)總結(jié)什么是什么是專門操作網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)為什么統(tǒng)一不同瀏覽器操作網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)優(yōu)點(diǎn)幾乎所有瀏覽器兼容什么是網(wǎng)頁中所有內(nèi)容在內(nèi)存中都是保存在一棵樹形結(jié)構(gòu)中網(wǎng)頁中每項(xiàng)內(nèi)容元素文本屬性注釋，都是樹上的一個(gè)節(jié)點(diǎn)對象。

前端知識點(diǎn)總結(jié)——DOM 1.什么是DOM: Document Object Model

什么是: 專門操作網(wǎng)頁內(nèi)容的API標(biāo)準(zhǔn)——w3c
為什么: 統(tǒng)一不同瀏覽器操作網(wǎng)頁內(nèi)容的API標(biāo)準(zhǔn)
優(yōu)點(diǎn): 幾乎所有瀏覽器100%兼容

2.DOM Tree:

什么是: 網(wǎng)頁中所有內(nèi)容在內(nèi)存中都是保存在一棵樹形結(jié)構(gòu)中
網(wǎng)頁中每項(xiàng)內(nèi)容(元素,文本,屬性,注釋...)，都是樹上的一個(gè)節(jié)點(diǎn)對象。
唯一的樹根節(jié)點(diǎn): document
為什么: 樹形結(jié)構(gòu)是最好的保存上下級包含關(guān)系的結(jié)構(gòu)

節(jié)點(diǎn)對象: Node
網(wǎng)頁中每項(xiàng)內(nèi)容都是DOM樹上的一個(gè)節(jié)點(diǎn)對象:
所有節(jié)點(diǎn)都有的三個(gè)屬性:
nodeType: 節(jié)點(diǎn)類型

何時(shí): 只要判斷節(jié)點(diǎn)的類型時(shí)
包括: 
  document  9
  element    1
  attribute   2
  text       3
問題: 無法進(jìn)一步區(qū)分元素的標(biāo)簽名

nodeName: 節(jié)點(diǎn)名稱

何時(shí): 只要進(jìn)一步判斷元素的標(biāo)簽名時(shí)
    ——可代替nodeType
包括:
 document   #document
 element     全大寫標(biāo)簽名
 attribute     屬性名——不常用!
 text        #text

nodeValue: 節(jié)點(diǎn)值 ——不常用

 document  null
 element    null
 attribute   屬性值
 text       文本內(nèi)容

3.查找: 4種:

1.不需要查找可直接獲得節(jié)點(diǎn):
document.documentElement html
document.head head
document.body body
document.forms[id/i] form

2.按節(jié)點(diǎn)間關(guān)系查找:
何時(shí): 如果已經(jīng)獲得一個(gè)節(jié)點(diǎn)了。想找周圍節(jié)點(diǎn)時(shí)。
包括: 2種樹:

節(jié)點(diǎn)樹: 包含網(wǎng)頁中所有內(nèi)容的完整樹結(jié)構(gòu)
2大類關(guān)系:
1.父子: 4種:
elem.parentNode elem的父節(jié)點(diǎn)
elem.childNodes elem的直接子節(jié)點(diǎn)
elem.firstChild elem下的第一個(gè)直接子節(jié)點(diǎn)
elem.lastChild elem下的最后一個(gè)直接子節(jié)點(diǎn)
2.兄弟: 2種:
elem.previousSibling elem的前一個(gè)兄弟元素
elem.nextSibling elem的后一個(gè)兄弟元素
問題: 受看不見的空字符的干擾!

2.元素樹: 僅包含元素節(jié)點(diǎn)的樹結(jié)構(gòu)
2大類關(guān)系:

父子: 4種:
elem.parentElement elem的父元素
elem.children elem的直接子元素
elem.firstElementChild elem下的第一個(gè)直接子元素
elem.lastElementChild elem下的最后一個(gè)直接子元素

2.兄弟: 2種:

elem.previousElementSibling  elem的前一個(gè)兄弟元素
elem.nextElementSibling      elem的后一個(gè)兄弟元素

今后只要用DOM操作網(wǎng)頁內(nèi)容，都用元素樹
說明: 元素樹不是一棵新樹，其實(shí)只是節(jié)點(diǎn)樹的一個(gè)子集

childNodes和children: 動(dòng)態(tài)集合(live collection)
什么是: 不實(shí)際存儲屬性值，每次訪問集合都重新查找DOM樹
優(yōu): 首次查找，效率高! 因?yàn)椴挥梅祷赝暾膶傩浴?br> 缺: 每次訪問集合，都會(huì)重新查找DOM樹，降低效率
遍歷:
不好: for(var i=0;i 好: for(var i=0,len=children.length;i

遍歷指定父元素下的所有后代元素: 2種:
1.遞歸: 2步:
1.定義函數(shù)僅遍歷指定父元素下的所有直接子元素
2.對每個(gè)直接子節(jié)點(diǎn)調(diào)用和父節(jié)點(diǎn)完全相同的操作
深度優(yōu)先: 當(dāng)一個(gè)節(jié)點(diǎn)同時(shí)擁有子節(jié)點(diǎn)和兄弟節(jié)點(diǎn)時(shí)，總是優(yōu)先遍歷子節(jié)點(diǎn)。
所有子節(jié)點(diǎn)遍歷完，才返回遍歷兄弟節(jié)點(diǎn)。
2.循環(huán): 2步:
1.定義迭代器:

 迭代器: 可以依次獲得每個(gè)后代元素節(jié)點(diǎn)的 專門對象
 如何: 
  創(chuàng)建: var iterator=document.createNodeIterator(
    parent, NodeFilter.SHOW_ELEMENT, null, false
  );

2.循環(huán)調(diào)用迭代器，獲得下一個(gè)節(jié)點(diǎn)對象:

 var curr=iterator.nextNode()
 內(nèi)置深度優(yōu)先遍歷的算法
 如果curr返回null，說明遍歷結(jié)束

3.按HTML查找: 4種:
1.按id查找:

var elem=document.getElementById("id")
返回值: 一個(gè)元素
  如果找不到返回null!
強(qiáng)調(diào): 1. 只能在document上調(diào)用

2.按標(biāo)簽名查找:

var elems=parent.getElementsByTagName("標(biāo)簽名")
返回值: 多個(gè)元素的集合
  如果找不到返回空集合
強(qiáng)調(diào): 1. 可在任意父元素上調(diào)用
     2. 不但找直接子元素，且在所有后代中查找

3.按name查找:

var elems=document.getElementsByName("name")
返回值: 多個(gè)元素的集合
  如果找不到返回空集合
強(qiáng)調(diào): 只能在document上調(diào)用

4.按class查找:

var elems=parent.getElementsByClassName("class")
返回值: 多個(gè)元素的集合
  如果找不到返回空集合
強(qiáng)調(diào): 1.可在任意父元素上調(diào)用
     2.不但找直接子元素，且在所有后代中查找
     3.只要元素的一個(gè)class名匹配，就能找到該元素
      強(qiáng)調(diào): 返回的集合都是動(dòng)態(tài)集合
      問題: 每次只能按一個(gè)條件查找
      當(dāng)查找條件復(fù)雜時(shí)，步驟很繁瑣
      解決: 用選擇器查找:

4.用選擇器查找:

1.僅查找一個(gè)符合條件的:

var elem=parent.querySelector("選擇器")
返回值: 一個(gè)元素
  如果找不到,返回null

2.查找多個(gè)符合條件的元素:

var elems=parent.querySelectorAll("選擇器")
返回值: 多個(gè)元素的集合
  如果找不到返回空集合
  返回非動(dòng)態(tài)集合: 實(shí)際存儲屬性值，即使反復(fù)訪問集合，
  也不會(huì)導(dǎo)致反復(fù)查找DOM樹
強(qiáng)調(diào): 1. 可在任何父元素上調(diào)用
     2. 選擇器只要相對于當(dāng)前父元素內(nèi)部即可
     3. 選擇器的兼容性，受制于當(dāng)前瀏覽器的兼容性

鄙視: 按HTML查找和按選擇器查找的差別:

1.返回值: 按HTML查找返回動(dòng)態(tài)集合
          按選擇器查找返回非動(dòng)態(tài)集合
2.效率: 首次查找: 按HTML查找效率高
                 按選擇器查找效率低
3.易用性: 按HTML查找繁瑣
          按選擇器查找簡單

總結(jié): 今后，只要一個(gè)條件即可找到想要的元素，首選按HTML查找

    只要查找條件復(fù)雜，都選按選擇器查找

jQuery中就是這么選擇的

5.修改:

內(nèi)容: .innerHTML .textContent .value
屬性: 3種:
1.HTML標(biāo)準(zhǔn)屬性: 2種:
1.核心DOM: 最初的DOM API，要求支持所有結(jié)構(gòu)化文檔

  優(yōu): 幾乎萬能   缺: 繁瑣
 獲取屬性節(jié)點(diǎn): var attrNode=elem.attributes[i]
 獲取屬性值: attrNode.value
   其實(shí)可以一步: var value=elem.getAttribute("屬性名")
 修改屬性值: elem.setAttribute("屬性名","值")
 移除屬性: elem.removeAttribute("屬性名")
 判斷是否包含指定屬性: elem.hasAttribute("屬性名")

2.HTML DOM: 專門操作HTML內(nèi)容的API

            對核心DOM 常用API的簡化
 優(yōu): 簡單   缺: 不是萬能
 簡化: HTML DOM提前將所有標(biāo)準(zhǔn)屬性，封裝在了元素對象上，可用.直接訪問.
  比如:
    獲取屬性值: elem.屬性名
    修改屬性值: elem.屬性名="值"
     移除屬性: elem.屬性名=""
     判斷是否包含指定屬性: elem.屬性名!==""
 特例: class屬性: 
   ES的對象中已經(jīng)先入為主的包含了內(nèi)部屬性class，用來記錄對象創(chuàng)建時(shí)的類型名。
   HTML的class屬性就無法同時(shí)存在
 所以: DOM: html的class屬性，更名為className

2.狀態(tài)屬性: disabled selected checked
1.不能用核心DOM修改: 因?yàn)橹凳莃ool類型
2.只能用HTML DOM,打.修改
3.自定義擴(kuò)展屬性:
何時(shí): 2種:

 1. 在元素上保存自定義數(shù)據(jù)
 2. 代替其他選擇器，用來查找元素綁定事件

如何: 2套:

 不能用HTML DOM訪問, 因?yàn)椴皇菢?biāo)準(zhǔn)屬性，未被提前封裝在DOM元素對象中
 1. 普通屬性名+核心DOM
 2. HTML5: 
  定義屬性時(shí): data-屬性名="值"
  獲取或修改屬性值: elem.dataset.屬性名

固定用法: 用自定義擴(kuò)展屬性代替其它選擇器，為元素綁定事件

 為什么: 
   id: 唯一
   class: 經(jīng)常變化
   elem: 做一種效果，可能使用任何元素
 解決: 今后，只要給元素綁定事件時(shí)，都要先為元素添加自定義擴(kuò)展屬性，
 再用自定義擴(kuò)展屬性查找元素，綁定事件
  優(yōu): 沒有個(gè)數(shù)限制, 不會(huì)受樣式影響而變化，不受元素限制
 如何: 
  定義: data-屬性名="值"
  查找: 只能用屬性選擇器查找:[data-屬性名=值]

6.樣式: 2種:

1.內(nèi)聯(lián)樣式:

修改: elem.style.css屬性名
 強(qiáng)調(diào): 1. css屬性名都要去橫線變駝峰
      2.長度數(shù)值必須加px單位
獲取: 
 問題: 不能用elem.style.css屬性名
 原因: elem.style僅包含內(nèi)聯(lián)樣式! 無法獲得內(nèi)部或外部樣式表中的樣式
 解決: 獲取計(jì)算后的樣式!
  計(jì)算后的樣式: 最終應(yīng)用到元素上的所有樣式的集合
                且將相對值換算為絕對值
  何時(shí): 只要獲取樣式時(shí)，都要獲取計(jì)算后的樣式
  如何: 2步:
    1. 獲得計(jì)算后的style對象:
      var style=getComputedStyle(elem);
    2. 從style中獲得css屬性值
      var value=style.css屬性值
  強(qiáng)調(diào): getComputedStyle獲得樣式都是只讀！

2.內(nèi)部/外部: 3步:
1.獲得樣式表對象:

 var sheet=document.styleSheets[i];

2.獲得樣式表對象中的cssRule

 什么是cssRule: 樣式表中每個(gè){}就是一個(gè)cssRule
 如何獲得: var rule=sheet.cssRules[i]

3.獲得cssRule中的style對象的css屬性

 var value=rule.style.css屬性

問題: 用elem.style.css屬性一句話只能修改一個(gè)css屬性

 如果同時(shí)修改多個(gè)屬性，代碼會(huì)很繁瑣

解決: 用class批量應(yīng)用樣式
如何: 2步:

在css中準(zhǔn)備好各種class

用程序，在對應(yīng)情況下，選擇對應(yīng)的class應(yīng)用！

7.添加:

添加: 3步:

創(chuàng)建空元素
var a=document.createElement("a");

2.設(shè)置必要屬性
a.;
a.innerHTML="go to tmooc";
3.將新元素添加到DOM樹:3種api:
parent.appendChild(a) 將a追加到指定父元素下末尾
parent.insertBefore(a, child) 將a插入到指定父元素下的現(xiàn)有子元素之前
parent.replaceChild(a, child) 用a替換指定父元素下的現(xiàn)有子元素

優(yōu)化: 盡量減少操作DOM樹的次數(shù), 從而減少重排重繪
為什么:
HTML頁面加載過程:
html -> DOM Tree

       ↓
      Render Tree -> ***layout -> paint
       ↑

css -> cssRules
如何:

如果同時(shí)添加父元素和子元素時(shí)，應(yīng)先在內(nèi)存中，將所有子元素添加到父元素中，
再最后一次性將父元素添加到頁面上

8.刪除:

優(yōu)化: 盡量減少操作DOM樹的次數(shù)
為什么: 減少重排重繪
如何: 2種:
1.如果同時(shí)添加父元素和子元素，則應(yīng)該現(xiàn)在內(nèi)存中，將子元素添加到父元素，再最后將父元素一次性整體添加到DOM Tree
2.如果父元素已經(jīng)在頁面上了，要添加多個(gè)平級子元素，則應(yīng)該使用文檔片段:

什么是文檔片段: 內(nèi)存中臨時(shí)存儲多個(gè)子元素的虛擬父元素
何時(shí): 只要向網(wǎng)頁中同時(shí)添加多個(gè)平級子元素時(shí)，都可用文檔片段
如何: 3步:
 1.創(chuàng)建文檔片段
 2.將子元素添加到文檔片段
 3.將文檔片段整體添加到DOM 樹

刪除: parent.removeChild(child)

通常: child.parentNode.removeChild(child)

9.HTML DOM常用對象:

Image: 創(chuàng)建: var img=new Image();

Select: 代表頁面上一個(gè)select元素
屬性:
.selectedIndex 獲得當(dāng)前select選中的option的下標(biāo)位置
.value 獲得select中選中的option的值

      如果選中的option沒有value屬性，則用innerHTML代替

.options 獲得當(dāng)前select下所有option的集合

 .options.length 獲得select下所有option的個(gè)數(shù)
  .options.length=0

.length => .options.length

 清空所有option  .length=0

方法: .add(option) 追加一個(gè)option

    問題: .add不支持文檔片段
  .remove(i) 移除i位置的option

Option: 代表select下一個(gè)option元素
創(chuàng)建: var opt=new Option(text,value)
屬性: .text .value .index

Table: 代表一個(gè)table元素
管著行分組:
創(chuàng)建行分組: var thead=table.createTHead()

          var tbody=table.createTBody()
          var tfoot=table.createTFoot()

刪除行分組: table.deleteTHead()

          table.deleteTFoot()

獲取行分組: table.tHead table.tFoot table.tBodies[i]
行分組: 管著行:
添加行: var tr=行分組.insertRow(i)

   在i位置插入一個(gè)新行
   固定套路: 1. 在末尾追加新行: .insertRow()
            2. 在開頭插入新行: .insertRow(0)

刪除行: 行分組.deleteRow(i) ——不常用!

    問題: i要求是在當(dāng)前行分組內(nèi)的相對下標(biāo)位置
         無法自動(dòng)獲得
    應(yīng)換為: table.deleteRow(tr.rowIndex)
     tr.rowIndex可自動(dòng)獲得當(dāng)前行在整個(gè)table內(nèi)的位置

獲取行: 行分組.rows[i]
行: 管著格
添加格: var td=tr.insertCell(i)

固定用法: 行末尾追加一個(gè)格: tr.insertCell()
說明: 只能創(chuàng)建td，不能創(chuàng)建th

刪除格: tr.deleteCell(i)
獲取格: tr.cells[i]

Form: 代表一個(gè)form元素
獲取: var form=document.forms[i/id]
屬性: .elements 獲得表單中所有表單元素的集合

     .elements.length  獲得表單中，表單元素的個(gè)數(shù)
   .length => .elements.length

方法: .submit() 代替submit按鈕，在程序中實(shí)現(xiàn)手動(dòng)提交表單

表單元素:
獲取: form.elements[i/id/name]

    更簡化: form.name

方法: .focus 讓當(dāng)前表單元素獲得焦點(diǎn)

結(jié)語：覺得總結(jié)的還可以的話，點(diǎn)下贊咯，你們的鼓勵(lì)是我前進(jìn)的動(dòng)力，謝謝各位老鐵們！

GPU云服務(wù)器云服務(wù)器 linux數(shù)據(jù)結(jié)構(gòu)知識點(diǎn)總結(jié) 位段知識總結(jié) 前端知識前端知識阿里云

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/93043.html

發(fā)表評論

登陸后可評論

0條評論

Vultr

男|高級講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 2408·2023-04-26 01:57
tensorflow轉(zhuǎn)onnx

閱讀 3377·2023-04-25 16:30
杭州商標(biāo)

閱讀 2419·2021-11-17 09:38
Vultr最新優(yōu)惠：充多少送多少最高$100/有效期一年/限新用戶

閱讀 1251·2021-10-08 10:14
C語言(宏，內(nèi)存，地址，指針，解引用)

閱讀 1485·2021-09-23 11:21
一篇文章了解移動(dòng)端文本垂直居中

閱讀 3803·2019-08-29 17:28
常用的unicode編碼圖形

閱讀 3560·2019-08-29 15:27
8月前端挑戰(zhàn)-----如何做到這個(gè)月內(nèi)每天下班學(xué)習(xí)兩小時(shí)

閱讀 1111·2019-08-29 13:04

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端知識點(diǎn)總結(jié)——DOM

相關(guān)文章

**前端知識點(diǎn)總結(jié)——JQ**

2017 前端面試準(zhǔn)備 - 收藏集 - 掘金

2017 前端面試準(zhǔn)備 - 收藏集 - 掘金

2017 前端面試準(zhǔn)備 - 收藏集 - 掘金

前端性能優(yōu)化常用總結(jié)

發(fā)表評論

0條評論

Vultr

男|高級講師

TA的文章

tensor

tensorflow轉(zhuǎn)onnx

杭州商標(biāo)

Vultr最新優(yōu)惠：充多少送多少最高$100/有效期一年/限新用戶

C語言(宏，內(nèi)存，地址，指針，解引用)

一篇文章了解移動(dòng)端文本垂直居中

常用的unicode編碼圖形

8月前端挑戰(zhàn)-----如何做到這個(gè)月內(nèi)每天下班學(xué)習(xí)兩小時(shí)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端知識點(diǎn)總結(jié)——DOM

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！