前面几天说了很多CSS\SCSS的介绍和学习方式,终於要踏入JS啦,边学习的过程也可以发现他要学习的有基础语法、观念有很多,时常学了新的,忘了旧的,刚好趁着铁人赛能够再整理下笔记,藉此复习一下。
接下来的文章,多是以JS为主,主要涵盖基础观念、实作练习,文章内也还是会放一些自己的学习心得、方式。
如同前面几天文章介绍,会到 MDN 来查阅相关名词。在 MDN - JavaScript 是什麽? 介绍了JS 可以做什麽事、它的编译方式、如何载入等等。
另外,搭配今天的文章主题,也可以观看彭彭老师的网页前端工程入门:HTML DOM
KURO 老师:
DOM 是一个将 HTML 文件以树状的结构来表示的模型,而组合起来的树状图,我们称之为「DOM Tree」。
Huli:浏览器提供该桥梁,让我们用JS去改面画面的东西
那JS要如何去抓取到文件中某标签呢? 以下我们将分别介绍5种方法,来取得相应的资料。
getElementsByTagName
: 抓取 HTML 中某标签的元素
<body>
<div>
hello~
</div>
<div>
yo!
</div>
<script>
const elements = document.getElementsByTagName('div');
console.log(elements);
</script>
</body>
div
getElementsByClassName
: 抓取 html 中某 class 元素
<body>
<h1>DOM
</h1>
<div class="block1">
hello~
</div>
<div>
yo!
</div>
<script>
const elements = document.getElementsByClassName('block1');
console.log(elements);
</script>
</body>
div
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>
div
):注意:使用此方式当html有多个div,他只会选择到第一个符合的.calssName
)#idName
)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
今天就来看一下人脸辨识 + 物件追踪可以迸出什麽样的火花吧! 本文开始 在applications目...
某些Kernel里面会提供每个任务一个事件指示器(event regiser),就是在任务之内指定需...
2021/10/5是我在铁人赛发文到达200篇的日子,这四年多来,不知不觉的就这样累积了200篇的文...
来部落格看图文并茂文章 补觉鸣诗 时间回到我入行第二年 这时才算是正式的系统工程师并开机接触机房 最...
Boxenn 的 error handling Boxenn 的实作可以在这边复习。 Use Cas...