【DOM】DOM的操作（增刪改查）

操作DOM的核心就是增刪改查

參考：

JavaScript DOM編程——API詳解

目錄

一陨亡、節(jié)點(diǎn)創(chuàng)建型API

  • 1.1 createElement
  • 1.2 createTextNode
  • 1.3 cloneNode
  • 1.4 createDocumentFragment

二伶选、頁面修改形API（包括刪除和添加）（刪）（改）

  • 2.1 appendChild(追加為子元素)
  • 2.2 insertBefore(插入前面)
  • 2.3 removeChild(刪除子元素)
  • 2.4 replaceChild(替換子元素)

三 節(jié)點(diǎn)查詢型API(查)

  • 3.1 document.getElementById
  • 3.2 document.getElementsByTagName
  • 3.3 document.getElementsByName
  • 3.4 document.getElementsByClassName
  • 3.5 document.querySelector和document.querySelectorAll
  • 3.6 elementFromPoint()

四 元素屬性型操作（屬性節(jié)點(diǎn)的操作）

一般只操作html標(biāo)簽上的屬性如id螺垢；class之類的；
但是style屬性如寬高背景色之類的一般寫在css里面所以要通過element.currentStyle : window.getComputedStyle(element,pseduoElement)來操作詳細(xì)請看BOM筆記

  • 4.1 getAttribute() (獲取屬性)
  • 4.2 createAttribute() (創(chuàng)建屬性)
  • 4.3 setAttribute() (設(shè)置屬性)
  • 4.4 romoveAttribute() (刪除屬性)
  • 4.5 element.attributes（將屬性生成數(shù)組對象）

五 innerText和innerHTML（outerHTML）有什么區(qū)別串绩？

DOM基本操作思維導(dǎo)圖


dom

一缺虐、節(jié)點(diǎn)創(chuàng)建型API（增）

在這里，我將常用的DOM操作api進(jìn)行分類礁凡，首先要介紹的是創(chuàng)建型的api高氮。這一類型的api慧妄，簡而言之就是用來創(chuàng)建節(jié)點(diǎn)的

1.1 createElement

createElement通過傳入指定的一個(gè)標(biāo)簽名來創(chuàng)建一個(gè)元素，如果傳入的標(biāo)簽名是一個(gè)未知的剪芍，則會創(chuàng)建一個(gè)自定義的標(biāo)簽塞淹，注意：IE8以下瀏覽器不支持自定義標(biāo)簽

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

使用createElement要注意：通過createElement創(chuàng)建的元素并不屬于html文檔，它只是創(chuàng)建出來罪裹，并未添加到html文檔中饱普，要調(diào)用appendChild或insertBefore等方法將其添加到HTML文檔樹中;

1.2 createTextNode

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

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

createTextNode接收一個(gè)參數(shù)状共，這個(gè)參數(shù)就是文本節(jié)點(diǎn)中的文本套耕，和createElement一樣，創(chuàng)建后的文本節(jié)點(diǎn)也只是獨(dú)立的一個(gè)節(jié)點(diǎn)峡继，同樣需要append Child將其添加到HTML文檔樹中

1.3 cloneNode

cloneNode是用來返回調(diào)用方法的節(jié)點(diǎn)的一個(gè)副本冯袍，它接收一個(gè)bool參數(shù)，用來表示是否復(fù)制子元素碾牌，使用如下：

var parent = document.getElementById("parentElement"); 
var parent2 = parent.cloneNode(true);// 傳入true
parent2.id = "parent2";

這段代碼通過cloneNode復(fù)制了一份parent元素康愤，其中cloneNode的參數(shù)為true，表示parent的子節(jié)點(diǎn)也被復(fù)制小染，如果傳入false翘瓮，則表示只復(fù)制了parent節(jié)點(diǎn)

<body>
    <div id="parent">
        我是父元素的文本
        <br/>
        <span>
        我是子元素
        </span>
    </div>
    <button id="btnCopy">復(fù)制</button>
    <script>
        var parent = document.getElementById("parent");
        //點(diǎn)擊id＝"btnCopy"點(diǎn)擊執(zhí)行執(zhí)行函數(shù)（函數(shù)內(nèi)是一個(gè)元素的拷貝）  
        document.getElementById("btnCopy").onclick = function(){
            var parent2 = parent.cloneNode(true);
            parent2.id = "parent2";
            document.body.appendChild(parent2);
        }
    </script>
