思想脈絡:
DOM->一切都是節(jié)點->元素節(jié)點/屬性節(jié)點/文本節(jié)點->三種主要節(jié)點的增刪改查
- JavaScript里面的對象分為三種
//用戶定義對象:程序員自己創(chuàng)建的對象
//內(nèi)建對象:JavaScript語言里面定義好的對象
//宿主對象:瀏覽器提供的對象 - window對象對應著瀏覽器窗口本身,這個對象的屬性和方法通常統(tǒng)稱為Bom(窗口對象模型)
DOM
-
dom把文檔表示為一棵家譜樹shushushus.png
節(jié)點
- 元素節(jié)點
//在文檔的布局中形成了文檔的結(jié)構 - 文本節(jié)點
//元素節(jié)點只是節(jié)點類型的一種,如果只有結(jié)構沒有內(nèi)容頁面只能空蕩蕩 - 屬性節(jié)點
//用來對元素做出更加具體的描述,同樣的元素,屬性不一樣展示出來的效果肯定也不一樣
獲取元素3種DOM方法
- getElementById('id')
- getElementByClassName(className)
- getElementByTagName('TagName')
//返回的是一個數(shù)組
DOM編程技巧
jiaoqiao.png
tongpei.png
z1.png
//因為getElementById()這個方法返回的是一個對象,這就提供了鏈式操作的可能
//其他兩個不能的原因,是因為返回的是對象數(shù)組
學會了獲取元素,就要學會獲取和設置屬性了
- getAttribute(attribute)
//獲取屬性 - setAttribute(attribute,value)
//允許對屬性節(jié)點做出修改,接受2個參數(shù),第一個是屬性名稱,第二個是對應名稱的屬性的值
小結(jié):
//介紹了5個方法,這五個方法是編寫許多DOM腳本的基石
DOM屬性
- childNodes屬性可以用來獲取任何一個元素的所有子元素,它是一個數(shù)組
//因為是數(shù)組所以可以:node.childNodes[0] - nodeType屬性
- NodeValue屬性
- firstChild屬性
- lastChild屬性
動態(tài)創(chuàng)建標記(元素)
document.writer
innerHTML
createElement
createTextNode
appendChild
insertBefore
//通過創(chuàng)建新元素和修改現(xiàn)有元素來改變頁面結(jié)構
z2.png
z3.png
z4.png
z5.png
web技術的知識大廈(一切圍繞HTML轉(zhuǎn))
- HTML原本樣式是寫在標簽里面的,因為隨著頁面的要求越來越高,標簽的內(nèi)聯(lián)樣式代碼就變得臃腫,所以css誕生了,同樣css也出現(xiàn)了這樣的情況,less/sass/stylus這樣的預處理出現(xiàn)了,讓css的代碼可復用,可結(jié)構化
- web頁面的需求推動了JavaScript的出臺,JavaScript根據(jù)HTML頁面三大件:元素/屬性/文本 開始了DOM生涯.因為DOM的缺陷衍生出了JQuery,隨著前端技術的日趨完善,Mvvm框架出現(xiàn)了,Vue這類的框架直接代替你去操作DOM
如何學習DOM?
DOM的目的就是操作HTML頁面,使其動態(tài)化
HTML的三大件:元素/屬性/文本
為此DOM的主要API都是圍繞三大件的增刪改查
按照這樣的思路去學DOM會非常快上手
- 元素Element的增刪改查
- 屬性的增刪改查
- 文本的增刪改查
