dom對象操作知識點

1: dom對象的innerText和innerHTML的區(qū)別

innerText只獲取該元素內(nèi)的文本,innerHTML獲取該元素內(nèi)的全部內(nèi)容操禀,包括HTML標簽和文本。

2: elem.children與elem.childNodes的區(qū)別

elem.childNodes:標準屬性横腿,它返回指定元素的子元素集合床蜘,包括HTML節(jié)點,所有屬性蔑水,文本節(jié)點。
elem.children:非標準屬性扬蕊,它返回指定元素的子元素集合搀别。但它只返回HTML節(jié)點,不返回文本節(jié)點尾抑。

3:查詢元素常見的方法

常見方法:
1.getElementById() :可返回對擁有指定 ID 的第一個對象的引用歇父。
2.getElementsByName() :返回帶有指定名稱的對象集合。
3.getElementsByTagName() : 返回帶有指定標簽名的對象集合再愈。
4.getElementByClassName() : 返回帶有指定類名的對象的集合榜苫。
ES5的元素選擇方法:querySelector()方法,參數(shù)形式與CSS選擇器相同翎冲,可獲取第一個符合條件的元素垂睬,
querySelectorAll()方法可獲取符合條件的全部元素。

4:創(chuàng)建元素抗悍,添加驹饺、刪除屬性:

  • 創(chuàng)建元素:createElement()用來生成HTML元素節(jié)點,參數(shù)即為需要創(chuàng)建的標簽名缴渊。
  • 設(shè)置屬性:setAttribute()用于設(shè)置元素屬性赏壹,參數(shù)為屬性名和屬性值。
  • 刪除屬性:removeAttribute()用于刪除元素屬性衔沼,參數(shù)為要刪除的屬性名蝌借。

5:添加與刪除子元素

appendChild()方法可以在元素末尾添加元素;刪除元素使用removeChild()方法指蚁。

6: element.classList

element.classList的方法有:add(class1, class2, ...)菩佑、contains(class)、item(index)欣舵、remove(class1, class2, ...)擎鸠、toggle(class, true|false)。
判斷classlist是否包含某個class:contains(class) 返回布爾值缘圈,true表示包含劣光,false表示不包含袜蚕;
添加class:add(class1, class2, ...) 在元素中添加一個或多個類名。如果指定的類名已存在绢涡,則不會添加 牲剃。
刪除class: remove(class1, class2, ...) 移除元素中一個或多個類名。移除不存在的類名雄可,不會報錯凿傅。

7: 舉例:如何選中如下代碼所有的li元素? 如何選中btn元素数苫?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點我</button>
</div>
<script>
    document.getElementsByTagName('li')    //選中所有l(wèi)i元素
    document.getElementsByClassName('btn')    //選中btn元素
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末聪舒,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子虐急,更是在濱河造成了極大的恐慌箱残,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件止吁,死亡現(xiàn)場離奇詭異被辑,居然都是意外死亡,警方通過查閱死者的電腦和手機敬惦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門盼理,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人俄删,你說我怎么就攤上這事宏怔。” “怎么了畴椰?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵举哟,是天一觀的道長。 經(jīng)常有香客問我迅矛,道長妨猩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任秽褒,我火速辦了婚禮壶硅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘销斟。我一直安慰自己庐椒,他們只是感情好,可當我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布蚂踊。 她就那樣靜靜地躺著约谈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上棱诱,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天泼橘,我揣著相機與錄音,去河邊找鬼迈勋。 笑死炬灭,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的靡菇。 我是一名探鬼主播重归,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼厦凤!你這毒婦竟也來了鼻吮?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤较鼓,失蹤者是張志新(化名)和其女友劉穎狈网,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體笨腥,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年勇垛,在試婚紗的時候發(fā)現(xiàn)自己被綠了脖母。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡闲孤,死狀恐怖谆级,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情讼积,我是刑警寧澤肥照,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布,位于F島的核電站勤众,受9級特大地震影響舆绎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜们颜,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一吕朵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧窥突,春花似錦努溃、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春第队,著一層夾襖步出監(jiān)牢的瞬間哮塞,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工斥铺, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留彻桃,地道東北人。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓晾蜘,卻偏偏與公主長得像邻眷,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子剔交,可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2 351

推薦閱讀更多精彩內(nèi)容

  • dom對象的innerText和innerHTML有什么區(qū)別肆饶? innerText返回從body元素開始所有文本內(nèi)...
    Vincent_永閱讀 305評論 0 0
  • 1: dom對象的innerText和innerHTML有什么區(qū)別 innerText:通過innerText讀取...
    小囧兔閱讀 369評論 0 0
  • 基本介紹 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔(結(jié)構(gòu)樹)提供了一個結(jié)構(gòu)化的表述并且...
    草鞋弟閱讀 431評論 0 0
  • 1岖常、dom對象的innerText和innerHTML有什么區(qū)別驯镊? innerText:過濾Html標簽,只保留文...
    Jeff12138閱讀 208評論 0 0
  • 我想我們每一個人都應(yīng)該在年初思考下2017年應(yīng)該怎么過竭鞍,怎么樣才能不比2016年過的更操蛋板惑。這就是我分享這文章到朋...
    Sky高閱讀 330評論 4 0