</body>

這段代碼很簡單，主要是綁定button事件裤翩，事件內(nèi)容是復(fù)制了一個(gè)parent，修改其id调榄，然后添加到文檔中

這里有幾點(diǎn)要注意：
和createElement一樣踊赠，cloneNode創(chuàng)建的節(jié)點(diǎn)只是游離有html文檔外的節(jié)點(diǎn)，要調(diào)用appendChild方法才能添加到文檔樹中
如果復(fù)制的元素有id每庆，則其副本同樣會包含該id筐带，由于id具有唯一性，所以在復(fù)制節(jié)點(diǎn)后必須要修改其id
調(diào)用接收的bool參數(shù)最好傳入缤灵，如果不傳入該參數(shù)伦籍，不同瀏覽器對其默認(rèn)值的處理可能不同
除此之外，我們還有一個(gè)需要注意的點(diǎn)：
如果被復(fù)制的節(jié)點(diǎn)綁定了事件腮出，則副本也會跟著綁定該事件嗎帖鸦？這里要分情況討論：
如果是通過addEventListener或者比如onclick進(jìn)行綁定事件，則副本節(jié)點(diǎn)不會綁定該事件
如果是內(nèi)聯(lián)方式綁定比如
<div onclick="showParent()"></div>
這樣的話胚嘲，副本節(jié)點(diǎn)同樣會觸發(fā)事件

1.4 createDocumentFragment

createDocumentFragment方法用來創(chuàng)建一個(gè)DocumentFragment作儿。在前面我們說到DocumentFragment表示一種輕量級的文檔，它的作用主要是存儲臨時(shí)的節(jié)點(diǎn)用來準(zhǔn)備添加到文檔中
createDocumentFragment方法主要是用于添加大量節(jié)點(diǎn)到文檔中時(shí)會使用到馋劈。假設(shè)要循環(huán)一組數(shù)據(jù)攻锰，然后創(chuàng)建多個(gè)節(jié)點(diǎn)添加到文檔中

<ul id="list"></ul>
<input type="button" value="添加多項(xiàng)" id="btnAdd" />

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

這段代碼將按鈕綁定了一個(gè)事件晾嘶，這個(gè)事件創(chuàng)建了100個(gè)li節(jié)點(diǎn)，然后依次將其添加HTML文檔中娶吞。這樣做有一個(gè)缺點(diǎn)：每次一創(chuàng)建一個(gè)新的元素垒迂，然后添加到文檔樹中，這個(gè)過程會造成瀏覽器的回流妒蛇。所謂回流簡單說就是指元素大小和位置會被重新計(jì)算机断，如果添加的元素太多，會造成性能問題材部。

這個(gè)時(shí)候毫缆，就是使用createDocumentFragment了DocumentFragment不是文檔樹的一部分，它是保存在內(nèi)存中的乐导，所以不會造成回流問題苦丁。我們修改上面的代碼如下

document.getElementById("btnAdd").onclick = function(){
    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);
}

優(yōu)化后的代碼主要是創(chuàng)建了一個(gè)fragment，每次生成的li節(jié)點(diǎn)先添加到fragment物臂，最后一次性添加到list

1.5 創(chuàng)建型API總結(jié)

創(chuàng)建型api主要包括

  • createElement
  • createTextNode
  • cloneNode
  • createDocumentFragment

四個(gè)方法.

需要注意下面幾點(diǎn)：

  • 它們創(chuàng)建的節(jié)點(diǎn)只是一個(gè)孤立的節(jié)點(diǎn)旺拉，
  • 要通過appendChild添加到文檔中
  • cloneNode要注意如果被復(fù)制的節(jié)點(diǎn)是否包含子節(jié)點(diǎn)以及事件綁定等問題
  • 使用createDocumentFragment來解決添加大量節(jié)點(diǎn)時(shí)的性能問題

二、頁面修改形API（包括刪除和添加）（刪）（改）

