[Day 15] JavaScript 与浏览器的沟通

前言

我们透过前一天所学习的，与DOM的操作方式，开始要使用JS来改变html呈现的样子。
可以与画面做的沟通，比现在学的还要丰富，如制作弹跳视窗、几秒後要呈现什麽图片、如何在点击图片後，改变文字的样式，...等都是透过使用JS来制作的。

这两天的文章，学习如何抓取ID、class都有了基本认识，也知道在要做改变时，该下什麽语法，当时就觉得好喔！我应该可以找个实作来练习，结果发现，哇真是没有想像中的容易啊。

先来学学如何针对内容进行修改吧！

认识DOM methods

  1. Top 10 Essential JavaScript DOM methods List： 这篇文章介绍了10个常用的方法，满简洁的什麽时候应用方法、以及介绍怎麽使用。
  2. w3schools - HTML DOM Methods： w3schools 也是满常用来查找的网站，而且在不熟悉语法如何使用时，也可以点击 Try it Yourself 按钮，来看看该如何应用。

下面就介绍几个常使用的方法～

改变元素的 CSS

  1. 增加样式
  • 使用querySelector抓到 ID=myyo
    • 使用.style加入样式，使背景色彩添加红色
 <div id="myyo">
    yo!
    <a href="#">hello</a>
  </div>
  <script>

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

  1. 新增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并且背景色彩变为红色
  1. 移除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>

改变内容节点内容

  1. .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的差别

  1. .innerHTML: 把标签中的东西全部取出
  • 抓取#myyo中的内容，不包含#myyo这个div的标签
  <div id="myyo">
    yo!
    <a>hello</a>
  </div>
  <script>

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

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

  1. .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

  1. 删除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>

  1. 新增元素 .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>

以上就是些基础的操作语法拉～在实际专案制作的时候，都会遇到并加以应用！

参考资料：重新认识 JavaScript: Day 13 DOM Node 的建立、删除与修改


<<:  Day 10：Python基本介绍03 | List、Tuple

>>:  Day-14 那个数字不能说、但那个画面可以再现於新电视上的任天堂64

从零开始学3D游戏设计：触发式按钮

这是 Roblox 从零开始系列，使用者介面章节的第四个单元，你将学会如何去制作当触发某些条件时才会...

如何简单快捷找到被误删的日历事件

突然发现日历事件被误删？我们曾丢失/误删过 iPhone 的行事历档案。那麽我们如何才能从 iPho...

Unity自主学习(三)：如何安装Unity(二)

我们昨天为了接下来的学习，安装了"Unity Hub"，今天就要来熟悉一下Uni...

贩子去赌场了

各位看官不好意思，贩子发现其实可以从9/15才开始发废文，原本想说从9/1开始写，但发现底子不够，很...

Day26 - 【概念篇】Keycloak使用基本概念 - 第二部分: User & Group

本系列文之後也会置於个人网站 帐号(User) 基本讯息 接着来看看与帐号有关的设定。 在之前，已...