documnet Elemnet : <a></a> Attribute : "href" Text : <a>mylink</a> (mylink)2.網頁解析由上而下
<script></script> JS建議放於網頁下面等DOM解析完成使用才不會有問題3.querySelector(選取第一個符合元素)
<h1 class="header">1234</h1> <script> const el = document.querySelector('.header'); console.log(el);//<h1 class="header">1234</h1> </script>4.元素修改或插入文字
<h1 class="header">1234</h1> <script> const el = document.querySelector('.header'); el.textContent = "5678"; console.log(el); //簡短寫法 document.querySelector('.header').textContent ="01010"; console.log(el); //<h1 class="header">01010</h1> </script>5.元素加入HTML標籤(innerHTML刪除內容後再加入)
<main></main> <script> const main = document.querySelector('main'); main.innerHTML =`<h1>1234</h1>`;//加入html標籤 const h1 = document.querySelector('h1'); console.log(h1);//<h1>1234</h1> </script>6.innerHTML、textContent差異
<main></main> <script> const main = document.querySelector('main'); main.innerHTML =`<h1>123</h1>`;//html標籤 main.textContent=`<h1>123</h1>`;//會是文字 </script>7.setAttribute加入屬性,getAttribute取得屬性,innerHTML取得html,textContent取得文字
<a></a> <script> const myLink = document.querySelector('a'); myLink.innerHTML = "<span>Google</sapn>"; //設定Attribute myLink.setAttribute("href", "https://www.google.com"); myLink.setAttribute("target", "_blank"); //取出設定Attribute console.log(myLink.getAttribute("href"));//https://www.google.com console.log(myLink.getAttribute("target"));//_blank console.log(myLink.innerHTML);//<span>Google</span> console.log(myLink.textContent);//google </script>8.querySelectorAll,回傳NodeList陣列
<a>Google</a> <a>Yahoo</a> <script> const myLinks = document.querySelectorAll('a');//會回傳NodeList陣列 console.log(myLinks); myLinks[0].setAttribute("href", "https://www.google.com"); myLinks[1].setAttribute("href", "https://tw.yahoo.com"); </script>9.表單元素取值、賦值
<input type="text" class="txt" value="早安" /> <select class="list"> <option value="1">1</option> <option value="2">2</option> </select> <script> const txt = document.querySelector('.txt'); console.log(txt.value);//早安 txt.value = "晚安"; //賦值 console.log(txt.value);//晚安 const list = document.querySelector('.list'); console.log(list);//<select class="list"><option value="1">1</option><option value="2">2</option></select> console.log(list.value);//1 list.value = 2; //賦值 console.log(list.value);//2 </script>10.addEventListener註冊監聽事件
是否有註冊監聽,chrome > F12 > 元素上檢查 > Even Listeners
<ul class="list"> <li><span>hihi</span></li> <li>hihi <input type="button" value="按鈕" class="btn"></li> </ul> <h1></h1> <script> const btn = document.querySelector('.list'); //const btn = document.querySelector('.btn'); const h1 = document.querySelector('h1'); let count = 0; btn.addEventListener('click', function (e) { if (e.target.nodeName == "INPUT") { //btn.addEventListener('click', function (e) { count++; h1.textContent = `手速測試,您點擊了${count}次`; } else { console.log(e);//捕捉當下元素資訊 console.log(e.clientX); console.log(btn.nodeName);//INPUT 目前的元素tag console.log(e.target);//偵測到目前點擊是哪個元素 console.log(e.target.nodeName);//INPUT console.log(e.target.innerHTML); console.log(e.target.textContent); h1.textContent = `點到${e.target.nodeName}`; } }); </script>11.preventDefault取消預設觸發行為
<a href="http://tw.yahoo.com">yahoo</a> <script> const myLink = document.querySelector('a'); myLink.addEventListener('click', function (e) { e.preventDefault(); console.log('有點點到,但不會轉址'); }); </script>參考資料
JS直播班 - 上課白板