前面我們提到創(chuàng)建型api棵磷，它們只是創(chuàng)建節(jié)點(diǎn)蛾狗，并沒有真正修改到頁面內(nèi)容，而是要調(diào)用appendChild來將其添加到文檔樹中仪媒。我在這里將這類會修改到頁面內(nèi)容歸為一類沉桌。

修改頁面內(nèi)容的api主要包括：

  • appendChild(追加為子元素)
  • insertBefore(插入前面)
  • removeChild(刪除子元素)
  • replaceChild(替換子元素)

2.1 appendChild

appendChild我們在前面已經(jīng)用到多次，就是將指定的節(jié)點(diǎn)添加到調(diào)用該方法的節(jié)點(diǎn)的子元素的末尾算吩。調(diào)用方法如下：

parent.appendChild(child);

child節(jié)點(diǎn)將會作為parent節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)

appendChild這個(gè)方法很簡單九火，但是還有有一點(diǎn)需要注意：如果被添加的節(jié)點(diǎn)是一個(gè)頁面中存在的節(jié)點(diǎn)论寨，則執(zhí)行后這個(gè)節(jié)點(diǎn)將會添加到指定位置，其原本所在的位置將移除該節(jié)點(diǎn)，也就是說不會同時(shí)存在兩個(gè)該節(jié)點(diǎn)在頁面上匾七，相當(dāng)于把這個(gè)節(jié)點(diǎn)移動到另一個(gè)地方

<div id="child">
    要被添加的節(jié)點(diǎn)
</div>
<br/>
<br/>
<br/>
<div id="parent">
    要移動的位置
</div>        
<input id="btnMove" type="button" value="移動節(jié)點(diǎn)" />
<script>
    document.getElementById("btnMove").onclick = function(){
        var child = document.getElementById("child");
        document.getElementById("parent").appendChild(child);
    }
</script>

這段代碼主要是獲取頁面上的child節(jié)點(diǎn)财剖，然后添加到指定位置送滞，可以看到原本的child節(jié)點(diǎn)被移動到parent中了钧大。
這里還有一個(gè)要注意的點(diǎn)：如果child綁定了事件，被移動時(shí)窍霞，它依然綁定著該事件

2.2 insertBefore

insertBefore用來添加一個(gè)節(jié)點(diǎn)到一個(gè)參照節(jié)點(diǎn)之前匠题，用法如下

parentNode.insertBefore(newNode,refNode);

parentNode表示新節(jié)點(diǎn)被添加后的父節(jié)點(diǎn)
newNode表示要添加的節(jié)點(diǎn)
refNode表示參照節(jié)點(diǎn)，新節(jié)點(diǎn)會添加到這個(gè)節(jié)點(diǎn)之前

<div id="parent">
    父節(jié)點(diǎn)
    <div id="child">子元素</div>
</div>
<input type="button" id="insertNode" value="插入節(jié)點(diǎn)" />
<script>
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    document.getElementById("insertNode").onclick = function(){
        var newNode = document.createElement("div");
        newNode.textContent = "新節(jié)點(diǎn)"
        parent.insertBefore(newNode,child);
    }
</script>

這段代碼創(chuàng)建了一個(gè)新節(jié)點(diǎn)官撼，然后添加到child節(jié)點(diǎn)之前

和appendChild一樣梧躺，如果插入的節(jié)點(diǎn)是頁面上的節(jié)點(diǎn)，則會移動該節(jié)點(diǎn)到指定位置，并且保留其綁定的事件掠哥。

關(guān)于第二個(gè)參數(shù)參照節(jié)點(diǎn)還有幾個(gè)注意的地方：

  • refNode是必傳的巩踏，如果不傳該參數(shù)會報(bào)錯(cuò)
  • 如果refNode是undefined或null，則insertBefore會將節(jié)點(diǎn)添加到子元素的末尾

2.3 removeChild

let oldChild = node.removeChild(child);
//OR
element.removeChild(child);
  • child 是要移除的那個(gè)子節(jié)點(diǎn).
  • node 是child的父節(jié)點(diǎn).
  • oldChild保存對刪除的子節(jié)點(diǎn)的引用. oldChild === child.

