欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳談javascript中DOM的基本屬性

 更新時(shí)間：2015年02月26日 09:45:44   投稿：hebedich  
DOM節(jié)點(diǎn)是一個(gè)對(duì)象，它有著一些屬性。其中有些是只讀的，有些可以直接進(jìn)行更改（updated on-the-fly）。今天我們就來(lái)具體探討下DOM的基本屬性，希望對(duì)大家能有所幫助

結(jié)構(gòu)和內(nèi)容屬性

nodeType

所有的節(jié)點(diǎn)都有類型，節(jié)點(diǎn)總共有以下的12種類型。

復(fù)制代碼 代碼如下:

interface Node {
// NodeType
const unsigned short      ELEMENT_NODE       = 1;
const unsigned short      ATTRIBUTE_NODE     = 2;
const unsigned short      TEXT_NODE          = 3;
const unsigned short      CDATA_SECTION_NODE = 4;
const unsigned short      ENTITY_REFERENCE_NODE = 5;
const unsigned short      ENTITY_NODE        = 6;
const unsigned short      PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short      COMMENT_NODE       = 8;
const unsigned short      DOCUMENT_NODE      = 9;
const unsigned short      DOCUMENT_TYPE_NODE = 10;
const unsigned short      DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short      NOTATION_NODE      = 12;
...
}

其中最重要的兩個(gè)節(jié)點(diǎn)為元素節(jié)點(diǎn)（1）和文本節(jié)點(diǎn)（3）。其余的很少會(huì)用到。
例如，列出所有的子元素節(jié)點(diǎn)時(shí)，我們可以遍歷它，并使用childNodes[i].nodeType != 1來(lái)進(jìn)行檢測(cè)。
下面是實(shí)現(xiàn)代碼：

復(fù)制代碼 代碼如下:

<body>
<div>Allowed readers:</div>
<ul>
 <li>John</li>
 <li>Bob</li>
</ul>
<!-- a comment node -->
<script>  
  var childNodes = document.body.childNodes
  for(var i=0; i<childNodes.length; i++) {
if (childNodes[i].nodeType != 1) continue
    alert(childNodes[i])
  }
</script>
</body>

*思考
下面這段代碼將提示什么內(nèi)容：

復(fù)制代碼 代碼如下:

<!DOCTYPE HTML>
<html> 
<body> 
<script>
   alert(document.body.lastChild.nodeType)
</script>
</body> 
</html>

nodeName, tagName

nodeName 和 tagName 都包含節(jié)點(diǎn)的名稱。
對(duì)于document.body來(lái)說(shuō)

alert( document.body.nodeName )   // BODY
在HTML中所有的nodeName會(huì)被大寫。

當(dāng)nodeName沒有被大寫時(shí)
這種情況比較稀有，你如果好奇的話可以閱讀以下。
你很可能已經(jīng)知道，瀏覽器有兩種方式進(jìn)行解析:HTML模式和__XML模式。通常使用的是HTML模式，但是當(dāng)使用XMLHttpRequest__技術(shù)獲取XML文檔時(shí)，會(huì)使用XML模式。
在火狐瀏覽器中當(dāng)XHTML文檔的Content-Type設(shè)置為xmlish時(shí)也會(huì)使用XML模式。
在__XML模式中節(jié)點(diǎn)名將會(huì)保留，所以有可能出現(xiàn)body或bOdY。
因此，如果通過(guò)XMLHttpRequest__技術(shù)從服務(wù)器載入XML到HTML文檔時(shí)，節(jié)點(diǎn)名稱將會(huì)保留。

對(duì)于元素來(lái)說(shuō)nodeName和__tagName__是相同的。
但非元素節(jié)點(diǎn)也存在著nodeName屬性，在這些節(jié)點(diǎn)中它有特殊的值：

alert(document.nodeName) // #document
大多數(shù)節(jié)點(diǎn)類型都沒有tagName屬性，并且在IE中注釋節(jié)點(diǎn)的tagName為!。
因此，通常來(lái)講nodeName 跟 tagName 比起來(lái)更有意義一些。但tagName像是簡(jiǎn)化版本，因此，當(dāng)你只處理元素節(jié)點(diǎn)時(shí)，你可以使用它。

