documnet Elemnet : <a></a> Attribute : "href" Text : <a>mylink</a> (mylink)2.網頁解析由上而下
<script>javascript 語法</script> JS建議放於網頁下面等DOM解析完成使用才不會有問題3.querySelector(選取第一個符合元素)(沒符合null)
<h1 class="header">1234</h1>
<script>
const el = document.querySelector('.header');
console.log(el);//<h1 class="header">1234</h1>
</script>
<div class="targetBElementP">
<p>請選取我</p>
</div>
<script>
//取得child
const targetBElementP = document.querySelector(".targetBElementP > p");
</script>
//以下較舊可不使用
getElementsByClassName('.class');
getElementsByTagName('tag');
getElementById('#id');
4.元素加入HTML或文字(innerHTML刪除內容後再加入)
<main>123</main>
<script>
const main = document.querySelector('main');
main.innerHTML =`<h1>546</h1>`;//加入html標籤
const h1 = document.querySelector('h1');
console.log(h1);//<h1>456</h1>
</script>
5.元素插入html或文字(prepend、append、appendChild)
<ul>
<li>hihi</li>
</ul>
<script>
const ul = document.querySelector('ul');
const liappendChild = document.createElement('li');
liappendChild.textContent = "我是appendChild加入的我會新增在後面";
ul.appendChild(liappendChild);
const liprepend = document.createElement('li');
liprepend.textContent = "我是prepend加入的我會新增在最前面";
ul.prepend(liprepend);
const liappend = document.createElement('li');
liappend.textContent = "我是aappend加入的我會新增在後面";
ul.append(liappend);
</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.querySelectorAll，回傳NodeList陣列(沒符合null)
<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>
8.setAttribute加入屬性，getAttribute取得屬性
<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");
myLink.setAttribute("id", "x123");
//取出設定Attribute
console.log(myLink.getAttribute("href"));//https://www.google.com
console.log(myLink.getAttribute("target"));//_blank
//刪除Attribute
myLink.removeAttribute("id");
</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.classList+style應用
<style>
main {
width: 300px;
height: 300px;
background-color: lightblue;
}
.box1 {
width: 100px;
height: 100px;
background-color: blue;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
}
.active {
width: 250px;
height: 250px;
}
</style>
<main>
<div id="div1">JS加入Class</div>
</main>
<script>
const main = document.querySelector('main');
const div1 = document.querySelector('#div1');
//add加入
div1.classList.add('box1');
//remove移除
//div1.classList.remove("box1");
//replace替換
div1.classList.replace("box1", "box2");
//toggle切換
div1.classList.toggle('active');
//div1.classList.toggle('active');
//有多少個 class
console.log(div1.classList.length);
//contains包含
if (div1.classList.contains("box2")) {
console.log("有box2");
} else {
console.log("沒有box2");
}
//直接修改 style
div1.style.backgroundColor = 'green';
div1.style.color = 'white';
div1.style.fontWeight = 'bold';
div1.style.fontSize = '64px';
</script>
11.data attribute (setAttributeget、getAttribute也可做到)
<main>
<div id="div1" data-username="John"> JS加入 data attribute 建議小寫</div>
</main>
<script>
const main = document.querySelector('main');
const div1 = document.querySelector('#div1');
//取得 data attribute
//div1.setAttribute('data-username', 'Tom');// set tom
console.log(div1.dataset.username);//john
//修改 data attribute
div1.dataset.username = 'Mary';
//console.log(div1.getAttribute('data-username'));//Mary
console.log(div1.dataset.username);//Mary
//設定 data attribute (特殊字元時為小駝峰)
div1.dataset.userId = 123; //dataset.userId => data-user-id
console.log(div1.dataset.userId); //123
//刪除 data attribute，可用delete or removeAttribute
//delete div1.dataset.userId;//dataset.userId => data-user-id
div1.removeAttribute('data-user-id');
console.log(div1.dataset.userId); //undefined
</script>
12.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>
13.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>
參考資料六角學院直播課
你需要注意的 console.log 問題
