Published on

踏入自媒體的 30 天 - Day 19

Authors
  • avatar
    Name
    Jyhwoei Yang (Tom)
    Twitter
    @tomz12321
  • Sr. Front End Developer at Pimwa Corp. (Australia) / Deliostech (USA)

Day #19

前言

30 days 的開始 踏入自媒體的 30 天 ❗️- 我有個朋友在做自媒體

Image

Here we go :

image

正文開始

重新拾起網頁三劍客 《Javascript》

經典名言：
《Java》 不是《Javascript》

說也奇怪，我的第一次 javascipt 自我學習，居然是從 react 那邊的資源連結過來的。 那時候原本只是看著對岸的大神 阮一峰。然後連結點一點就連過來了。

反正當時人在墨爾本做學生，唸完書之餘，閒著沒事，就開著來準備畢業以後的找工作技能樹。

首先 要了解 Javascipt 引用進來 html 文件之前。要先了解基本概念：

基本概念

  • DOM
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。

节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

节点的类型有七种。

- Document：整个文档树的顶层节点
- DocumentType：doctype 标签（比如 <!DOCTYPE html> ）
- Element：网页的各种 HTML 标签（比如 <body>、<a> 等）
- Attribute：网页元素的属性（比如 class="right"）
- Text：标签之间或标签包含的文本
- Comment：注释
- DocumentFragment：文档的片段
- 浏览器提供一个原生的节点对象 Node ，上面这七种节点都继承了 Node ，因此具有一些共同的属性和方法。

延伸閱讀

推薦教程：

英文标题：JavaScript Standards Reference Guide
作者：阮一峰

Github 傳送門