被移除的這個(gè)子節(jié)點(diǎn)仍然存在于內(nèi)存中,只是沒有添加到當(dāng)前文檔的DOM樹中,因此,你還可以把這個(gè)節(jié)點(diǎn)重新添加回文檔中,當(dāng)然,實(shí)現(xiàn)要用另外一個(gè)變量比如上例中的oldChild來保存這個(gè)節(jié)點(diǎn)的引用. 如果使用上述語法中的第二種方法, 即沒有使用 oldChild 來保存對這個(gè)節(jié)點(diǎn)的引用, 則認(rèn)為被移除的節(jié)點(diǎn)已經(jīng)是無用的,在短時(shí)間內(nèi)將會被內(nèi)存管理回收.

如果上例中的child節(jié)點(diǎn)不是node節(jié)點(diǎn)的子節(jié)點(diǎn),則該方法會拋出異常.

// 先定位父節(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);
}

2.4 replaceChild

replaceChild用于使用一個(gè)節(jié)點(diǎn)替換另一個(gè)節(jié)點(diǎn)续搀，用法如下

parent.replaceChild(newChild,oldChild);

newChild是替換的節(jié)點(diǎn)塞琼，可以是新的節(jié)點(diǎn)，也可以是頁面上的節(jié)點(diǎn)禁舷，如果是頁面上的節(jié)點(diǎn)彪杉，則其將被轉(zhuǎn)移到新的位置
oldChild是被替換的節(jié)點(diǎn)

2.5 頁面修改型API總結(jié)

頁面修改型api主要是這四個(gè)接口，要注意幾個(gè)特點(diǎn)：
不管是新增還是替換節(jié)點(diǎn)牵咙，如果新增或替換的節(jié)點(diǎn)是原本存在頁面上的派近，則其原來位置的節(jié)點(diǎn)將被移除，也就是說同一個(gè)節(jié)點(diǎn)不能存在于頁面的多個(gè)位置
節(jié)點(diǎn)本身綁定的事件會不會消失洁桌，會一直保留著

三 節(jié)點(diǎn)查詢型API(查)

節(jié)點(diǎn)查詢型API也是非常常用的

3.1 document.getElementById

這個(gè)接口很簡單渴丸，根據(jù)元素id返回元素，返回值是Element類型另凌，如果不存在該元素谱轨，則返回null

使用這個(gè)接口有幾點(diǎn)要注意：

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

3.2 document.getElementsByTagName

這個(gè)接口根據(jù)元素標(biāo)簽名獲取元素献汗，返回一個(gè)即時(shí)的HTMLCollection類型，什么是即時(shí)的HTMLCollection類型呢王污？

<div>div1</div>
<div>div2</div>

<input type="button" value="顯示數(shù)量" id="btnShowCount"/>
<input type="button" value="新增div" id="btnAddDiv"/>    
<script>   
    var divList = document.getElementsByTagName("div");
    document.getElementById("btnAddDiv").onclick = function(){
        var div = document.createElement("div");
        div.textContent ="div" + (divList.length+1);
        document.body.appendChild(div);
    }

    document.getElementById("btnShowCount").onclick = function(){
        alert(divList.length);
    }
</script>

這段代碼中有兩個(gè)按鈕雀瓢，一個(gè)按鈕是顯示HTMLCollection元素的個(gè)數(shù)，另一個(gè)按鈕可以新增一個(gè)div標(biāo)簽到文檔中玉掸。前面提到HTMLCollcetion元素是即時(shí)的表示該集合是隨時(shí)變化的，
可以看出其實(shí)document.getElementsByTagName返回的是一個(gè)數(shù)組對象我們可以用數(shù)組的方式對其進(jìn)行操作醒叁。

使用document.getElementsByTagName這個(gè)方法有幾點(diǎn)要注意：

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

3.3 document.getElementsByName

getElementsByName主要是通過指定的name屬性來獲取元素饮睬，它返回一個(gè)即時(shí)的NodeList（節(jié)點(diǎn)列表）對象租谈。一般用于獲取表單元素的·name·屬性

使用這個(gè)接口主要要注意幾點(diǎn)：

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

