javascript- dom介紹
- 什麼是DOM?
DOM 全名為 Document Object Model 中文翻譯為 文件物件模型，看起來很抽象但其實就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構。我們可以透過Javascript來改變、存取物件上架構。
- 為何需要DOM呢?
網頁是由瀏覽器負責運行，因此可以知道瀏覽器其實就是一種編譯器負責去編譯我們寫的網頁程式。今天有非常多間公司都在設計瀏覽器，假如沒有先定好一個規則讓各個瀏覽器都必須要按照這個規則去編譯我們的網頁程式的話，工程師就頭痛了，處理一個IE已經夠煩了還要去針對各個瀏覽器去寫出他們的規則，也因此 W3C 出現了， W3C 定義了非常多的網頁規則好讓各大瀏覽器可以按照這些規則去設計瀏覽器，其中 DOM 就是其中的一個定義。
- DOM解析
上面有提到DOM是一個樹狀結構，而樹狀結構最重要的就是各個節點(node)。
節點通常可以分成下面四種
1.Document --指的就是這份文件，HTML開端
2.Element --指的就是標籤 EX：<div>、<p>等各種HTML Tag
3.text --指的就是文字
4.Attribute --指的就是屬性 EX：class、href
- DOM階層關係圖
1.父子關係(Parent and Child)
上下層節點，上層為 Parent Node ，下層為 Child Node 。
2.兄弟關係
同一層節點，彼此間只有 Previous 以及 Next 兩種
備註：上述內容引用自IT邦幫忙Day03-深入理解網頁架構：DOM
實務上應用中，DOM樹主要有兩項功能
1.存取元件
EX：getElementById( )、querySelector( )、
queryselectorAll( )、parentNode等
2.操作元件(變更元件)
EX：innerHTML( )、setAttribute( )、getAttribute( )、createElement( )等
接著，我們來介紹queryselector用法 範例
queryselector
簡述：可以用css寫法來讀取document文件上的node(節點)。
而當我們要讀取多個相同css時，則要使用querySelectorAll語法。
Tips：你可以透過console.log發現querySelectorAll讀取時，會轉換成陣列，藉此我們可以使用for迴圈來幫助我們讀取資料 如下
// HTML結構
<div class="wrap">
<div class="wrap-inner">
<h1 class="title" id="titleId"><em></em></h1>
<h1 class="title" id="titleId"><em></em></h1>
</div>
</div>
// js部分
var el = document.querySelectorAll(".title em");
console.log(el); //NodeList(2) [em, em]
el[0].textContent = 34;
el[1].textContent = 78567;
var el=document.querySelectorAll(".title em");
console.log(el);
var elLength=el.length;
for(var i=0; i<elLength;i++){
el[i].textContent=i+"1234"
}
- setAttribute介紹 練習
語法：element.setAttribute(attributename,attributevalue)
目的：動態新增HTML屬性 寫法如下
var el = document.querySelector(".title a");
說明：
el.setAttribute("href", "http://www.google.com");
1.第一個寫屬性/第二個輸入要傳入的值
2.提醒(錯誤寫法)：stradd.setAttribute=('class','blue'); 中間沒有=
補充：
2.Console API介紹 連結
3.改變屬性作法整理(下面整理表格) 連結
- innerHTML 介紹 範例
目的：動態載入html節點 EX:h1、p、li
特色：效能快、安全性差，組完字串後，傳進語法進行渲染 會將原本內容清空，再重新組字串
var el = document.querySelector(".title");
var link='https://www.google.com.tw';
var name='卡斯柏';
// el.setAttribute('class','color');
el.innerHTML='<a target="_blank" class="link" href="'+link+'">'+name+'</a>';
說明：
1.變數左右會加上'++'
2.使用innerHTML會將原本內容取代 a標籤文字會變成卡斯柏
<h1 class="title" id="titleId">
<a href="#">標題</a>
</h1>
var el = document.querySelector(".title");
var name='卡斯柏';
el.innerHTML='<a>'+name+'</a>'
延伸閱讀：
1.新增多個attribute屬性
>>目前好像都是拆開寫 如下
input.setAttribute(type, text);
input.setAttribute(name, q);
input.setAttribute(class,bordercss);
2.js中setAttribute 的兼容性問題 連結
- innerHTML與for運用 連結
var farms = [
{
farmer: '卡斯伯',
dogs: ['張姆士', '龐的'],
},
{
farmer: '查理',
dogs: ['皮皮'],
}
];
var el=document.querySelector('.list');
var farmLen=farms.length;
var str="";
for(var i=0;i<farmLen;i++){
var content='<li>'+farms[i].farmer+'</li>';
str+=content;
console.log(str);
}
el.innerHTML =str;
說明：
var str="";//空值
str += content;
str = str + content;//空值+content
- createElement寫法 連結
特色：安全性高、效能差，以DOM節點來處理
// 先create一個節點出來
var str =document.createElement('p');
// 看是否需要加入文字
str.textContent="4567";
// 增加屬性
str.setAttribute('class','color');
// str.style.color="purple";
// 將結點增加到h1下面
document.querySelector('.title').appendChild(str);
Tips：
appendChild不能與textContent一起使用喔，因為appendChild 主要只能用在「插入 HTML 元件」。
- createElement搭配for寫法 連結
farms = [
{
farmer: "卡斯柏",
fruit: ["香蕉", "蘋果", "蓮霧"]
},
{
farmer: "校長",
fruit: ["芭樂", "蘋果", "蓮霧"]
}
];
var farmsLen = farms.length;
for (var i = 0; i < farmsLen; i++) {
// 建立節點
var str = document.createElement("li");
// 加入文字
str.textContent = farms[i].farmer;
// 取出節點位置
var el = document.querySelector(".list");
el.appendChild(str);
}
延伸閱讀：
1. insertBefore( )用法 連結
參考資料：
留言
張貼留言