jsDom jsBoM基礎概念一網打盡

2021-07-11 02:39:56 字數 3603 閱讀 7321

1.dom?概念

document object model 

文件:html的頁面;文件物件:文件中的元素;文件物件模型:就是一棵樹,為了通過js程式來操作頁面的元素。

2.元素節點,屬性節點,文字節點

元素節點:ul li 

屬性節點:width

文字節點:我是文字內容

-------->nodetype nodename nodevalue

元素節點     1      li        

屬性節點     2      width    123px

文字節點     3               我是文字內容

3.元素.childnodes:唯讀屬性,子節點的列表集合

標準瀏覽器:

包含了文字和元素節點,也包含非法巢狀的子節點

非標準瀏覽器:

只包含元素的節點,ie7以下不會包含非法巢狀的節點

注意點:childnodes只包含一級子節點,不包含後輩的孫子子節點。

4.元素.attributes : 唯讀屬性 屬性列表集合

5.元素.children:唯讀 屬性 子節點列表集合

這個用法和元素.childnodes的用法是差不多的,但有不同點。

標準下:

只包含元素型別的節點

非標準下:

只包含元素型別的節點

6.元素.firstchild : 唯讀屬性 第乙個子節點(和childnodes是通的)

標準下:

firstchild會包含文字型別的節點

非標準下:

只包含元素節點

7.元素.firstelementchild : 唯讀 屬性

標準下獲取第乙個元素型別的子節點

為了相容標準和非標準瀏覽器來獲取第乙個元素,我們應該這麼寫

if ( oul.firstelementchild) else

但是上述的程式會有問題,當oul裡面沒有元素的時候就會報錯了。所以推薦相容瀏覽器的寫法應該這樣--->

if ( oul.children[0] ) else

8.元素.lastchild  元素.lastelementchild 最後乙個子節點

相容瀏覽器的寫法--->

if ( oul.children[0] ) else

9.元素.nextsibling  元素.nextelementsibling 下乙個兄弟節點

var onext = ofirst.nextelementsibling || ofirst.nextsibling;

onext.style.background = 'blue';

10.元素.previoussibling  元素.previouselementsibling 上乙個兄弟節點

var oprev = olast.previouselementsibling || olast.previoussibling;

oprev.style.background = 'orange';

11.元素.parentnode : 唯讀 屬性 當前節點的父級節點

ofirst.parentnode.style.display = 'none';

12.元素.offsetparent : 唯讀 屬性 離當前元素最近的乙個有定位屬性的父節點

如果沒有定位父級,預設是body

ie7以下,如果當前元素沒有定位預設是body,如果有定位則是html

ie7以下,如果當前元素的某個父級觸發了layout,那麼offsetparent就會被指向到這個觸發了layout特性的父節點上(比如:加了zoom)

13.元素.offsetleft/元素.offsettop : 唯讀 屬性 當前元素到定位父級的距離(偏移值)

意思:到當前元素的offsetparent的距離;

如果沒有定位父級

offsetparent -> body

offsetleft -> html

如果有定位父級

ie7以下:如果自己沒有定位,那麼offsetleft[top]是到body的距離

如果自己有定位,那麼就是到定位父級的距離

其他:到定位父級的距離

14.元素的寬高

width height

style.width : 樣式寬 

clientwidth : 可視區寬(樣式寬 + padding)

offsetwidth : 佔位寬(樣式寬 + padding + border ==  可視區寬 + 邊框)

15.指定元素到文件頁面的距離的函式的封裝

js**:

function getpos(obj) ;

while (obj)

return pos;

}var odiv3 = document.getelementbyid('div3');

var p = getpos( odiv3 );

html**:

css**:

div

#div1

#div2

#div3

16.操作元素屬性的多種方式

有相容性問題,標準下不能獲取兩層獲取:getattribute(名稱)

設定:setattribute(名稱, 值)刪除:removeattribute(名稱)第三種方式的好處:自定義屬性、相對**

html**:

js**:

var otext = document.getelementbyid('text1');/*.

*/ = '222';

//alert( otext.value );

//otext['value'] = '222';

//alert( otext['value'] );

//var name = 'value';//一定要注意

有問題

//otext[name]; ok

/*元素.getattribute(屬性名稱); 方法 獲取指定元素的指定屬性的值

*///alert( otext.getattribute('value') );

/*元素.setattribute(屬性名稱,屬性值); 方法 給指定元素指定的屬性設定值

*/ 'value', 'hello' );

/*元素.removeattribute(屬性名稱); 方法 移除指定的元素的指定的屬性

*/ 'value' );

/*1.用.和的形式無法操作元素的自定義屬性

getattribute可以操作元素的自定義屬性

*///alert( otext._name_ );

//alert( otext['_name_'] );

//alert( otext.getattribute('_name_') );

var oimg = document.getelementbyid('img1');

/*2.可以獲取元素屬性實際的值

ie7下還是會返回資源的絕對路徑

*///alert( oimg.src );

//alert( oimg['src'] );

//alert( oimg.getattribute('src') );

下一節,陳明老師跟大家一起聊聊dom、bom相關方法及屬性,謝謝大家。

OpenGL基礎概念(一)

頂點 vertexs 圖元 primitives 片元 fragments片斷 畫素 pixels 階段1.頂點 圖元 幾何頂點被組合為圖元 點,線段或多邊形 然後圖元被合成片元,最後片元被轉換為幀快取中的象素數據。階段2.圖元 片元 圖元被分幾步轉換為片元 圖元被適當的裁剪,顏色和紋理資料也相應作...

mysql(一) 基礎概念

mysql 為關係型資料庫 relational database management system 這種所謂的 關係型 可以理解為 的概念,乙個關係型資料庫由乙個或數個 組成,如圖所示的乙個 2.在安裝資料夾下找到 my small.ini 配置檔案,將其重新命名為 my.ini 開啟進行編輯,...

MySQL(一) 基礎概念

關係型資料庫是建立在關係模型上的,關係模型本質是若干個儲存資料的二維表,表的每一行稱為記錄 record 記錄是乙個邏輯意義上的資料。表的每一列稱為字段 column 同一表的每一行記錄都有相同的若干字段。字段定義了資料型別,以及是否被允許為null null表示字段資料不存在,乙個整型字段如果為n...