3.4 document.getElementsByClassName

這個(gè)API是根據(jù)元素的class返回一個(gè)即時(shí)的HTMLCollection茬腿，用法如下

var elements = document.getElementsByClassName(names);

這個(gè)接口有下面幾點(diǎn)要注意：

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

3.5 document.querySelector和document.querySelectorAll

這兩個(gè)api很相似辐董，通過css選擇器來查找元素悴品，注意選擇器要符合CSS選擇器的規(guī)則

document.querySelector

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偽元素邦蜜。

注意，由于返回的是第一個(gè)匹配的元素亥至，這個(gè)api使用的深度優(yōu)先搜索來獲取元素

<div>
    <div>
        <span class="test">第三級的span</span>    
    </div>
</div>
<div class="test">            
    同級的第二個(gè)div
</div>
<input type="button" id="btnGet" value="獲取test元素" />
<script>
    document.getElementById("btnGet").addEventListener("click",function(){
        var element = document.querySelector(".test");
        alert(element.textContent);
    })
</script>

這個(gè)例子很簡單悼沈，就是兩個(gè)class都包含“test”的元素，一個(gè)在文檔樹的前面姐扮，但是它在第三級絮供，另一個(gè)在文檔樹的后面，但它在第一級茶敏，通過querySelector獲取元素時(shí)壤靶，它通過深度優(yōu)先搜索，拿到文檔樹前面的第三級的元素(文檔樹前面優(yōu)先深度優(yōu)先)

document.querySelectorAll

document.querySelectorAll的不同之處在于它返回的是所有匹配的元素惊搏，querySelectorAll方法的參數(shù)贮乳，可以是逗號分隔的多個(gè)CSS選擇器，返回所有匹配其中一個(gè)選擇器的元素恬惯。

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

例子

<div class="test">
    class為test
</div>
<div id="test">
    id為test
</div>
<input id="btnShow" type="button" value="顯示內(nèi)容" />

<script>
    document.getElementById("btnShow").addEventListener("click",function(){
        var elements = document.querySelectorAll("#test,.test");    
        for(var i = 0,length = elements.length;i<length;i++){
            alert(elements[i].textContent);
        }    
    })
</script>

這段代碼通過querySelectorAll向拆，使用id選擇器和class選擇器選擇了兩個(gè)元素，并依次輸出其內(nèi)容酪耳。要注意兩點(diǎn)：

  • querySelectorAll也是通過深度優(yōu)先搜索浓恳，搜索的元素順序和選擇器的順序無關(guān)
  • 返回的是一個(gè)非即時(shí)的NodeList，也就是說結(jié)果不會隨著文檔樹的變化而變化

兼容性問題：querySelector和querySelectorAll在ie8以下的瀏覽器不支持

3.6 elementFromPoint()

elementFromPoint方法返回位于頁面指定位置的元素。

var element = document.elementFromPoint(x, y);

上面代碼中颈将，elementFromPoint方法的參數(shù)x和y梢夯，分別是相對于當(dāng)前窗口左上角的橫坐標(biāo)和縱坐標(biāo)，單位是CSS像素吆鹤。

elementFromPoint方法返回位于這個(gè)位置的DOM元素厨疙，如果該元素不可返回（比如文本框的滾動條），則返回它的父元素（比如文本框）疑务。如果坐標(biāo)值無意義（比如負(fù)值）沾凄，則返回null。

小結(jié)：

  • document.getElementById返回一個(gè)對象
  • document.getElementsByName和document.getElementsByClasName返回一個(gè)對象數(shù)組

四 元素屬性型操作（屬性節(jié)點(diǎn)的操作）

4.1 getAttribute()(獲取屬性)

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

node.getAttribute('id');
//表示獲取node元素的id屬性的  ‘值’

4.2 createAttribute()(創(chuàng)建屬性)

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

attribute = document.createAttribute(name);
createAttribute方法的參數(shù)name，是屬性的名稱温鸽。

4.3 setAttribute()(設(shè)置屬性)

setAttribute()方法用于設(shè)置元素屬性

var node = document.getElementById("div1");
node.setAttribute(name, value);
//name為屬性名稱 保屯；value為屬性值

