[Day 11 - JS] 互动吧网页 — Javascipt的DOM 操作 / 事件

在前一篇，我们介绍完 Javascript 的语法和基本功能，包括宣告变数、条件陈述式、函式、物件阵列 ... 等等，接下来就来了解如何透过 Javascipt 操作，让网页互动起来。

什麽是DOM？

DOM（文件物件模型，Document Object Model），提供了一套让 HTML、XML 文件结构化的表示法，而每个档案最後都会形成一种DOM树状结构，比如一个 HTML 文件就会形成类似下图的样子：

DOM API

DOM 定义了一些属性方法，让程序可以存取并改变文件架构和内容，再结合 Javascript 的使用，就能从 HTML 文件的入口 Document 往下取得指定的 DOM 节点，来修改该元素的结构、内容、样式。

取得网页元素

首先要根据HTML标签 tag、id、class 的名称，取得对应的元素进行操作：

// 找到所有 <p> 元素。
document.getElementsByTagName("p");

// 找到 id 为 'id_name' 的元素。
document.getElementById('id_name');

// 找到所有 class 名称为 'class_name' 的元素。
document.getElementsByClassName('class_name');

修改 HTML 内容

取得节点之後，就可以针对各种属性去修改 HTML 的内容，比如 innerHTML、classList、setAttribute ... 等等。

• element.innerHTML：取得或设定元素内HTML的内容

let myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "<p>Hello</p>";

// html会变成
//<div id="myDiv"><p>Hello</p></div>

• element.classList：读取该元素的 Class 属性，另外可以透过定义的一些方法修改该属性，比如 add()、remove()、toggle()。

//取得元素 <div id="myDiv" class="default-class">
let myDiv = document.getElementById("myDiv");

//新增class
myDiv.classList.add("class1");       //class="default-class class1"

//移除class
myDiv.classList.remove("class1");    //class="default-class"

//如果指定的class不存在则添加、存在则移除
myDiv.classList.toggle("class1");    //class="default-class class1"
myDiv.classList.toggle("class1");    //class="default-class"

• element.setAttribute()：设定元素的属性值。如果属性已经存在则更新；不存在则添加。另外还可以透过 element.getAttribute() 取得当前的属性值。

//取得元素 <a id="myLink" class="default-class">
let myLink = document.getElementById("myLink");

//设定该 Element 的 href 属性
myLink.setAttribute("href","https://ithelp.ithome.com.tw/2021ironman/event");
//<a href="https://ithelp.ithome.com.tw/2021ironman/event" ...>

//设定该 Element 的 class 属性
myLink.setAttribute("class","red");
//<a class="red" ...>

修改 Style 样式

除了可以针对网页结构、内容去做调整，还可以利用 element.style.cssproperty 为对应的元素新增指定的样式：

//修改 #p1 元素的字体颜色
document.getElementById("p1").style.color = "blue";

//修改 #p2 元素的背景颜色
document.getElementById("p2").style.backgroundColor = "blue";

//修改 #p2 元素的字体大小
document.getElementById("p3").style.fontSize = "24px";

事件处理

当使用者对网页进行操作，比如点击按钮、输入文字...等等，网页要根据这些事件（Event）去产生对应的更新。DOM 就定义了各种事件型态，让我们可以透过 Javascript 进行事件的处理。

事件监听器（EventListener）

负责事件处理的程序要如何连结到对应的元素上？通常会使用 addEventListener() 将事件监听器（EventListener）注册到指定的元素上，当监听到指定的事件发生时，就执行对应的任务函式。

let button = document.getElementById("btn");

button.addEventListener('click', function (event) {
  //按下 button 执行
  alert('Click');
});

常用的事件

小结

Javascript 的介绍到这边就告一个段落罗，当然不只有这些功能，还有很多东西值得探讨并研究，并且它也在持续更新中。除了可以看文件、书籍、技术文章进行深入学习之外，要熟练 Javascript 很好的方式就是直接实作各种想要的功能，在过程中查找资料、解决错误来累积知识。 在下一篇文章我们会提到如何使用 Bootstrap 快速地建立响应式网站，那就下章再见罗！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• MDN - Document
• w3schools - Javascript
• MDN - Element
• MDN - Event