#函式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
※表單元素取值
0 意見:
張貼留言