從零開始學 Web 之 DOM(四)節點

2022-02-16 09:13:43 字數 1634 閱讀 1842

頁面中的所有內容,包括標籤,屬性,文字(文字,空格,回車,換行等),也就是說頁面的所有內容都可以叫做節點。

標籤節點:比如 div 標籤,p 標籤等。

屬性節點:比如 class,value 等。

文字節點:比如閉合標籤中的文字內容。

nodetype:節點的型別,它的值有 1,2,3 三種。

​ 標籤節點:值為 1

​ 屬性節點:值為 2

​ 文字節點:值為 3

nodename:節點的名字

​ 標籤節點:大寫的標籤名字

​ 屬性節點:小寫的屬性名字

​ 文字節點:#text

nodevalue:節點的值

​ 標籤節點:null

​ 屬性節點:屬性的值

​ 文字節點:文字內容

父節點只能是標籤,不能是屬性節點和文字節點,所以父節點也是父元素。

parentnode:獲取元素的父節點。

parentelement:獲取元素的父元素。

p標籤

span標籤

childnodes:獲取所有子節點(包括標籤,屬性,節點)

children:獲取所有子元素(僅包括標籤)

p標籤

span標籤

getattributenode:可以獲取屬性節點。

p標籤

span標籤

1、以上前四個,chrome, firefox, ie8 都支援

2、後面八個,chrome,firefox支援,ie8下,所有獲取節點的操作都獲取的是元素,所有獲取元素的操作都是 undefined。

通過節點操作元素的背景顏色

// 通過節點設定p標籤的背景顏色為藍色

p標籤span標籤

p標籤span標籤

p標籤

通過節點屬性來區分節點和元素。

主要是相容chrome 和 ie8 之間的差異,其次以獲取任意乙個父元素的第乙個子元素為例,之所以不在 else 裡面直接使用return element.firstchild;主要考慮到標籤之間可能有多個文字節點的影響。

從零開始學 Web 之 移動Web(八)Less

在這裡我會從 web 前端零基礎開始,一步步學習 web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 web 前端學習的探索之旅吧!less 是一種動態的樣式表語言,通過簡潔明瞭的語法定義,使編寫 css 的工作變得非常簡單,本質上,less 包含一套自定義的語法及乙個解析器。2...

從零開始學jQuery Validate 之01

jquery validate 外掛程式為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定製選項,滿足應用程式各種需求。該外掛程式 了一套有用的驗證方法,包括 url 和電子郵件驗證,同時提供了乙個用來編寫使用者自定義方法的 api。所有的 方法預設使用英語作為錯誤資訊,且已...

從零開始學NGUI (四)Slider

首先在assets ngui examples wooden下 找到control horizontal slider,並拖拽到scene中 在hierarchy視窗,將這個slider重新命名為myhorizontalslider 執行unity可以任意滑動這個slider 如何根據slider的...