2025年10月8日 星期三

筆記 JavaScript 工程師養成直播班 第五堂

1.認識DOM(Documnet Object Model)標籤
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 問題