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

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

Node.nodeType

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

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

常數名稱說明
Node.ELEMENT_NODE1表示 HTML 元素 (Element) 節點,像是 <p><div>
Node.TEXT_NODE3表示文字 (Text) 或屬性 (Attr) 節點
Node.COMMENT_NODE8表示註解節點 (Comment)
Node.DOCUMENT_NODE9表示根節點 (Document)
Node.DOCUMENT_TYPE_NODE10表示 DocumentType 節點,像是 <!DOCTYPE html>
Node.DOCUMENT_FRAGMENT_NODE11表示 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>