前面幾天說了很多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 文件物件模型