一名前端工程師的自學之路!Js篇(12-14更新)


接著上一篇的更新,還有大家如果需要什么前端學習的資源的話,私信我。(雖然我知道,收藏了也不看,給了也不看的,但是說不定哪天能幫到你呢~)

dom---document ,objec,model (文檔對象模型)

html元素是根節(jié)點

所有的html元素都稱為 元素節(jié)點

所有元素節(jié)點的內(nèi)容稱為 文本節(jié)點(內(nèi)容部分)

所有的元素節(jié)點的屬性 稱為 屬性節(jié)點

一切都是節(jié)點

節(jié)點關系(查找html元素)

父節(jié)點: parentNode

兄弟節(jié)點:

previousElementSibling 前一個兄弟節(jié)點 -- 高版本瀏覽器 previousSibling --- 低版本瀏覽器 (后面所有的同理)

nextElementSibling 后一個兄弟節(jié)點 nextSibling

孩子節(jié)點:

firstElementChild 第一個孩子節(jié)點 firstChild

lastElementChild 最后一個孩子節(jié)點 lastChild

childNodes 孩子節(jié)點 得到是一個集合 使用時要用下標

children 孩子節(jié)點 得到一個集合 使用是要用下標

children和childNodes區(qū)別:

children 操作的節(jié)點就是 元素節(jié)點

childNodes 會將標簽后的回車作為 自己的 文本節(jié)點來操作

節(jié)點類型

元素節(jié)點 nodeType 值為 1

文本節(jié)點 nodeType 值為 3

屬性節(jié)點 nodeType 值為 2

nodeType 節(jié)點類型

nodeName 節(jié)點名 (tagName 獲取標簽名)

nodeValue 節(jié)點值

節(jié)點動態(tài)操作(創(chuàng)建、 添加、刪除)

1、創(chuàng)建一個新元素節(jié)點

document.createElement("節(jié)點名稱");

2、添加創(chuàng)建的節(jié)點 appendChild()

父元素.appendChild(要添加的子元素)

3、創(chuàng)建一個文本節(jié)點

document.createTextNode("文本");

4、刪除創(chuàng)建的元素 removeChild

父元素.removeChild( 要刪除的子元素 );

5、添加創(chuàng)建的節(jié)點 insertBefore

父元素.insertBefore( 要添加的子元素,參照節(jié)點 );

向父元素的內(nèi)容參照節(jié)點的前面添加一個新元素

注意:參數(shù)一定要寫滿兩個,參照節(jié)點這個參數(shù)可以為null,如果參數(shù)為null,效果同appendChild

關于動態(tài)創(chuàng)建的元素添加事件問題

如果要給一個動態(tài)創(chuàng)建的元素添加事件,添加事件的代碼必須和動態(tài)創(chuàng)建的代碼在一個函數(shù)體內(nèi)。如果寫在函數(shù)體外部,需要用委托來實現(xiàn)。

嘿嘿由于健身特別累,今天就先更新到這里~

接下來是老規(guī)矩

歡迎大家持續(xù)關注。號內(nèi)有多個專題,小程序(持續(xù)更新中),Javascript(持續(xù)更新),Vue等學習筆記。覺得有收獲的可以收藏關注,歡迎騷擾,一起學習,共同進步

最后推廣一下自己的小程序,如果你也喜歡鍛煉的話在這里尋找你的小伙伴吧。

自律更自由,一只喜歡鍛煉的程序猿,嘿嘿。

你都看到這了,不點個關注就過分了哈~

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 原文 鏈接 關注公眾號獲取更多資訊 一、基本類型介紹 1.1 Node類型 DOM1級定義了一個Node接口,該接...
    前端進階之旅閱讀 4,071評論 7 34
  • 本章內(nèi)容 理解包含不同層次節(jié)點的 DOM 使用不同的節(jié)點類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對 HT...
    悶油瓶小張閱讀 786評論 0 1
  • 1. 什么是DOM 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述,并定...
    hanyuntao閱讀 1,398評論 0 4
  • 案主男性,34歲。 從圖上分析,案主偏外向穩(wěn)定型性格,同時有時候在人際交往方面又有些被動,保守??释惆?,喜歡用老...
    皮皮爸爸時代閱讀 185評論 0 0
  • 容我這樣懷想今夜 春雨芬芳,紫藤瘋長 交錯的枝條織起錦繡 招迎的青碧綴滿鮮紫 漫步石徑,漫步畫里 紫藤彌漫天空,縈...
    樹梢的雪閱讀 261評論 19 17

友情鏈接更多精彩內(nèi)容