JS part4_function_DOM

#函式function

※函式宣告

function sayHello(){ //函式宣告
 console.log("Hello");
 Shakehand();//函式中執行函式
}
function Shakehand(){ //函式宣告
console.log("Shake hand");
}

sayHello();//執行

※函式參數、回傳return

function calculate(num1,num2){ //函式宣告
 return num1+num2;
}
 let total =calculate(1,2);//total為3

※return可以中斷函式的執行

#DOM(Document Object Model)

※<script>的英方在<html>之後，這樣才讀取的到解析完的document

※抓取document網頁元素

querySelector選擇器:只會抓第一個

 const el=document.querySelector('h1');//選取h1
 const el2=document.querySelector('.header');//css選擇器 選取header class

querySelectorAll選擇器:可抓多個

 const el=document.querySelectorAll('h1');//el會以陣列回傳el[0].el[1]..選取

textContent文字寫入

el.textContent="new word"//複寫h1文字

innerHTML插入標籤:會清空內部所有物件再插入(put?)

innerHTML可以變數加入(字串改成變數或字串穿插變數)

el2.innerHTML =ˋ<h1 class="header2">h1標題</h1>ˋ//可以單引號雙引號包覆;插入class為header2的h1段落
el2.innerHTML =ˋ<h1 class="header2">${name}</h1>ˋ

setAttribute新增標籤屬性

const link=document.querySelector('a');
link.setAttribute("href","https:...");//更換連結屬性的連結網址("屬性","加入參數")

.innerHTML(取出標籤內容)、.textContent(取出文字)、.getAttribute(取出屬性)取值

console.log(link.getAttribute("href"));//網址
console.log(link.innerHTML);//link<a>內標籤//輸出<span>123</span>//原html<a href=..><span>123</span>></a>
console.log(link.textContent);//123