innerHTML 括號運用

1.'+變數+'

2.原HTML標籤即可加入JS

3.innerHTML本身執行會先刪除值在執行增加

var el1= document.querySelector('.list-test');
var linkgoogle= 'http://www.google.com.tw';
var farms = 'troye';
var color= 'color:red';
el1.innerHTML='<li><a href="'+link+'" style="'+color+'">'+farms+'</a></li>'

creatElement應用

(1) createElement 建立一個節點
    var sonElement = document.createElement("a") ;

(2) textContent 把想寫入的文字放進去
    sonElement.textContent = "Hello";

(3) setAttribute 把想放入的屬性加進去
    sonElement.setAttribute("class", "title");

(4) 要把 sonElemnt 放入的節點
    var fatherElement = document.querySelector("#titleId");

(5) appendChild 放入
    fatherElement.appendChild(sonElement);

可以使用 cloneNode 來複製節點讓他每次都產生新的

stradd.textContent='出來吧柯P';
stradd.setAttribute=('class','blue');
document.querySelector('.title').appendChild(stradd.cloneNode(true));
document.querySelector('.title ul').appendChild(stradd.cloneNode(true));

getByElementID (ID屬性分辨DOM，只能一個)

var el document.getElementById('first');

querySelector(CLASS對應很多個DOM),會從上找到下，找出class為'className'的第一個DOM

var el document.querySelector('.second'); //(id ｕ要 ＃abc/ class 要點 .abc 　　標籤　不用加　ｐ　)

querySelectorAll,會從上找到下，找出class為'className'的全部DOM

elementArray[0].textContent = "我是第一個class為className的DOM";
elementArray[1].textContent = "我是第二個class為className的DOM";

setAttribute利用 JS 動態變更或新增 Html 的屬性

(1) var element = document.querySelector('#titleId');
(2) element.setAttribute('href', 'www.yahoo.com.tw');
(3) var url = element.getAttribute('href');

EventTarget.addEventListener

能將指定的事件(Document 中的 Element 物件、Document 物件本身、Window 物件，或是其它支援事件的物)監聽器註冊到 EventTarget 實作物件上