[ Day 14 ] - 存取网页元素之变更指定内容

上一篇提到可以取得指定的 DOM 节点

今日来介绍可如何透过节点存取及变更文件节点

textContent

• 可以取得或更新指定元素内的文字

范例中， h1 的文字内容是 『大大大优惠』

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

使用 textContent 将文字内容更新为『阿哈！』

const el = document.querySelector('.header');
el.textContent = '啊哈！';

执行结果如下

innerHTML

在指定的元素中，重新赋予指定的 HTML 内容，原本的资料不会被保留，只会放新的资料进去

范例是一个 div 区块， class 名称为 container

<div class="container"></div>

先选取到 .container 的节点，在增加 HTML 的内容
并且以样版字面值（Template literals）的写法处理

const main = document.querySelector('.container');
main.innerHTML = `<h1 class="header" > 招财猫之日，喵～</h1>`;

结果如下

参考资料与学习资源

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

本日小节

呼～今天练习存取节点资料及变更文字内容，今天的学习部份就到这边了～
９２９也是日本的招财猫日，出门上班就有遇到在巷子跑来跑去的猫咪，可惜戳不到
有任何问题欢迎传讯息给我，我们下次见！