詳談javascript中DOM的基本屬性_javascript技巧

結構與內容屬性

nodeType

所有的節點都有類型，節點總共有以下的12種類型。

複製程式碼 程式碼如下:

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;
...
}

其中最重要的兩個節點為元素節點（1）和文字節點（3）。其餘的很少會用到。
例如，列出所有的子元素節點時，我們可以遍歷它，並使用childNodes[i].nodeType != 1來進行偵測。
下面是實作程式碼：

複製程式碼 程式碼如下:

Allowed readers:

 
• John

 
• Bob

<script>   <br />   var childNodes = document.body.childNodes<br />   for(var i=0; i<childNodes.length; i ) {<br /> if (childNodes[i].nodeType != 1) continue<br />     alert(childNodes[i])<br />   }<br /> </script>

*思考
下面這段程式碼會提示什麼內容：

複製程式碼 程式碼如下:

 
 
<script><br />    alert(document.body.lastChild.nodeType)<br /> </script>
 

nodeName, tagName

nodeName 和 tagName 都包含節點的名稱。
對於document.body來說

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

當nodeName沒有大寫時
這種情況比較稀有，你如果好奇的話可以閱讀以下。
你很可能已經知道，瀏覽器有兩種方式可以解析:HTML模式和__XML模式。通常使用的是HTML模式，但當使用XMLHttpRequest__技術取得XML文件時，會使用XML模式。
在火狐瀏覽器中當XHTML文件的Content-Type設定為xmlish時也會使用XML模式。
在__XML模式中節點名稱將會保留，所以有可能出現body或bOdY。
因此，如果透過XMLHttpRequest__技術從伺服器載入XML到HTML文件時，節點名稱將會保留。

對於元素來說nodeName和__tagName__是相同的。
但非元素節點也存在nodeName屬性，在這些節點中它有特殊的值：

alert(document.nodeName) // #document
大多數節點類型都沒有tagName屬性，並且在IE中註解節點的tagName為!。
因此，通常來講nodeName 跟 tagName 比起來更有意義一些。但tagName像是簡化版本，因此，當你只處理元素節點時，你可以使用它。

innerHTML

innerHTML是HTML5標準的一部分，詳細請看連結
它允許以文字的方式存取節點內容。下例將會輸出document.body的所有的內容並且用新的內容進行替換。

複製程式碼 程式碼如下:

 

The paragraph

 

And a div

  <script><br />     alert( document.body.innerHTML ) // read current contents<br />     document.body.innerHTML = 'Yaaahooo!' // replace contents<br />   </script>

innerHTML會包含一個有效地HTML。但瀏覽器也可以解析畸形的HTML。
innerHTML可以在任一個元素節點中進行使用。它非常非常有用。

innerHTML pitFalls

innerHTML不像看起來那麼簡單。它有一些陷阱在等待菜鳥們，甚至有些時候經驗豐富的程式設計師也無法避免。

IE中__table__節點的innerHTML為唯讀的
IE中COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR等元素裡innerHTML為唯讀的。
IE中的table標籤中除了TD其餘的標籤innerHTML都是唯讀的。

innerHTML不能追加
從語句的構成上來看innerHTML可以進行追加操作，例如:

chatDiv.innerHTML = "

Hi !

"
chatDiv.innerHTML = "How you doing?"
但其實都做了些什麼:

1. 舊的內容被清空

2. 新的內容被解析​​，並插入了進去。內容沒有被追加，它重新生成了。

    因此，所有的圖片和其他的資源當進行 =操作後會重新載入，包括smile.gif。

    幸運的是，有其他的方式來更新內容，這種方式不使用innerHTML，因此沒有上面提到的問題。

nodeValue

innerHTML只對元素節點有效。
對於其他類型的節點來說，他們使用nodeValue屬性來取得內容。下例將說明它是如何在文字節點和註解節點工作的。

複製程式碼 程式碼如下:

The text

<script><br />  for(var i=0; i<document.body.childNodes.length; i ) {<br />    alert(document.body.childNodes[i].nodeValue)<br />  }<br /> </script>

上記の例では、ノードが空であるため、一部の警告が空になっています。 SCRIPT ノードの場合、nodeValue === null であることに注意してください。これは、SCRIPT が要素ノードであるためです。要素ノードには innerHTML を使用します。

概要

ノードタイプ
ノードタイプ。最も重要なことは、要素ノードが 1、テキスト ノードが 3、読み取り専用であることです。
ノード名/タグ名
ラベル名は大文字で表記されます。非要素ノードの場合、nodeName には読み取り専用の特別な値も含まれます。
innerHTML
要素ノードの内容、書き込み可能。
ノード値
テキストノードの内容、書き込み可能。
DOM ノードには、そのタイプに応じて他の属性があります。たとえば、INPUT タグには value 属性と __checked__ 属性があります。属性には href などが含まれます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。