JavaScript – DOM 節點屬性

使用 DOM 節點物件的屬性。

Node.nodeName

取得節點名稱。

<div id="user">
    <span id="user1">user123</span>
</div>

<script>
    let user = document.getElementById('user');
    console.log(user.nodeName);   // DIV
</script>

Node.nodeValue

用來取得 text, comment 和 CDATA 節點的內容。

<div id="user">
    <span id="user1">user123</span>
</div>

<script>
    let user1 = document.getElementById('user1');
    console.log(user1.firstChild.nodeValue);   // user123
</script>

Element.innerHTML

修改/取得 一個元素節點中的 HTML 內容。

<div id="user">
    <span id="user1">user123</span>
</div>

<script>
    let user = document.getElementById('user');
    console.log(user.innerHTML);   // <span id="user1">user123</span>

    let user1 = document.getElementById('user1');
    console.log(user1.innerHTML);   // user123
</script>

<div id="user">
    <span id="user1">user123</span>
</div>

<script>
    let user = document.getElementById('user');
    user.innerHTML = `<span id="user2">user456</span>`;
    console.log(user.innerHTML);   // <span id="user2">user456</span>
</script>

Node.textContent

和 innerHTML 用法類似，修改/取得 一個元素節點中的 HTML 內容。
不過 textContent 會將 HTML 標籤去除，將 HTML 特殊符號自動轉成字元實體。

<div id="user">
    <span id="user1">user123</span>
</div>

<script>
    let user = document.getElementById('user');
    console.log(user.textContent);   // user123

    let user1 = document.getElementById('user1');
    console.log(user1.textContent);   // user123
</script>

Element.outerHTML

修改/取得 一個元素節點中的 HTML 內容，會返回包括節點本身的 HTML 內容。

<div id="user">
    <span id="user1">user123</span>
</div>

<script>
    let user = document.getElementById('user');

    console.log(user.outerHTML);   
    // <div id="user"><span id="user1">user123</span></div>
</script>

<div id="user">
    <span id="user1">user123</span>
</div>

<script>
    let user = document.getElementById('user');
    let user1 = document.getElementById('user1');

    user1.outerHTML = `<span id="user2">user456</span>`;

    console.log(user.outerHTML);   // <div id="user"><span id="user2">user456</span></div>
</script>