innerHTML

innerHTML是HTML5標(biāo)準(zhǔn)的一部分，詳細(xì)請(qǐng)看鏈接
它允許以文本的方式訪問(wèn)節(jié)點(diǎn)內(nèi)容。下例將會(huì)輸出document.body的所有的內(nèi)容并且用新的內(nèi)容進(jìn)行替換。

復(fù)制代碼 代碼如下:

<body>
  <p>The paragraph</p>
  <div>And a div</div>
  <script>
    alert( document.body.innerHTML ) // read current contents
    document.body.innerHTML = 'Yaaahooo!' // replace contents
  </script>
</body>

innerHTML會(huì)包含一個(gè)有效地HTML。但瀏覽器也可以解析畸形的HTML。
innerHTML可以在任意一個(gè)元素節(jié)點(diǎn)中進(jìn)行使用。它非常非常有用。

innerHTML pitFalls

innerHTML不像看起來(lái)那么簡(jiǎn)單。它有一些陷阱在正等待著菜鳥們，甚至有些時(shí)候經(jīng)驗(yàn)豐富的程序員也無(wú)法避免。

IE中__table__節(jié)點(diǎn)的innerHTML為只讀的
IE中COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR等元素里innerHTML為只讀的。
IE中的table標(biāo)簽中除了TD其余的標(biāo)簽innerHTML都是只讀的。

innerHTML不能追加
從語(yǔ)句的構(gòu)成上來(lái)看innerHTML可以進(jìn)行追加操作，比如:

chatDiv.innerHTML += "<div>Hi <img src='smile.gif'/> !</div>"
chatDiv.innerHTML += "How you doing?"
但是實(shí)際上都做了些什么:

1. 舊的內(nèi)容被清空

2. 新的內(nèi)容被解析，并插入了進(jìn)去。內(nèi)容沒有被追加，它重新生成了。

    因此，所有的圖片和其他的資源當(dāng)進(jìn)行+=操作后會(huì)重新載入，包括smile.gif。

    幸運(yùn)的是，有其他的方式來(lái)更新內(nèi)容，這種方式不使用innerHTML，因此沒有上面提到的問(wèn)題。

nodeValue

innerHTML只對(duì)元素節(jié)點(diǎn)有效。
對(duì)于其他類型的節(jié)點(diǎn)來(lái)說(shuō)，他們使用nodeValue屬性來(lái)獲取內(nèi)容。下例將說(shuō)明它是如何在文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)工作的。

復(fù)制代碼 代碼如下:

<body>
The text
<!-- A comment -->
<script>
 for(var i=0; i<document.body.childNodes.length; i++) {
   alert(document.body.childNodes[i].nodeValue)
 }
</script>
</body>

上面的例子中，有些警告為空的，那是因?yàn)榭瞻坠?jié)點(diǎn)的緣故。注意到對(duì)于SCRIPT節(jié)點(diǎn)中nodeValue === null。那是因?yàn)镾CRIPT為元素節(jié)點(diǎn)。元素節(jié)點(diǎn)，要使用innerHTML。

總結(jié)

nodeType
  節(jié)點(diǎn)類型。最重要的是元素節(jié)點(diǎn)為1，文本節(jié)點(diǎn)為3，只讀。
nodeName/tagName
  大寫的標(biāo)簽名。非元素節(jié)點(diǎn)來(lái)說(shuō)nodeName還會(huì)有特殊的值，只讀。
innerHTML
  元素節(jié)點(diǎn)的內(nèi)容，可寫。
nodeValue
  文本節(jié)點(diǎn)的內(nèi)容，可寫。
DOM節(jié)點(diǎn)根據(jù)類型，還有其他的一些屬性。例如，INPUT標(biāo)簽有value和__checked__屬性。A屬性有href等等。

以上就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

相關(guān)文章

最新評(píng)論