例如

var node = document.getElementById("div1");
node.setAttribute("id", "ct");

等同于

var node = document.getElementById("div1");
var a = document.createAttribute("id");
a.value = "ct";
node.setAttributeNode(a);

4.4 romoveAttribute()(刪除屬性)

removeAttribute()用于刪除元素屬性

node.removeAttribute('id');

4.5 element.attributes（將屬性生成數(shù)組對象）

當(dāng)然上面的方法做的事情也可以通過類似操作數(shù)組屬性element.attributes來實(shí)現(xiàn)

語法

var attr = element.attributes;

示例

// 獲取文檔的第一個(gè) <p> 元素
var para = document.getElementsByTagName("p")[0];
//獲取該元素屬性（多個(gè)屬性會形成一個(gè)數(shù)組對象）
var atts = para.attributes;

遍歷元素的屬性
索引有利于遍歷一個(gè)元素的所有屬性。

在以下例子中會遍歷文檔中 id 為 "paragraph" 元素的屬性節(jié)點(diǎn)涤垫，并打印出來姑尺。

<p id="paragraph" style="color: green;">Sample Paragraph</p>
<form action="">
    <p>
        <input type="button" value="顯示第一個(gè)屬性及其值" onclick="showFirstAttr();">
        <input id="result" type="text" value="">
    </p>
</form>
<script type="text/javascript">
    function showFirstAttr() {
        var paragraph= document.getElementById("paragraph");
        var result= document.getElementById("result");

        // 首先，讓我們確認(rèn)這個(gè)段落有一些屬性蝠猬。
        //hasAttributes屬性返回一個(gè)布爾值true或false,來表明當(dāng)前元素節(jié)點(diǎn)是否有至少一個(gè)的屬性(attribute).
        if (paragraph.hasAttributes()) {
            var attrs = paragraph.attributes;
            var output= ""; 
            for(var i=attrs.length-1; i>=0; i--) {
                output+= attrs[i].name + "->" + attrs[i].value;
            }
            result.value = output;  //寫入 value=""使文本框出現(xiàn)內(nèi)容
        } else {
            result.value = "沒有屬性顯示了" //寫入 value="沒有屬性顯示了"使文本框出現(xiàn)內(nèi)容
        }
    }
</script>

五 innerText和innerHTML（outerHTML）有什么區(qū)別切蟋？

innerText

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

<div id="test">
    <!--注釋-->
    <p>我的名字叫<span>哈哈哈</span></p>
</div>
<script>
    var test = document.getElementById('test')
    console.log(test.innerText);
</script>

返回的結(jié)果

‘我的名字叫哈哈哈’

只包含文本節(jié)點(diǎn)

innerHTML柄粹、outerHTML

innerHTML屬性作用和innerText類似，但是不是返回元素的文本內(nèi)容匆绣，而是返回元素的HTML結(jié)構(gòu)驻右，在寫入的時(shí)候也會自動構(gòu)建DOM

<div id="test">
    <!--注釋-->
    <p>我的名字叫<span>哈哈哈</span></p>
</div>
<script>
    var test = document.getElementById('test')
    console.log(test.innerHTML);
</script>

返回的結(jié)果

 <!--注釋-->
    <p>我的名字叫<span>哈哈哈</span></p>

包含整個(gè)html結(jié)構(gòu)；（元素節(jié)點(diǎn)崎淳、注釋節(jié)點(diǎn)堪夭、文本節(jié)點(diǎn)）

<div id="test">
    <!--注釋-->
    <p>我的名字叫<span>哈哈哈</span></p>
</div>
<script>
    var test = document.getElementById('test')
    console.log(test.outerHTML);
</script>

返回的結(jié)果

<div id="test">
    <p>我的名字叫<span>哈哈哈</span></p>
</div>

包括自身和包含整個(gè)html結(jié)構(gòu)；（元素節(jié)點(diǎn)拣凹、注釋節(jié)點(diǎn)茵瘾、文本節(jié)點(diǎn)）

