進階任務8dom元素

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

  • innerText是一個可寫屬性,返回元素內保函的文本內容痒筒,再多層次的時候會按照元素由淺到深的順序拼接元素內容袜腥。
  • innerHtml返回html結構

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

  <div id="btn">
    <h1 class='tit'>這是標題</h1>
    <p class="content">這是段落</p>
</div>
<script type='text/javascript'>
var btn=document.getElementById('btn')
    console.log(btn.children);//只得到HTML元素節(jié)點
    console.log(btn.childNodes);//得到所有的子節(jié)點(包括HTML元素摘完,屬性姥饰,文本)

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

  • 1.getElementById:返回匹配指定ID屬性的元素節(jié)點孝治,如果沒有發(fā)現(xiàn)匹配的節(jié)點列粪,則返回null。這也是獲取元素的最快方式谈飒。

  • 2 .getElementsByClassName():返回一個類似數(shù)組的對象(HTMLCollection類型的對象)岂座,包括了所有class名字符合指定條件的元素(搜索范圍包括本身),元素的變化實時反映在返回結果中杭措。這個方法不僅可以在document對象上調用费什,也可以在任何元素節(jié)點上調用。

  • 3.getElementBytagName():返回所有指定標簽的元素(搜索范圍包括本身)手素。返回值是一個HTMLCollection對象鸳址,也就是說,搜索結果是一個動態(tài)集合泉懦,任何元素的變化都會實時反映在返回的集合中稿黍。這個方法不僅可以在document對象上調用,也可以在任何元素節(jié)點上調用崩哩。

  • 4.getElementByname():getElementsByName方法用于選擇擁有name屬性的HTML元素巡球,比如form、img琢锋、frame辕漂、embed和object,返回一個NodeList格式的對象吴超,不會實時反映元素的變化钉嘹。
    ES5元素選擇方法:
    querySelector/querySelectorAll:選擇一個元素/選擇多個元素。

題目4:如何創(chuàng)建一個元素鲸阻?如何給元素設置屬性跋涣?如何刪除屬性

createElement():創(chuàng)建HTML元素缨睡。
createTextNode():創(chuàng)建HTML文本。
createDocumentfragment:createDocumentFragment方法生成一個DocumentFragment對象陈辱。
setAttribute():給元素設置屬性奖年。
removeAttribute():刪除元素屬性。

題目5:如何給頁面元素添加子元素沛贪?如何刪除頁面元素下的子元素?

appendChild():在元素末尾添加元素

    var newDiv = document.createElement('div');
    var newText = document.createTextNode('helloworld');
    new.appendChlid(newText); // <div>helloworld</div>

insortBefore():在元素之前添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
replaceChild()

replaceChild()接受兩個參數(shù):要插入的元素和要替換的元素

newDiv.replaceChild(newElement, oldElement);

刪除元素:刪除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

題目6: element.classList有哪些方法陋守?如何判斷一個元素的 class 列表中是包含某個 class?如何添加一個class利赋?如何刪除一個class?

element.classList.add(' ')添加一個class
element.classList.remove(' ')刪除一個class
element.classList.contain(' ')判斷是否擁有class
element.classList.toggle(' ')新增/刪除切換

題目7: 如何選中如下代碼所有的li元素水评? 如何選中btn元素?

<div class="mod-tabs">
 <ul>
   <li>list1</li>
   <li>list2</li>
   <li>list3</li>
 </ul>
   <button class="btn">點我</button>
</div>
  • 選中所有的li元素
    document.querySelectorAll('li')
    document.getElementByTagName('li')
  • 選中所有的btn元素
    document.querySelector('btn')
    document.getElementsByClassName('btn')
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末媚送,一起剝皮案震驚了整個濱河市中燥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌塘偎,老刑警劉巖疗涉,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異吟秩,居然都是意外死亡咱扣,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門涵防,熙熙樓的掌柜王于貴愁眉苦臉地迎上來偏窝,“玉大人,你說我怎么就攤上這事武学。” “怎么了伦意?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵火窒,是天一觀的道長。 經常有香客問我驮肉,道長熏矿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任离钝,我火速辦了婚禮票编,結果婚禮上,老公的妹妹穿的比我還像新娘卵渴。我一直安慰自己慧域,他們只是感情好,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布浪读。 她就那樣靜靜地躺著昔榴,像睡著了一般辛藻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上互订,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天吱肌,我揣著相機與錄音,去河邊找鬼仰禽。 笑死氮墨,一個胖子當著我的面吹牛,可吹牛的內容都是我干的吐葵。 我是一名探鬼主播规揪,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼折联!你這毒婦竟也來了粒褒?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤诚镰,失蹤者是張志新(化名)和其女友劉穎奕坟,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體清笨,經...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡月杉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了抠艾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片苛萎。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖检号,靈堂內的尸體忽然破棺而出腌歉,到底是詐尸還是另有隱情,我是刑警寧澤齐苛,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布翘盖,位于F島的核電站,受9級特大地震影響凹蜂,放射性物質發(fā)生泄漏馍驯。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一玛痊、第九天 我趴在偏房一處隱蔽的房頂上張望汰瘫。 院中可真熱鬧,春花似錦擂煞、人聲如沸混弥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽剑逃。三九已至浙宜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蛹磺,已是汗流浹背粟瞬。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留萤捆,地道東北人裙品。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像俗或,于是被迫代替她去往敵國和親市怎。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內容

  • 基本介紹 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口辛慰。它給文檔(結構樹)提供了一個結構化的表述并且...
    草鞋弟閱讀 436評論 0 0
  • 題目1: dom對象的innerText和innerHTML有什么區(qū)別区匠? innerText返回的是元素內包含的文...
    Feiyu_有貓病閱讀 375評論 0 0
  • 題目1: dom對象的innerText和innerHTML有什么區(qū)別? innerText是一個可寫屬性帅腌,返回元...
    Taaaaaaaurus閱讀 201評論 0 1
  • 錯過的青春那年我們很青澀驰弄,滿腔熱血煮酒論英雄,我們的激情燃燒在一張張試卷里速客,讓文字和答案來感受自己的存在戚篙;錯過的青...
    孤芳自香閱讀 186評論 0 2