js筆記---DOM

1.JS插件放body結尾(因為從前面開始讀取，依序往下)
2.querySelector->選取網頁上的元素
3.textContent->修改文字內容

const el = document.querySelector('h1'); //選取網頁上的元素
el.textContent = "Hello,world!";

4.innerHtml->插入html標籤

const main = document.querySelector(".main");
main.innerHTML = '<h1>add</h1>';
const list = document.querySelector('.list');
let myLink = 'www.google.com';
let myName = 'Tenny';
list.innerHTML = `<li><a href="${myLink}">${myName}</a></li>`;

5.innerHTML和textContent的差異
->innerHTML針對結構調整
->textContent針對文字調整
6.setAttribute->設定元素上某個屬性的值

const mylink = document.querySelector('a');
mylink.setAttribute('href', 'http://www.yahoo.com.tw');

7.querySelectorAll->重複選取多個元素

const myLinks = document.querySelectorAll('a');
myLinks[0].setAttribute('href', 'http://www.google.com');
myLinks[1].setAttribute('href','https://www.yahoo.com.tw');

8.取值方法:
->.innerHTML 取出標籤
->.textContent 取出文字
->getAttribute 取出屬性

const el = document.querySelector('a');
console.log(el.getAttribute("href"));
console.log(el.textContent);
console.log(el.innerHTML);

9.nodeName->找到DOM的位置

const btn = document.querySelector(".btn");
console.log(btn.nodeName);