ID 寫法、textcontent

🎃 id 不只可以用在 css，在 JS 也有很強大的功能

例如：

網頁的錨點定位功能

一個網頁上，一個 id 只能被使用一次

🍋 點擊右側選單，就會滑動到指定區塊，網址就會帶上「該區塊的 id」如下圖

用開發者工具可以看到:

🍋 在「Audience」這個h2上，有加上了id="Audience"

🍋 在右側的選單，a連結也加上了對應的href="#Audience"

自己練習寫一次：錨點定位（用 id 指定到特定區塊）

html:

<!-- 選單 -->
<ul>
    <li><a href="#title1">標題1</a></li>
    <li><a href="#title2">標題2</a></li>
    <li><a href="#title3">標題3</a></li>
</ul>

<!-- 內容 -->
<h1 id="title1">標題1</h1>
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas obcaecati nulla beatae debitis alias pariatur nemo dolores est id? Vel aliquid est totam animi dolores vero, repudiandae qui? Explicabo, iste ex. Omnis et nam corrupti perspiciatis enim suscipit quod nisi nostrum esse atque, iusto natus, repellendus quam delectus eum minima accusantium voluptatibus ratione eveniet inventore eos? Deserunt cum, vero eius qui, voluptas debitis iste nam quaerat minima officiis neque nesciunt, sapiente quis atque exercitationem temporibus nobis reprehenderit? Asperiores minima autem corrupti. Unde quod vel exercitationem recusandae, in asperiores! Id quae vel saepe ipsam explicabo esse, tempore nemo suscipit repellat dolorum distinctio accusamus consequatur repudiandae? At culpa officiis debitis magni harum dignissimos porro consequatur, atque quibusdam expedita voluptas voluptatem aut molestias ex ut autem. Obcaecati incidunt sunt aspernatur vitae a expedita non. Soluta sint porro maiores, quos suscipit rem nisi officia officiis amet voluptate consectetur velit accusamus delectus quidem incidunt exercitationem fugiat odio magnam dolorem magni natus consequatur temporibus! Dicta officiis quia cum, necessitatibus doloribus dolorum explicabo illum corrupti sequi laborum magnam doloremque earum, debitis saepe. Fugit sunt sint sit reprehenderit odio! Non cupiditate porro enim odit. Quas eligendi laboriosam tempore eius autem nulla omnis ducimus quod illum, unde qui eum suscipit ab reprehenderit expedita accusamus, voluptatibus, iure quisquam asperiores architecto nisi. Eius error facere quibusdam temporibus nihil nostrum? Modi animi quae hic tempore ipsa vero amet molestiae et, maiores nesciunt fugiat alias vel nemo quos soluta quam sit provident dignissimos consequatur, fugit facere. Ab nihil obcaecati vel! Labore facere libero non sapiente nam. Repellendus, pariatur assumenda animi a obcaecati nobis odit, eaque voluptas recusandae fugiat harum molestias possimus dolorum. Optio tempora ea libero eum vero, aspernatur ullam! Numquam officia obcaecati eum totam ipsam molestiae tempora cumque reprehenderit tenetur dicta illo eveniet, sapiente repudiandae veniam iste quae odio! Ipsum, quam quibusdam?
</p>

<h1 id="title2">標題2</h1>
<p>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi ratione sequi quod facere vitae, asperiores impedit perspiciatis temporibus, esse delectus aspernatur minima dicta dolores quisquam maiores commodi nobis nam deserunt ut harum ea in ullam officia neque! Est debitis maiores in animi incidunt quaerat illum suscipit. Consequatur repellendus dolorum repellat ipsa libero consequuntur, quod dolorem deleniti voluptas, inventore repudiandae, in at. Laborum officia suscipit autem ea nihil non illum, cumque, iste nobis animi laboriosam repellendus qui voluptatem quam nemo, est exercitationem. Et earum dolorem at sunt nisi ducimus iste eos officiis modi, aut consectetur quia quam dolores corporis vero perspiciatis. Accusamus, fugiat rem. Eum minima nostrum ullam voluptatibus velit vitae soluta totam asperiores vero laudantium praesentium, distinctio cupiditate pariatur consequatur eos eveniet facilis similique ut corporis. Non eius qui nisi voluptate tenetur sunt ad iure, quod saepe optio hic, sequi facere, aliquam veritatis quam. Quibusdam pariatur minus nobis beatae maxime et alias ad repellat, mollitia reiciendis tempora dolorem. Iste autem nobis dolorem blanditiis aspernatur aliquam natus dignissimos, magni quaerat illum provident quam odio doloremque sed tempora laborum ad ipsum sequi non fuga temporibus cupiditate eveniet quasi reiciendis. Porro, ipsum necessitatibus recusandae iure eligendi provident aperiam ratione temporibus itaque nostrum doloremque vero fuga hic nulla cumque aliquam, officia distinctio praesentium perspiciatis facilis sapiente. In hic eligendi laborum molestiae mollitia numquam debitis blanditiis, delectus eveniet nisi reiciendis, nesciunt dicta libero, minus harum cum beatae magni facere vero! Voluptatibus, et? Sapiente, maiores aperiam excepturi odit ut mollitia consequuntur placeat provident cum quo ea dolorum, optio fugit veritatis vero quod necessitatibus! Minima harum quod soluta beatae officia illo nemo autem odio quis. Quas sunt neque suscipit repudiandae itaque quasi cupiditate, nihil non ipsam earum exercitationem ratione corporis expedita voluptas aut odit. Quod, odio aliquam neque impedit ipsam illo nisi aspernatur, quae, hic iste vel?
</p>

