[Day 14] 进入JavaScript，认识浏览器中的JS
前言
前面几天说了很多CSS\SCSS的介绍和学习方式，终於要踏入JS啦，边学习的过程也可以发现他要学习的有基础语法、观念有很多，时常学了新的，忘了旧的，刚好趁着铁人赛能够再整理下笔记，藉此复习一下。
接下来的文章，多是以JS为主，主要涵盖基础观念、实作练习，文章内也还是会放一些自己的学习心得、方式。
如何开始认识 JavaScript
如同前面几天文章介绍，会到 MDN 来查阅相关名词。在 MDN - JavaScript 是什麽? 介绍了JS 可以做什麽事、它的编译方式、如何载入等等。
另外，搭配今天的文章主题，也可以观看彭彭老师的网页前端工程入门：HTML DOM
来谈谈DOM
- 因为 DOM 是 JS 处理网页的关键，所以把它放在最前面来认识。
- DOM 全名为 Document Object Model 中文翻译为 文件物件模型
KURO 老师:
DOM 是一个将 HTML 文件以树状的结构来表示的模型，而组合起来的树状图，我们称之为「DOM Tree」。
Huli:浏览器提供该桥梁，让我们用JS去改面画面的东西
抓取 HTML 文件
DOM API : DOM 提供描述 HTML 或 XML 文件的逻辑架构与提供应用程序的撰写介面，可以利用此 API 可以建立文件内容、查看文件结构、以及添加、修改、和删除文件的元件与内容
那JS要如何去抓取到文件中某标签呢？ 以下我们将分别介绍5种方法，来取得相应的资料。
1. getElementsByTagName : 抓取 HTML 中某标签的元素
<body>
<div>
hello~
</div>
<div>
yo!
</div>
<script>
const elements = document.getElementsByTagName('div');
console.log(elements);
</script>
</body>
- 抓到 2 个
div
2. getElementsByClassName: 抓取 html 中某 class 元素
- 有好几个相同名称的class，会一并抓取
<body>
<h1>DOM
</h1>
<div class="block1">
hello~
</div>
<div>
yo!
</div>
<script>
const elements = document.getElementsByClassName('block1');
console.log(elements);
</script>
</body>
- 抓到 class 为 block1 的
div
3. getElementById : 这是用来抓取指定 ID
* 注意：getElement 没有加s！ 可以记得ID只有一个，所以 getElement 没有加 s。
<body>
<h1>DOM
</h1>
<div class="block1">
hello~
</div>
<div id="myyo">
yo!
</div>
<script>
const elements = document.getElementById('myyo');
console.log(elements);
</script>
</body>
4. querySelector: 後面接的是css选择器
- 只会针对元素的第一笔资料，其他并不会被选入这时候可以使用
- 选择tag标签：(
div)：注意：使用此方式当html有多个div，他只会选择到第一个符合的 - 选择cass : (
.calssName) - 选择id : (
#idName)
5. querySelectorAll : 可以选取多个元素
<body>
<h1>DOM
</h1>
<div class="block1">
hello~
</div>
<div id="myyo">
yo!
<a href="#">hello</a>
</div>
<script>
const elements = document.querySelectorAll('div');
console.log(elements);
</script>
Day03-深入理解网页架构：DOM
JS 笔记 - 认识 DOM 文件物件模型
<<: Flutter体验 Day 6-Widget State
【day13】连续上班日做便当2
今天的便当是无淀粉系列 主菜是鲜甜的肉束尾 其实我本人很害怕猪肉的腥味 但男友妈妈准备的食材都很好 ...
Day 08：深仍可测的元件样式－Deep Selectors
成功渲染出 BootstrapVue Navbar 元件之後，接着来将预设样式改成自己喜欢的专案色调...
day7 我不要了，这不是肯德基 cancel
Cancellation is important for avoiding doing more ...
【把玩Azure DevOps】Day24 设定Build Pipeline与Release Pipeline的执行权限
先前我们建立Build pipeline和Release pipeline的时候使用的都是管理者的帐...
关於商业视角的时间故事
今天谈一个在商业视角的时间故事。 我的公司盛行加班(勿战)，因此有些主管为了体恤加班的同仁，也方便把...