節點的屬性

在前面曾介紹過 DOM 的觀念、DOM 的選取方式，若是不清楚的! 請至前面兩篇文章複習一下。現在，Away 要帶各位來看看如何操作 DOM 去更改網頁的內容。

寫入文字

HTML

<div class="box" id="Box">
  <h1 class="box-title">title</h1>
  <a class="box-link" href="javascript:;"></a>
</div>

JavaScript

const elemBox = document.querySelector("#Box");
const elemTitle = elemBox.querySelector(".box-title");
const elemLink = elemBox.querySelector(".box-link");

textContent

代表設定文字內容。

elemTitle.textContent = "我是標題";
elemLink.textContent = "前往 Yahoo!";

innerText

代表設定文字內容。

elemTitle.innerText = "我是標題";

innerHTML

代表在一個 DOM 內的全部 HTML 標籤和文字，但不包含所選取 DOM 的 HTML 標籤。

elemLink.innerHTML = "<em>Go To PCHome</em>";

outerHTML

代表在一個 DOM 內的全部 HTML 標籤和文字，包含所選取 DOM 的 HTML 標籤。

elemLink.outerHTML = "<em>Go To PCHome</em>";

讀取文字

HTML

<div class="box" id="Box">
  <h1 class="box-title">
    Javascript 課程 <small style="display: none;">JS</small>
  </h1>
  <a class="box-link" href="http://tw.yahoo.com">前往 Yahoo!</a>
</div>

JavaScript

const elemBox = document.querySelector("#Box");
const elemTitle = elemBox.querySelector(".box-title");
const elemLink = elemBox.querySelector(".box-link");

textContent

代表了 DOM 或其後代的文字內容。

// Javascript 課程 JS
console.log(elemTitle.textContent);

innerText

代表 DOM 及其後代之已渲染文字內容的屬性。

// Javascript 課程
console.log(elemTitle.innerText);

innerHTML

代表在一個 DOM 內的全部 HTML 標籤和文字，但不包含所選取 DOM 的 HTML 標籤。

/*
  <h1 class="box-title">Javascript 課程 <small style="display: none;">JS</small></h1>
  <a class="box-link" href="http://tw.yahoo.com">前往 Yahoo!</a>
*/
console.log(elemBox.innerHTML);

outerHTML

代表在一個 DOM 內的全部 HTML 標籤和文字，包含所選取 DOM 的 HTML 標籤。

/*
  <div class="box" id="Box">
    <h1 class="box-title">Javascript 課程 <small style="display: none;">JS</small></h1>
    <a class="box-link" href="http://tw.yahoo.com">前往 Yahoo!</a>
  </div>
*/
console.log(elemBox.outerHTML);

屬性控制

改變屬性

setAttribute()