DOM操作

1: dom對象的innerText和innerHTML有什么區(qū)別灯荧?

innerText是一個(gè)可寫屬性任内,返回元素內(nèi)包含的文本內(nèi)容杈女,在多層次的時(shí)候會(huì)按照元素由淺到深的順序拼接其內(nèi)容

innerHTML屬性作用和innerText類似忱辅,但是不是返回元素的文本內(nèi)容滚停,而是返回元素的HTML結(jié)構(gòu)榆芦,在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM

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

elem.childNodes返回所有的子節(jié)點(diǎn),包括HTML元素匆绣,屬性驻右,文本。childNodes只返回HTML元素節(jié)點(diǎn)崎淳。

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

  • getElementById方法返回匹配指定ID屬性的元素節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)凯力,則返回null茵瘾。這也是獲取一個(gè)元素最快的方法
  • getElementsByClassName方法返回一個(gè)類似數(shù)組的對象(HTMLCollection類型的對象),包括了所有class名字符合指定條件的元素(搜索范圍包括本身)咐鹤,元素的變化實(shí)時(shí)反映在返回結(jié)果中拗秘。這個(gè)方法不僅可以在document對象上調(diào)用,也可以在任何元素節(jié)點(diǎn)上調(diào)用祈惶。
  • getElementsByTagName方法返回所有指定標(biāo)簽的元素(搜索范圍包括本身)雕旨。返回值是一個(gè)HTMLCollection對象,也就是說捧请,搜索結(jié)果是一個(gè)動(dòng)態(tài)集合凡涩,任何元素的變化都會(huì)實(shí)時(shí)反映在返回的集合中。這個(gè)方法不僅可以在document對象上調(diào)用疹蛉,也可以在任何元素節(jié)點(diǎn)上調(diào)用活箕。
  • getElementsByName方法用于選擇擁有name屬性的HTML元素,比如form可款、img育韩、frame克蚂、embed和object,返回一個(gè)NodeList格式的對象筋讨,不會(huì)實(shí)時(shí)反映元素的變化埃叭。
  • querySelector方法返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件悉罕,則返回第一個(gè)匹配的節(jié)點(diǎn)赤屋。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn),則返回null壁袄。
  • querySelectorAll方法返回匹配指定的CSS選擇器的所有節(jié)點(diǎn)类早,返回的是NodeList類型的對象。NodeList對象不是動(dòng)態(tài)集合嗜逻,所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中莺奔。
  • elementFromPoint方法返回位于頁面指定位置的元素。

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

  • createElement方法用來生成HTML元素節(jié)點(diǎn)
  • setAttribute()方法用于設(shè)置元素屬性
  • removeAttribute()用于刪除元素屬性

5:如何給頁面元素添加子元素恼琼?如何刪除頁面元素下的子元素?

  • appendChild()在元素末尾添加元素
  • 刪除元素使用removeChild()方法即可

6: element.classList有哪些方法妨蛹?如何判斷一個(gè)元素的 class 列表中是包含某個(gè) class?如何添加一個(gè)class晴竞?如何刪除一個(gè)class?

  • add(class1, class2, ...)在元素中添加一個(gè)或多個(gè)不存在的類名蛙卤。
  • contains(class)返回布爾值,判斷指定的類名是否存在噩死。
  • item(index)返回索引值對應(yīng)的元素類名颤难。從 0 開始,在區(qū)間范圍外則返回 null已维。
  • remove(class1, class2, ...)移除元素中一個(gè)或多個(gè)類名行嗤。移除不存在的類名,不會(huì)報(bào)錯(cuò)垛耳。
  • toggle(class, true|false)在元素中切換類名栅屏。
    第一個(gè)參數(shù)為要在元素中移除的類名,并返回 false堂鲜。 如果該類名不存在則會(huì)在元素中添加類名栈雳,并返回 true。 第二個(gè)是可選參數(shù)缔莲,是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類哥纫,不管該類名是否存在。

7: 如何選中如下代碼所有的li元素痴奏? 如何選中btn元素蛀骇?

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點(diǎn)我</button>
</div>
  • 選中l(wèi)i元素 document.querySelectorAll("li")
  • 選中btn元素document.querySelector(btn) document.querySelector(".btn")
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厌秒,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子松靡,更是在濱河造成了極大的恐慌简僧,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件雕欺,死亡現(xiàn)場離奇詭異岛马,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)屠列,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進(jìn)店門啦逆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人笛洛,你說我怎么就攤上這事夏志。” “怎么了苛让?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵沟蔑,是天一觀的道長。 經(jīng)常有香客問我狱杰,道長瘦材,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任仿畸,我火速辦了婚禮食棕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘错沽。我一直安慰自己簿晓,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布千埃。 她就那樣靜靜地躺著憔儿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪镰禾。 梳的紋絲不亂的頭發(fā)上皿曲,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天,我揣著相機(jī)與錄音吴侦,去河邊找鬼屋休。 笑死,一個(gè)胖子當(dāng)著我的面吹牛备韧,可吹牛的內(nèi)容都是我干的劫樟。 我是一名探鬼主播,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼叠艳!你這毒婦竟也來了奶陈?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤附较,失蹤者是張志新(化名)和其女友劉穎吃粒,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拒课,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡徐勃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了早像。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片僻肖。...
    茶點(diǎn)故事閱讀 38,814評論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖卢鹦,靈堂內(nèi)的尸體忽然破棺而出臀脏,到底是詐尸還是另有隱情,我是刑警寧澤冀自,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布揉稚,位于F島的核電站,受9級特大地震影響熬粗,放射性物質(zhì)發(fā)生泄漏窃植。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一荐糜、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧葛超,春花似錦暴氏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至侥涵,卻和暖如春沼撕,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背芜飘。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工务豺, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嗦明。 一個(gè)月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓笼沥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子奔浅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,728評論 2 351

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

  • 基本介紹 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口馆纳。它給文檔(結(jié)構(gòu)樹)提供了一個(gè)結(jié)構(gòu)化的表述并且...
    草鞋弟閱讀 431評論 0 0
  • 什么是DOM?汹桦?鲁驶? DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的...
    熒惑3_3閱讀 1,383評論 0 1
  • 節(jié)點(diǎn) 節(jié)點(diǎn)類型 每個(gè)節(jié)點(diǎn)都有一個(gè) nodeType 屬性,用于表示節(jié)點(diǎn)類型舞骆。nodeType 屬性返回節(jié)點(diǎn)的類型钥弯。...
    練曉習(xí)閱讀 439評論 0 4
  • 題目1: dom對象的innerText和innerHTML有什么區(qū)別? innerText是一個(gè)可寫屬性葛作,返回元...
    QQQQQCY閱讀 182評論 0 0
  • 肇杰開始不自覺地注意女孩們的腳寿羞,尤其是慧瑩。因?yàn)樗杏X青春的帆布鞋對他的吸引力無窮赂蠢,也因?yàn)樽约旱氖稚犀F(xiàn)在有著慧瑩的...
    遁地烏賊閱讀 173,006評論 2 35