iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0
Modern Web

用30天了解javascript系列 第 22

[用30天了解javascript]Day22.DOM

DOM (Document Object Model,文件物件模型)

一個以樹狀結構來表示 HTML 文件,HTML 裡面的每個物件、屬性、內容等都代表著其中一個節點,透過javascript與 HTML 文件進行互動。
https://ithelp.ithome.com.tw/upload/images/20200922/20112053yErIybZJdb.png
圖片來源:https://www.runoob.com/js/js-htmldom.html

節點間位置的相互關係

在創建DOM時,html中的每個物件都視為一個節點。每個節點位置是由父節點與子節點決定。就像目錄一樣,目錄下會有根目錄,根目錄下會有子目錄,彼此成為上下層關係。
https://ithelp.ithome.com.tw/upload/images/20200922/20112053PQN86SmFoD.png
父子關係(parent & childs):上下層節點
兄弟關係(siblings):同一層節點

DOM元素

document.getElementById(idName)

取得物件ID

document.getElementById('box');

getElementsByClassName(className)

取得物件class名稱

document.getElementById('box');

getElementsByTagName(tagName)

取得物件標籤的集合

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

//計算li有幾個
let liLength = document.getElementsByTagName('li');
console.log(liLength.length); // 6

querySelector() - 選擇單一元素

選取器的方式要像 css 的方式一樣,只針對第一筆資料,找不到返回null

<h1 class="title">title</h1>

var el = document.querySelector('.title');
el.textContent = "edit title";

querySelectorAll() - 可重複選取多個元素

撈多筆資料可使用querySelectorAll,將同樣的元素選起,並以陣列的方式被傳回,找不到返回NodeList(節點陣列)

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
//把.list li選起來,存放在一個陣列,可用讀取陣列的方式去修改內容
var el = document.querySelectorAll('.list li');
el[0].textContent = "11";
el[1].textContent = "22";

//使用for迴圈一次更改裡面內容
for(let i=0; i<el.length; i++){
	el[i].textContent = '修改內容';
}

*querySelector、querySelectorAll可使用id(#),class(.),標籤

innerHTML - 改變html

//會覆蓋原本的內容
<div id="hi">Hello!</div>

document.getElementById("hi").innerHTML = "Hello World!";

createElement - 創建html

//在後面接續新增的內容
<div id="hi">Hello!</div>

var str = document.createElement('span');
str.textContent = 'John~';
document.querySelector('#hi').appendChild(str);

innerHTML vs createElement

  • innerHTML

  • 方法:組完字串後,傳進語法進行渲染

  • 優點:效能快

  • 缺點:資安風險,要確保來源沒問題

  • createElement

  • 方法:以DOM節點來處理

  • 優點:安全性高

  • 缺點:效能差

setAttribute(屬性, 值)

設定屬性

<a href="#" class="link">title</a>

var el = document.querySelector('.link');
el.setAttribute('href','https://www.google.com.tw/');

getAttribute(屬性)

取得的屬性

<a href="#" class="link">title</a>

var el = document.querySelector('.link');
var get = el.getAttribute('href');
console.log(get);

上一篇
[用30天了解javascript]Day21.原型與繼承
下一篇
[用30天了解javascript]Day23.事件
系列文
用30天了解javascript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言