JavaScript DOM Node Properties (DOM 節點物件的屬性)

接下來我們介紹 DOM 節點物件有哪一些屬性 (properties) 可以使用。

Node.nodeType

nodeType 屬性可以取得該節點的類型，像是 elements (元素節點), text (文字節點) 或 comments (註解節點)。

另位 DOM 還有這些常數 (Node type constants)，幫助你來判斷節點類型：

常數名稱	值	說明
Node.ELEMENT_NODE	1	表示 HTML 元素 (Element) 節點，像是 `<p>` 或 `<div>`
Node.TEXT_NODE	3	表示文字 (Text) 或屬性 (Attr) 節點
Node.COMMENT_NODE	8	表示註解節點 (Comment)
Node.DOCUMENT_NODE	9	表示根節點 (Document)
Node.DOCUMENT_TYPE_NODE	10	表示 DocumentType 節點，像是 `<!DOCTYPE html>`
Node.DOCUMENT_FRAGMENT_NODE	11	表示 DocumentFragment 節點

使用範例：

// true
document.nodeType === Node.DOCUMENT_NODE;

// true
document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE;

var p = document.createElement('p');
p.textContent = 'Once upon a time...';

// true
p.nodeType === Node.ELEMENT_NODE;
// true
p.firstChild.nodeType === Node.TEXT_NODE;

Node.nodeName

nodeName 屬性會返回節點的名稱。

節點類型	nodeName 的值
Attr	值同 Attr.name
Comment	"#comment"
Document	"#document"
DocumentFragment	"#document-fragment"
DocumentType	值同 DocumentType.name，例如 "html"
Element	值同 Element.tagName
Text	"#text"

例子：

<div id="d1">hello world</div>
<input id="t" type="text">

<script>
    var div = document.getElementById('d1');
    var text = document.getElementById('t');
    
    // 顯示 "DIV"
    alert(div.nodeName);
    
    // 顯示 "INPUT"
    alert(text.nodeName);
</script>

nodeName 返回的 HTML 元素節點名稱都是大寫的英文字 (upper case)；但如果你的頁面模式是 XML-mode 則會返回原本標籤的大小寫不變。

Element.tagName

tagName 和 nodeName 基本上是一樣了，除了 tagName 屬性只有 HTML 元素節點才有，在其他類型的節點 (例如 text nodes) 值則會是 undefined。

Node.nodeValue

nodeValue 屬性用來取得 text, comment 和 CDATA 節點的內容，如果是 attribute 節點則會返回屬性內容。

例如：

<div id="foo">hello world</div>

<script>
    var div = document.getElementById('foo');
    
    // 顯示 hello world
    alert(div.firstChild.nodeValue);
    
    // 顯示 foo
    alert(div.attributes.id.nodeValue);
</script>

Element.innerHTML

innerHTML 屬性可以用來取得一個 DOM 元素節點中的 HTML 內容。

用法：

<div id="foo"><span>hello world</span> 101</div>

<script>
    var div = document.getElementById('foo');
    
    // 顯示 <span>hello world</span> 101
    alert(div.innerHTML);
</script>

innerHTML 屬性是可寫的，可以用來改變某元素下的 HTML 內容：

<div id="foo"><span>hello world</span> 101</div>

<script>
    var div = document.getElementById('foo');
    
    // 將 div 的內容改成 123
    div.innerHTML = '123';
    
    // 顯示 123
    alert(div.innerHTML);
</script>

Element.innerText

innerText 屬性和 innerHTML 用法類似，只是 innerText 會將 HTML 標籤去除。

例如：

<div id="foo"><span>hello world</span> 101</div>

<script>
    var div = document.getElementById('foo');

    // 顯示 hello world 101
    alert(div.innerText);
</script>

innerText 也可以用來寫入內容，但它會將 HTML 特殊符號自動轉成 HTML Entity：

<div id="foo"><span>hello world</span> 101</div>

<script>
    var div = document.getElementById('foo');

    // 將 div 的內容改成 123
    div.innerText = '<span>one</span><span>two</span>';

    // 顯示 &lt;span&gt;one&lt;/span&gt;&lt;span&gt;two&lt;/span&gt;
    alert(div.innerHTML);
</script>

Node.textContent

textContent 屬性和 innerText 用法類似，但有下面這些差異：

textContent 會返回包含 <script> 和 <style> 的所有內容，但 innerText 不會。
innerText 不會返回畫面中看不見的元素 (例如樣式是 visibility: hidden; 或 display: none;)，但 textContent 會返回。

另外由於 textContent 或 innerText 都會將 HTML 特殊符號自動轉成 HTML Entity 的特性，很適合用來防止 XSS 安全漏洞攻擊。

IE 在 IE9 開始才有支援 textContent。

Element.outerHTML

outerHTML 屬性可以用來取得一個 DOM 元素節點的 HTML 內容，跟 innerHTML 的差別在於 outerHTML 還會返回節點本身的 HTML 內容。

<div id="foo"><span>hello world</span> 101</div>

<script>
    var div = document.getElementById('foo');

    // 顯示 <div id="foo"><span>hello world</span> 101</div>
    alert(div.outerHTML);
</script>

outerHTML 屬性還可以用來改變某元素的 HTML 內容，有點像取代掉原節點的意思：

<div id="container"><div id="foo">foo</div></div>

<script>
    var div = document.getElementById('foo');

    // 將原節點用新的 HTML 取代
    div.outerHTML = '<div id="bar">bar</div>';

    // 顯示 <div id="container"><div id="bar">bar</div></div>
    alert(document.getElementById('container').outerHTML);
</script>