節點的屬性

在前面曾介紹過 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()