[Day 15] JavaScript 與瀏覽器的溝通

2021 iThome 鐵人賽

DAY 15

自我挑戰組

邊工作邊進行前端學習之旅系列第 15 篇

13th鐵人賽

Eva

2021-09-15 09:20:49

668 瀏覽

分享至

前言

我們透過前一天所學習的，與DOM的操作方式，開始要使用JS來改變html呈現的樣子。
可以與畫面做的溝通，比現在學的還要豐富，如製作彈跳視窗、幾秒後要呈現什麼圖片、如何在點擊圖片後，改變文字的樣式，...等都是透過使用JS來製作的。

這兩天的文章，學習如何抓取ID、class都有了基本認識，也知道在要做改變時，該下什麼語法，當時就覺得好喔！我應該可以找個實作來練習，結果發現，哇真是沒有想像中的容易啊。

先來學學如何針對內容進行修改吧！

認識DOM methods

Top 10 Essential JavaScript DOM methods List：這篇文章介紹了10個常用的方法，滿簡潔的什麼時候應用方法、以及介紹怎麼使用。
w3schools - HTML DOM Methods： w3schools 也是滿常用來查找的網站，而且在不熟悉語法如何使用時，也可以點擊 Try it Yourself 按鈕，來看看該如何應用。

下面就介紹幾個常使用的方法～

改變元素的 CSS

增加樣式

使用querySelector抓到 ID=myyo
- 使用.style加入樣式，使背景色彩添加紅色

 <div id="myyo">
    yo!
    <a href="#">hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo');
    element.style.background = 'red';

新增class

運用.classList: 可以用來新增、刪除、修改節點上的CSS
querySelector('#myyo')，選擇myyo的ID元素，並給予名為active的class
- 在active先製作背景樣式

<style>
    .active {
      background: red;
    }
  </style>


</head>

<body>
  <h1>DOM
  </h1>
  <div>
    hello~

  </div>
  <div id="myyo">
    yo!
    <a href="#">hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo');
    element.classList.add('active');
  </script>
</body>

可以發現，該div新增.active並且背景色彩變為紅色

移除class

<body>
  <h1>DOM
  </h1>
  <div>
    hello~

  </div>
  <div id="myyo" class="main">
    yo!
    <a href="#">hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo');
    element.classList.add('active');
    element.classList.remove('main');
  </script>
</body>

改變內容節點內容

.innerText: 主要是針對文字內容修改

myyo底下的<a>標籤

<div id="myyo">
    yo!
    <a>hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo > a');
    console.log(element.innerText)
    //印出標籤內的文字
  </script>

.innerText修改<a>標籤裡面的文字
- element.innerText = 'I am a link'

  <div id="myyo">
    yo!
    <a>hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo > a');
    element.innerText = 'I am a link';
    console.log(element.innerText)
    //印出標籤內的文字
  </script>

補充：

textContent 與 innerText 很類似，都是用來「取得元素內的文字」。
差別：innerText 取得的是被 CSS 調整過樣式後渲染的文字；textContent 則是實際取得節點中的文字內容。

注意`innerHTML`與 `outerHTML`的差別

.innerHTML: 把標籤中的東西全部取出

抓取#myyo中的內容，不包含#myyo這個div的標籤

  <div id="myyo">
    yo!
    <a>hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo ');

    console.log(element.innerHTML)
     </script>

.outerHTML: 把該標籤中的東西全部取出

 <div id="myyo">
    yo!
    <a>hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo ');

    console.log(element.outerHTML)

  </script>

使用.outerHTML修改

<div id="myyo">
    yo!
    <a>hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo');
    element.outerHTML = '<h1> the change </h1>'
    console.log(element.outerHTML)

  </script>

插入與刪除元素：`appendChild` 與 `removeChild`

刪除removeChild
- 先找到該子元素的的父層，選取到父層再removeChild，選擇到要刪除的子元素。

<div id="myyo">
    yo!
    <a>hello~</a>
  </div>
  <script>
    //把a標籤刪去，要先知道他的parent是誰(上一層是div id=myyo)
    const element = document.querySelector('#myyo');
    element.removeChild(document.querySelector('a'));
  </script>

新增元素 .appendChild

 <div id="myyo">
    yo!
    <a>hello~</a>
  </div>
  <script>
    //把a標籤刪去，要先知道他的parent是誰(上一層是div id=myyo)
    const element = document.querySelector('#myyo');
    const item = document.createElement('div'); //建立標籤元素
    item.innerText = '123' //增加文字在div中
    element.appendChild(item);

  </script>