[ Day 15 ] - 取得节点内资料的方法

前面已经学习如何更改指定节点的内容
今天来介绍如何取出指定节点的资料值

innerHTML

使用 innerHTML 取出指定节点内的 HTML 结构

HTML

<ul class="list">
    <li>1</li>
    <li>2</li>
  </ul>

JS

const list = document.querySelector('.list');
console.log(list.innerHTML);
// 结果显示为 
// <li>1</li>
// <li>2</li>

textContent

取得指定节点的文字资料值

<h1 class="header">大大大优惠</h1>

const header = document.querySelector('.header');
console.log(header.textContent);  // 结果为大大大优惠

getAttritube

可以取得指定元素内的属性值

HTML

<a href="https://www.google.com.tw" class ="link">google</a>

JS

const el = document.querySelector('.link');
console.log(el.getAttribute('href'));  // 代表会取得 href 的属性资料，结果会显示 https://www.google.com.tw
console.log(el.getAttribute('class'));  // 代表会取得 class 的属性资料，结果会显示 link

参考资料与学习资源

• 0 陷阱！0 误解！8 天重新认识 JavaScript！
• JavaScript 指南
• 六角学院 - JavaScript 必修篇 - 前端修练全攻略

本日小节

今天练习取得节点资料内的属性、HTML 结构以及文字资料，今天的学习部份就到这边了～
有任何问题欢迎传讯息给我，我们下次见！