DOM操作

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

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

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerText返回內(nèi)容是"123456"
innerHTML:innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容，而是返回元素的HTML結(jié)構(gòu)，在寫入的時(shí)候也會(huì)自動(dòng)構(gòu)建DOM

<div>
    <p>
        123
        <span>456</span>
    </p>
</div>

外層div的innerHTML返回內(nèi)容是 "<p>123<span>456</span></p>"

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

  • elem.children只輸出普通的DOM元素
  • elem.childNodes會(huì)輸出所有的子元素，包括文本節(jié)點(diǎn)、文字
  • 大多數(shù)情況下我們應(yīng)該使用elem.children

例子：

<!-- 注意中間有空格 -->
<div id="hot_game">熱門游戲<div>我是子節(jié)點(diǎn)</div> </div>

生成如下結(jié)構(gòu)DOM：


測試：


最后一個(gè)#test是由于上面的空格引起的，一個(gè)空格也算是一個(gè)#text。

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

document.getElementById:

根據(jù)元素id返回元素，返回值是Element類型，如果不存在該元素，則返回null.

注意：

  • 元素的Id是大小寫敏感的，一定要寫對元素的id。
  • HTML文檔中可能存在多個(gè)id相同的元素，則返回第一個(gè)元素
  • 只從文檔中進(jìn)行搜索元素，如果創(chuàng)建了一個(gè)元素并指定id，但并沒有添加到文檔中，則這個(gè)元素是不會(huì)被查找到的

document.getElementsByTagName:

根據(jù)元素標(biāo)簽名獲取元素，返回一個(gè)即時(shí)的HTMLCollection類型.即時(shí)的HTMLCollection類型表示該集合是隨時(shí)變化的，也就是是文檔中有幾個(gè)div，它會(huì)隨時(shí)進(jìn)行變化，當(dāng)我們新增一個(gè)div后，再訪問HTMLCollection時(shí)，就會(huì)包含這個(gè)新增的div。

注意：

  • 如果要對HTMLCollection集合進(jìn)行循環(huán)操作，最好將其長度緩存起來，因?yàn)槊看窝h(huán)都會(huì)去計(jì)算長度，暫時(shí)緩存起來可以提高效率
  • 如果沒有存在指定的標(biāo)簽，該接口返回的不是null，而是一個(gè)空的HTMLCollection
  • “*”表示所有標(biāo)簽

document.getElementsByName:

主要是通過指定的name屬性來獲取元素，它返回一個(gè)即時(shí)的NodeList對象

注意：

  • 返回對象是一個(gè)即時(shí)的NodeList，它是隨時(shí)變化的
  • 在HTML元素中，并不是所有元素都有name屬性，比如div是沒有name屬性的，但是如果強(qiáng)制設(shè)置div的name屬性，它也是可以被查找到的
  • 在IE中，如果id設(shè)置成某個(gè)值，然后傳入getElementsByName的參數(shù)值和id值一樣，則這個(gè)元素是會(huì)被找到的，所以最好不好設(shè)置同樣的值給id和name

document.getElementsByClassName:

根據(jù)元素的class返回一個(gè)即時(shí)的HTMLCollection

注意：

  • 返回結(jié)果是一個(gè)即時(shí)的HTMLCollection，會(huì)隨時(shí)根據(jù)文檔結(jié)構(gòu)變化
  • IE9以下瀏覽器不支持
  • 如果要獲取2個(gè)以上classname，可傳入多個(gè)classname，每個(gè)用空格相隔，例如:
var elements = document.getElementsByClassName("test1 test2");

ES5的方法：

document.querySelector：

返回匹配指定的CSS選擇器的元素節(jié)點(diǎn)。如果有多個(gè)節(jié)點(diǎn)滿足匹配條件，則返回第一個(gè)匹配的節(jié)點(diǎn)。如果沒有發(fā)現(xiàn)匹配的節(jié)點(diǎn)，則返回null。

var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');

querySelector方法無法選中CSS偽元素。

document.querySelectorAll：

回匹配指定的CSS選擇器的所有節(jié)點(diǎn)，返回的是NodeList類型的對象。NodeList對象不是動(dòng)態(tài)集合，所以元素節(jié)點(diǎn)的變化無法實(shí)時(shí)反映在返回結(jié)果中。

elementList = document.querySelectorAll(selectors);

querySelectorAll方法的參數(shù)，可以是逗號分隔的多個(gè)CSS選擇器，返回所有匹配其中一個(gè)選擇器的元素。

var matches = document.querySelectorAll("div.note, div.alert");

上面代碼返回class屬性是note或alert的div元素。

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

創(chuàng)建元素：

createElement：

通過傳入指定的一個(gè)標(biāo)簽名來創(chuàng)建一個(gè)元素，如果傳入的標(biāo)簽名是一個(gè)未知的，則會(huì)創(chuàng)建一個(gè)自定義的標(biāo)簽,例如：

var div = document.createElement("div");

注意：

  • IE8以下瀏覽器不支持自定義標(biāo)簽。
  • 通過createElement創(chuàng)建的元素并不屬于html文檔，它只是創(chuàng)建出來，并未添加到html文檔中，要調(diào)用appendChild或insertBefore等方法將其添加到HTML文檔樹中。

createTextNode:

用來創(chuàng)建一個(gè)文本節(jié)點(diǎn),如下：

 var textNode = document.createTextNode("一個(gè)TextNode");

