JavaScript 與瀏覽器的溝通

tags: js querySelector callback classList

改變元素的 CSS

  • 抓到html的myyo
    • 使用.style加入樣式
 <div id="myyo">
    yo!
    <a href="#">hello</a>
  </div>
  <script>

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

  • 增加padding:

    • 運用駝峰式的撰寫方式，.paddingTop = '20px' ; 或是，element.style['padding-top'] = '20px';
<div id="myyo">
    yo!
    <a href="#">hello</a>
  </div>
  <script>

    const element = document.querySelector('#myyo');
    element.style.paddingTop = '20px';

  • 改變元素的class

    • .classList: 可以使用裡面的方法新增、刪除、修改節點上的CSS類
  • 選擇myyo的id元素，並給予active的class
<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>

  • 移除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>

  • toggle : 開關

HTML DOM classList Property
JS基礎篇–HTML DOM classList 屬性

改變內容：inner、outer 的 HTML 與 text

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

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

  • 抓取#myyo中的內容，不包含其標籤

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

參考資料：重新認識 JavaScript: Day 13 DOM Node 的建立、刪除與修改

Select a repo