DOM操作

1. dom對象的innerText和innerHTML有什么區(qū)別楞泼?

innerText返回元素內(nèi)的文本內(nèi)容胧华,去除了HTML標(biāo)簽
innerHTML返回元素內(nèi)的HTML結(jié)構(gòu)读宙,包括HTML標(biāo)簽

2. elem.children和elem.childNodes的區(qū)別唇聘?

對于DOM元素砰识,children是指DOM Object類型的子對象,不包括tag之間隱形存在的TextNode块茁,而childNodes包括tag之間隱形存在的TextNode對象齿坷。

3.查詢元素有幾種常見的方法?ES5的元素選擇方法是什么?

查詢元素的常見方法:
兼容性比較好:
getElementsByTagName()方法返回所有指定標(biāo)簽的元素
getElementsByName()方法選擇擁有name屬性的HTML元素
getElementById()方法返回匹配指定ID屬性的元素節(jié)點
getElementsByClassName()方法返回一個包括了所有class名字符合指定條件的元素(類數(shù)組對象)
ES5的元素選擇方法:
querySelector()方法返回匹配指定的CSS選擇器的元素節(jié)點
querySelectorAll()方法返回匹配指定的CSS選擇器的所有節(jié)點
ES5的方法:相對來說更簡潔数焊,括號內(nèi)的可以直接像CSS選擇器一樣填寫名稱

4.如何創(chuàng)建一個元素永淌?如何給元素設(shè)置屬性?

createElement()方法用來生成HTML元素節(jié)點
getAttribute()方法用于獲取元素的屬性值
setAttribute()方法用于設(shè)置元素屬性
removeAttribute()方法用于刪除元素屬性

newDiv
<div>?</div>?
newDiv.setAttribute('class','hunger')
undefined
newDiv
<div class=?"hunger">?</div>?
newDiv.getAttribute('class')
"hunger"
newDiv.removeAttribute('class')
undefined
newDiv
<div>?</div>?

5.如何給頁面元素添加子元素佩耳?如何刪除頁面元素下的子元素遂蛀?

appendChild()方法在元素末尾添加元素
insertBefore()方法在某個元素之前插入元素
removeChild()方法可用于刪除某元素下的子元素
replaceChild()接受兩個參數(shù):要插入的元素和要替換的元素

6. element.classList有哪些方法?如何判斷一個元素的 class 列表中是包含某個 class干厚?如何添加一個class李滴?如何刪除一個class螃宙?

方法
add():添加一個類名
item(index):查找第index個類名
remove(className):刪除一個類名
contains(className):是否包含指定類名,返回布爾值

var title = document.querySelector('.title')
undefined
title.classList
DOMTokenList ["title", value: "title"]
title.classList.add('active')
undefined
title.classList.remove('active')
undefined
title.classList.contains('title')
true

7.如何選中如下代碼所有的li元素? 如何選中btn元素所坯?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點我</btn>
</div>

選中所有的li元素
document.getElementsByTagName('li')
document.querySelectorAll('li')
選中btn元素
document.getElementsByClassName('btn')
document.querySelector('.btn')

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末谆扎,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子芹助,更是在濱河造成了極大的恐慌燕酷,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,599評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件周瞎,死亡現(xiàn)場離奇詭異苗缩,居然都是意外死亡,警方通過查閱死者的電腦和手機声诸,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,629評論 3 385
  • 文/潘曉璐 我一進店門酱讶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人彼乌,你說我怎么就攤上這事泻肯。” “怎么了慰照?”我有些...
    開封第一講書人閱讀 158,084評論 0 348
  • 文/不壞的土叔 我叫張陵灶挟,是天一觀的道長。 經(jīng)常有香客問我毒租,道長稚铣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,708評論 1 284
  • 正文 為了忘掉前任墅垮,我火速辦了婚禮惕医,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘算色。我一直安慰自己抬伺,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,813評論 6 386
  • 文/花漫 我一把揭開白布灾梦。 她就那樣靜靜地躺著峡钓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪若河。 梳的紋絲不亂的頭發(fā)上能岩,一...
    開封第一講書人閱讀 50,021評論 1 291
  • 那天,我揣著相機與錄音牡肉,去河邊找鬼捧灰。 笑死淆九,一個胖子當(dāng)著我的面吹牛统锤,可吹牛的內(nèi)容都是我干的毛俏。 我是一名探鬼主播,決...
    沈念sama閱讀 39,120評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼饲窿,長吁一口氣:“原來是場噩夢啊……” “哼煌寇!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起逾雄,我...
    開封第一講書人閱讀 37,866評論 0 268
  • 序言:老撾萬榮一對情侶失蹤阀溶,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后鸦泳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體银锻,經(jīng)...
    沈念sama閱讀 44,308評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,633評論 2 327
  • 正文 我和宋清朗相戀三年做鹰,在試婚紗的時候發(fā)現(xiàn)自己被綠了击纬。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,768評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡钾麸,死狀恐怖更振,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情饭尝,我是刑警寧澤肯腕,帶...
    沈念sama閱讀 34,461評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站钥平,受9級特大地震影響实撒,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜涉瘾,卻給世界環(huán)境...
    茶點故事閱讀 40,094評論 3 317
  • 文/蒙蒙 一奈惑、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧睡汹,春花似錦肴甸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,850評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至彤叉,卻和暖如春庶柿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背秽浇。 一陣腳步聲響...
    開封第一講書人閱讀 32,082評論 1 267
  • 我被黑心中介騙來泰國打工浮庐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 46,571評論 2 362
  • 正文 我出身青樓审残,卻偏偏與公主長得像梭域,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子搅轿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,666評論 2 350

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

  • 基本介紹 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口病涨。它給文檔(結(jié)構(gòu)樹)提供了一個結(jié)構(gòu)化的表述并且...
    草鞋弟閱讀 431評論 0 0
  • 題目1: dom對象的innerText和innerHTML有什么區(qū)別? innerText是一個可寫屬性璧坟,返回元...
    Taaaaaaaurus閱讀 199評論 0 1
  • 題目1: dom對象的innerText和innerHTML有什么區(qū)別既穆? innerText是一個可寫屬性,返回元...
    QQQQQCY閱讀 182評論 0 0
  • dom對象的innerText和innerHTML有什么區(qū)別雀鹃? innerText返回從body元素開始所有文本內(nèi)...
    Vincent_永閱讀 305評論 0 0
  • dom對象的innerText和innerHTML有什么區(qū)別幻工? innerText是一個可寫屬性,返回元素內(nèi)包含的...
    蛋黃肉閱讀 387評論 0 0