5月21日 文檔對象模型DOM

1.DOM:文檔對象模型,操作頁面中的元素,增刪改查

(1)查找:

1,通過元素間關(guān)系:

? ? ? 父子關(guān)系:

//查找某個元素的父元素:parentElement

//查找某個元素的子元素:返回一個動態(tài)集合(數(shù)組)

children

//查找第一個子元素 獲取中間的元素加下標(biāo)

firstElementChild

//查找最后一個子元素

lastElementChild

兄弟關(guān)系

//前一個兄弟元素

previousElementSibling

//下一個兄弟元素

nextElementSibling

2,通過HTTML查找

1) ID 只能找到一個,找不到返回null

var ele=document.getElementById('id名');

2)? class? 特點(diǎn):可以找到多個,返回一個動態(tài)集合; 沒有找到返回一個空集合; 多個class名設(shè)置樣式需要遍歷

var ele=document.getElementsByClassName('class名');

3) 標(biāo)簽: var ele=document.getElementsByTagName('標(biāo)簽名');

可以找到多個,返回一個動態(tài)集合

找不到返回空集合 設(shè)置樣式需要遍歷

4)name屬性 只適用于表單元素

var ele=document.getElementsByName('name名');

返回一個動態(tài)集合,設(shè)置樣式需要遍歷

3.通過選擇器查找

var ele=document.querySelector('選擇器');

特點(diǎn):只能找一個

設(shè)置樣式不需要遍歷

var ele=document.querySelectorAll('選擇器');

能找到多個 返回一個動態(tài)集合 設(shè)置樣式需要遍歷

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

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

  • ??DOM 1 級主要定義的是 HTML 和 XML 文檔的底層結(jié)構(gòu)。 ??DOM2 和 DOM3 級則在這個結(jié)構(gòu)...
    霜天曉閱讀 1,587評論 1 3
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,908評論 0 0
  • 1.DOM:文檔對象模型,操作頁面中的元素,增刪改查 (1)查: 1,通過元素間關(guān)系: 父子關(guān)系: //查...
    梁萌0328閱讀 248評論 0 0
  • ??DOM(文檔對象模型)是針對 HTML 和 XML 文檔的一個 API(應(yīng)用程序編程接口)。 ??DOM 描繪...
    霜天曉閱讀 3,848評論 0 7
  • 今天是祖國的生日,舉國同慶!感恩社會和諧穩(wěn)定,讓我們老百姓衣食無憂!感恩葉師傅們的辛勤努力,為了趕工期,今天過節(jié)都...
    今天的心情好閱讀 321評論 1 3

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