<h1 id="title3">標題3</h1>
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis perspiciatis eveniet, culpa ullam ab nam? Eius corrupti ducimus vitae maxime esse deserunt iusto nihil quod maiores tempora voluptate veritatis obcaecati accusamus iste, sed labore ullam explicabo, molestias delectus expedita quasi perferendis? Ipsam, ipsum, recusandae aperiam facere delectus eligendi, nihil iste maxime voluptate architecto velit! Consequuntur magnam praesentium nulla accusantium ratione pariatur iure mollitia distinctio itaque molestiae animi eius temporibus error asperiores necessitatibus, exercitationem enim. Voluptates facilis suscipit tempora illum et repudiandae aut provident non accusantium minima iste iure perspiciatis magnam sapiente quam voluptas, voluptatem dolorum, odit cupiditate nesciunt vitae fuga nemo? Numquam et optio distinctio, neque aspernatur fugit! Porro eligendi officiis provident ad optio minima voluptatum praesentium reiciendis soluta ab. Iure, quis necessitatibus. Officia id vitae, distinctio, a nulla et autem laudantium voluptate doloribus sed illum nihil maxime voluptatibus iste sit aspernatur voluptatem harum in soluta tempore ex ipsam expedita necessitatibus nostrum. Alias tempora esse in, illum maiores exercitationem quam sit nam ipsa dolores distinctio excepturi? Praesentium aliquid cupiditate, eos quae mollitia laudantium nobis aspernatur voluptatem, laboriosam dolores dignissimos fugiat ad eum, labore nulla non vero quam necessitatibus error asperiores dolorem facere? Asperiores eveniet voluptates modi blanditiis deleniti temporibus mollitia exercitationem nisi cupiditate vero consequatur quod totam quisquam, quia amet voluptatem sequi, odio praesentium culpa, impedit molestiae minima! Corporis natus quidem, maxime inventore voluptate aliquid neque commodi beatae ab aliquam, voluptatum hic molestiae nihil aut laudantium asperiores consectetur minus! Autem magnam iste hic velit voluptas tempore nobis temporibus accusantium error nostrum consequatur veritatis similique perspiciatis odit, deserunt repellat quia ipsum dicta eveniet! Placeat pariatur eius cumque porro ab, magni aliquam. Quae dolores minus perspiciatis vero quisquam ut laudantium, rem rerum ullam quod, sunt porro qui a! Ex, excepturi deserunt harum qui hic consectetur recusandae animi fugit repellat possimus non dignissimos?
</p>

網頁長這樣：

🍋 當我點擊選單上的「標題2」，就會跳到「標題2 的區塊」，並且網址最後會帶上「#title2」

自己練習寫一次： 用 id 指定到「特定頁面的特定區塊」

在 index.html 新增第四個a連結，是要跳到 「about.html 的 #title3 區塊」

index.html:

<!-- 選單 -->
<ul>
    <li><a href="#title1">標題1</a></li>
    <li><a href="#title2">標題2</a></li>
    <li><a href="#title3">標題3</a></li>
    <li><a href="about.html#title3">標題4</a></li>
</ul>

點擊選單上的「標題4」，就會跳到 「about.html 的 #title3 區塊」

用 JS 修改文字內容

現在，我要做的是：修改「h1 標題1」的文字

作法如下：在 all.js 寫這段語法

document.getElementById('title1').textContent = '修改後的標題';

程式碼解說

🍋 document 代表：目前網頁上的主體

🍋 透過getElementById這個方法，來指定 id

🍋 選擇「標題1」的 id：title1

🍋 要「修改文字」，就使用「textContent」這個 JS 語法

但是，回到 index.html 會發現，「標題1」的文字並沒有被修改

使用開發者工具的 Console 來看，會發現有出現錯誤訊息：「‘textContent’ 是空值，因此找不到資料」

但是，我在 index.html 明明就有寫「<h1 id="title1">標題1</h1>」

為什麼會找不到資料呢？

原因為：

🎃 瀏覽器在渲染網頁時，會把 index.html 「從上到下」來做讀取

因此，我在前面這個地方載入 JS（下圖中紅色箭頭處），在 JS 執行的時候，根本就還沒讀取到任何的 html（因為 html 都寫在後面），當然就找不到資料了

✅ 因此，正確的做法是：等「<body></body>的內容」和「css」都跑完之後，再執行 JS

作法如下：

把 JS 載入的位置移到</body>前面，這樣就能確保「JS 可以找到 html 裡面所有的資料」

如此一來，JS 就能夠正常執行了！