注意：創(chuàng)建后的文本節(jié)點(diǎn)也只是獨(dú)立的一個(gè)節(jié)點(diǎn)，同樣需要appendChild將其添加到HTML文檔樹中

cloneNode:

用于克隆元素，方法有一個(gè)布爾值參數(shù)，傳入true的時(shí)候會(huì)深復(fù)制，也就是會(huì)復(fù)制元素及其子元素（IE還會(huì)復(fù)制其事件），false的時(shí)候只復(fù)制元素本身

createDocumentFragment：

生成一個(gè)DocumentFragment對象。DocumentFragment對象是一個(gè)存在于內(nèi)存的DOM片段，但是不屬于當(dāng)前文檔，常常用來生成較復(fù)雜的DOM結(jié)構(gòu)，然后插入當(dāng)前文檔。這樣做的好處在于，因?yàn)镈ocumentFragment不屬于當(dāng)前文檔，對它的任何改動(dòng)，都不會(huì)引發(fā)網(wǎng)頁的重新渲染，比直接修改當(dāng)前文檔的DOM有更好的性能表現(xiàn)。
例子：

<ul id="list"></ul>


  var list = document.getElementById("list");    
  var fragment = document.createDocumentFragment();

  for(var i = 0;i < 100; i++){
  var li = document.createElement("li");
    li.textContent = i;
    fragment.appendChild(li);
  }
 
    list.appendChild(fragment);

上述代碼的最終結(jié)果是向ul里添加了100個(gè)li。但是先把內(nèi)容添加到DocumentFragment然后再把DocumentFragment添加到頁面，使得頁面只用進(jìn)行一次渲染。

設(shè)置元素屬性：

屬性操作方法：

getAttribute()：

getAttribute()用于獲取元素的attribute值

createAttribute()：

createAttribute()方法生成一個(gè)新的屬性對象節(jié)點(diǎn)，并返回它。

setAttribute(name, value)

setAttribute()方法用于設(shè)置元素屬性，name 是表示屬性名稱的字符串，value 是屬性的新值

設(shè)置屬性：

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

刪除屬性：

romoveAttribute()：

removeAttribute()用于刪除元素屬性

var node = document.getElementById("div1");
node.removeAttribute('id');

5.如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?

添加子元素：

appendChild()：

在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);
insertBefore()

在某個(gè)元素之前插入元素

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

刪除子元素：

使用removeChild(childNode)
<div id="top" align="center">
  <div id="nested"></div>
</div>

// 先定位父節(jié)點(diǎn),然后刪除其子節(jié)點(diǎn)
var d = document.getElementById("top");
var d_nested = document.getElementById("nested");
var throwawayNode = d.removeChild(d_nested);

// 無須定位父節(jié)點(diǎn),通過parentNode屬性直接刪除自身
var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

// 移除一個(gè)元素節(jié)點(diǎn)的所有子節(jié)點(diǎn)
var element = document.getElementById("top");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

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

方法：

add( String [, String] )
添加指定的類值。如果這些類已經(jīng)存在于元素的屬性中，那么它們將被忽略。
remove( String [,String] )
刪除指定的類值。
item ( Number )
按集合中的索引返回類值
toggle ( String [, force] )
當(dāng)只有一個(gè)參數(shù)時(shí)：切換 class value; 即如果類存在，則刪除它并返回false，如果不存在，則添加它并返回true。
當(dāng)存在第二個(gè)參數(shù)時(shí)：如果第二個(gè)參數(shù)的計(jì)算結(jié)果為true，則添加指定的類值，如果計(jì)算結(jié)果為false，則刪除它
contains( String )
檢查元素的類屬性中是否存在指定的類值。
示例：

  <div class="foo bar">
        <a href="">link</a>
        <h1 class="title">aaa</h1>
        <p class="title"></p>
    </div>

// div是具有class =“foo bar”的<div>元素的對象引用
div.classList.remove("foo");
div.classList.add("anotherclass");

// 如果visible被設(shè)置則刪除它，否則添加它
div.classList.toggle("visible");

// 添加/刪除 visible，取決于測試條件，i小于10
div.classList.toggle("visible", i < 10);
//判斷classList里是不是包含foo這個(gè)class，有則true，反之為false
div.classList.contains("foo");

//添加或刪除多個(gè)類
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");

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>

var li = document.getElementsByTagName('li')
var btn = document.getElementsByClassName('btn')
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 什么是DOM？？？ DOM(Document Object Model 文檔對象模型)是針對HTML和XML文檔的...
    熒惑3_3閱讀 1,562評論 0贊 1
  • 基本介紹 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它給文檔（結(jié)構(gòu)樹）提供了一個(gè)結(jié)構(gòu)化的表述并且...
    草鞋弟閱讀 582評論 0贊 0
  • 節(jié)點(diǎn) 節(jié)點(diǎn)類型 每個(gè)節(jié)點(diǎn)都有一個(gè) nodeType 屬性，用于表示節(jié)點(diǎn)類型。nodeType 屬性返回節(jié)點(diǎn)的類型。...
    練曉習(xí)閱讀 547評論 0贊 4
  • 題目1： dom對象的innerText和innerHTML有什么區(qū)別？ innerText是一個(gè)可寫屬性，返回元...
    Taaaaaaaurus閱讀 262評論 0贊 1
  • 瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器“對話”。 window 所有的瀏覽器都支持w...
    相關(guān)函數(shù)閱讀 733評論 1贊 2

友情鏈接更多精彩內(nèi)容