區(qū)別：

  • innerText返回的是元素內(nèi)包含的文本內(nèi)容（只返回文本節(jié)點(diǎn)類型）；
  • innerHTML返會元素內(nèi)HTML結(jié)構(gòu)咐鹤，包括元素節(jié)點(diǎn)、注釋節(jié)點(diǎn)圣絮、文本節(jié)點(diǎn)祈惶；
  • outerHTML返回包括元素節(jié)點(diǎn)自身和里面的所有元素節(jié)點(diǎn)、注釋節(jié)點(diǎn)、文本節(jié)點(diǎn)捧请；
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末凡涩，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子疹蛉，更是在濱河造成了極大的恐慌活箕，老刑警劉巖，帶你破解...
    沈念sama閱讀 218,755評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件可款，死亡現(xiàn)場離奇詭異育韩，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)闺鲸，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門筋讨，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人摸恍，你說我怎么就攤上這事悉罕。” “怎么了立镶？”我有些...
    開封第一講書人閱讀 165,138評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵壁袄，是天一觀的道長。 經(jīng)常有香客問我媚媒，道長嗜逻，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,791評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任欣范，我火速辦了婚禮变泄，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘恼琼。我一直安慰自己妨蛹，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布晴竞。 她就那樣靜靜地躺著蛙卤，像睡著了一般。 火紅的嫁衣襯著肌膚如雪噩死。 梳的紋絲不亂的頭發(fā)上颤难，一...
    開封第一講書人閱讀 51,631評論 1贊 305
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音已维，去河邊找鬼行嗤。 笑死，一個(gè)胖子當(dāng)著我的面吹牛垛耳，可吹牛的內(nèi)容都是我干的栅屏。 我是一名探鬼主播飘千，決...
    沈念sama閱讀 40,362評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼栈雳！你這毒婦竟也來了护奈？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,264評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤哥纫，失蹤者是張志新（化名）和其女友劉穎霉旗，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蛀骇，經(jīng)...
    沈念sama閱讀 45,724評論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡厌秒，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了松靡。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片简僧。...
    茶點(diǎn)故事閱讀 40,040評論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖雕欺，靈堂內(nèi)的尸體忽然破棺而出岛马，到底是詐尸還是另有隱情，我是刑警寧澤屠列，帶...
    沈念sama閱讀 35,742評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布啦逆，位于F島的核電站，受9級特大地震影響笛洛，放射性物質(zhì)發(fā)生泄漏夏志。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一苛让、第九天 我趴在偏房一處隱蔽的房頂上張望沟蔑。 院中可真熱鬧，春花似錦狱杰、人聲如沸瘦材。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0贊 22
  • 一樁弒父案仿畸，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽食棕。三九已至，卻和暖如春错沽，著一層夾襖步出監(jiān)牢的瞬間簿晓，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工千埃， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留憔儿，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評論 3贊 371
  • 代替公主和親
    正文 我出身青樓放可，卻偏偏與公主長得像皿曲，于是被迫代替她去往敵國和親唱逢。 傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評論 2贊 355

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

  • ??DOM（文檔對象模型）是針對 HTML 和 XML 文檔的一個(gè) API（應(yīng)用程序編程接口）备韧。 ??DOM 描繪...
    霜天曉閱讀 3,647評論 0贊 7
  • ??DOM 1 級主要定義的是 HTML 和 XML 文檔的底層結(jié)構(gòu)织堂。 ??DOM2 和 DOM3 級則在這個(gè)結(jié)構(gòu)...
    霜天曉閱讀 1,446評論 1贊 3
  • Node類型 DOM1級定義了一個(gè)Node接口叠艳，該接口由DOM中所有節(jié)點(diǎn)類型實(shí)現(xiàn)。這個(gè)Node接口在JS中是作為N...
    Maggie_77閱讀 420評論 0贊 0
  • 原文地址：http://luopq.com/2015/11/30/javascript-dom/ 文本整理了jav...
    鷓鴣少閱讀 349評論 0贊 1
  • 一個(gè)又一個(gè)人從身旁路過 或結(jié)伴而行 或形單影只 或悲或喜 一切都很真實(shí) 他們喜形于色易阳，有血有肉 與這凡塵喧囂很搭 ...
    劉苗正閱讀 134評論 0贊 1