DOM操作

1: dom對(duì)象的innerText和innerHTML有什么區(qū)別辕棚?

以<p id="p1">hello world <span>hello</span> </p>為例

var content = document.getElementById("p1");
console.log(content.innerHTML);//hello world <span>hello</span> 
console.log(content.innerText) //hello world hello

innerHTML指的是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽熬丧。
innerText 指的是從起始位置到終止位置的內(nèi)容,去除Html標(biāo)簽臊泌。

innerHTML是符合W3C標(biāo)準(zhǔn)的屬性妻怎,而innerText只適用于IE瀏覽器(現(xiàn)在也適應(yīng)chrome瀏覽器)箫锤,因此逛钻,盡可能地去使用 innerHTML僚焦,而少用innerText,如果要輸出不含HTML標(biāo)簽的內(nèi)容曙痘,可以使用innerHTML取得包含HTML標(biāo)簽的內(nèi)容后芳悲,再用正則表達(dá)式去除HTML標(biāo)簽

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

childNodes 屬性边坤,標(biāo)準(zhǔn)的名扛,它返回指定元素的子元素集合,包括HTML節(jié)點(diǎn)茧痒,所有屬性肮韧,文本。
children 屬性旺订,非標(biāo)準(zhǔn)的弄企,它返回指定元素的子元素集合。

3:查詢(xún)?cè)赜袔追N常見(jiàn)的方法耸峭?ES5的元素選擇方法是什么?

查詢(xún)?cè)氐某R?jiàn)方法:
getElementsByTagName()方法返回所有指定標(biāo)簽的元素
getElementsByName()方法選擇擁有name屬性的HTML元素
getElementById()方法返回匹配指定ID屬性的元素節(jié)點(diǎn)
getElementsByClassName()方法返回一個(gè)包括了所有class名字符合指定條件的元素(類(lèi)數(shù)組對(duì)象)
ES5的元素選擇方法:
querySelector()方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)
querySelectorAll()方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)

4:如何創(chuàng)建一個(gè)元素桩蓉?如何給元素設(shè)置屬性?如何刪除屬性

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

5:如何給頁(yè)面元素添加子元素劳闹?如何刪除頁(yè)面元素下的子元素院究?

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

6: element.classList有哪些方法洽瞬?如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class?如何添加一個(gè)class业汰?如何刪除一個(gè)class伙窃?

* add(class1, class2, ...) //在元素中添加一個(gè)或多個(gè)類(lèi)名。如果指定的類(lèi)名已存在样漆,則不會(huì)添加
* contains(class) //返回布爾值为障,判斷指定的類(lèi)名是否存在。
//true - 元素包已經(jīng)包含了該類(lèi)名
//false - 元素中不存在該類(lèi)名
* item(index) //返回類(lèi)名在元素中的索引值放祟。索引值從 0 開(kāi)始鳍怨。如果索引值在區(qū)間范圍外則返回 null
* remove(class1, class2, ...)  //移除元素中一個(gè)或多個(gè)類(lèi)名。**注意**: 移除不存在的類(lèi)名,不會(huì)報(bào)錯(cuò)。
* toggle(class, true|false)  //在元素中切換類(lèi)名垒探。
/*第一個(gè)參數(shù)為要在元素中移除的類(lèi)名,并返回 false侦香。 
如果該類(lèi)名不存在則會(huì)在元素中添加類(lèi)名,并返回 true纽疟。 
第二個(gè)是可選參數(shù)罐韩,是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類(lèi),不管該類(lèi)名是否存在污朽。例如:
移除一個(gè) class: element.classList.toggle("classToRemove", false); 
添加一個(gè) class: element.classList.toggle("classToAdd", true);
*/

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

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點(diǎn)我</btn>
</div>
//選中所有的li元素
document.getElementsByTagName('li')或document.querySelectorAll('li')
//選中btn元素
document.getElementsByClassName('btn')或document.querySelector('.btn')
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末膘壶,一起剝皮案震驚了整個(gè)濱河市错蝴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌颓芭,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件柬赐,死亡現(xiàn)場(chǎng)離奇詭異亡问,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)肛宋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)州藕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人酝陈,你說(shuō)我怎么就攤上這事床玻。” “怎么了沉帮?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵锈死,是天一觀的道長(zhǎng)贫堰。 經(jīng)常有香客問(wèn)我,道長(zhǎng)待牵,這世上最難降的妖魔是什么其屏? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮缨该,結(jié)果婚禮上偎行,老公的妹妹穿的比我還像新娘。我一直安慰自己贰拿,他們只是感情好蛤袒,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著膨更,像睡著了一般妙真。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上询一,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天隐孽,我揣著相機(jī)與錄音,去河邊找鬼健蕊。 笑死菱阵,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的缩功。 我是一名探鬼主播晴及,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼嫡锌!你這毒婦竟也來(lái)了虑稼?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤势木,失蹤者是張志新(化名)和其女友劉穎蛛倦,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體啦桌,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡溯壶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了甫男。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片且改。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖板驳,靈堂內(nèi)的尸體忽然破棺而出又跛,到底是詐尸還是另有隱情,我是刑警寧澤若治,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布慨蓝,位于F島的核電站感混,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏菌仁。R本人自食惡果不足惜浩习,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望济丘。 院中可真熱鬧谱秽,春花似錦、人聲如沸摹迷。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)峡碉。三九已至近哟,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間鲫寄,已是汗流浹背吉执。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留地来,地道東北人戳玫。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像未斑,于是被迫代替她去往敵國(guó)和親咕宿。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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

  • 基本介紹 文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口蜡秽。它給文檔(結(jié)構(gòu)樹(shù))提供了一個(gè)結(jié)構(gòu)化的表述并且...
    草鞋弟閱讀 439評(píng)論 0 0
  • 題目1: dom對(duì)象的innerText和innerHTML有什么區(qū)別府阀? 兩個(gè)屬性都是獲取document對(duì)象的文...
    大胡子歌歌閱讀 767評(píng)論 1 3
  • 1.概述 1.1DOM DOM是JavaScript操作網(wǎng)頁(yè)的接口,全稱(chēng)為“文檔對(duì)象模型”(Document Ob...
    徐國(guó)軍_plus閱讀 380評(píng)論 0 3
  • 2011年11月26 堅(jiān)持分享第106天 近日網(wǎng)上針對(duì)三種顏色出現(xiàn)的一系列問(wèn)題反響強(qiáng)烈.針對(duì)幼兒安...
    周老師成長(zhǎng)記錄儀閱讀 162評(píng)論 0 0
  • "小伙子川队,你在等什么?" "等女朋友睬澡。" 王自健說(shuō),你女朋友讓你等的越久眠蚂,說(shuō)明她越需要"裝修"煞聪。也有道理,女朋友在...
    一紙一話(huà)閱讀 446評(píng)論 0 2