📚 DOM === HTML: ```html= <!--all.js寫在body之前的好處是，前面的節點皆已抓到，js就可以直接執行--> <body> <h1 class="class" id="id">hello</h1> <script src="all.js"></script> </body> ``` JS: ```javascript= //選取網路元素的方式: const el = document.querySelector("h1"); const el = document.querySelector(".class"); const el = document.querySelector("#id"); //只會找取網頁第一個符合條件的元素，無法多項選擇 //純修改文字 el.textContent = "333"; //也可以寫成 const document.querySelector("h1").textContent = "333"; //覆蓋新增結構 el.innerHTML = `<h1 class="header">標題</h1>` //另一種方便修改內容的方式 let myH1 = "標題" el.innerHTML = `<h1 class="header">${myH1}</h1>` ``` HTML: ```html= <body> <a href="#"></a> <script src="all.js"></script> </body> ``` JS: ```javascript= //修改屬性(單數) const mylink = document.querySelector("a"); mylink.setAttribute("herf","https:#"); mylink.setAttribute("class","red"); //另一種寫法 mylink.href = "https:#"; mylink.className = "red"; console.log(mylink.getAttribute("herf")); //https:# console.log(mylink.getAttribute("class")); //red //修改屬性(複數) const mylinks = document.querySelectorAll("a"); mylinks[0].setAttribute("class","red"); mylinks[1].setAttribute("class","black"); ``` HTML: ```html= <!--data- 屬性--> <!--data-"自定名稱"="值"--> <body> <h1 class="title" data-name="標題">標題</h1> <script src="all.js"></script> </body> ``` JS: ```javascript= const title = document.querySelector(".title"); console.log(title.getAttribute("data-name")); //標題 ``` HTML: ```html= <body> <select name="" id="" class="list"> <option value="高雄市">高雄市</option> <option value="台北市">台北市</option> </select> <script src="all.js"></script> </body> ``` JS: ```javascript= //取值 const list = document.querySelector(".list"); console.log(list.value); //高雄市 list.value = "台北市"; //對select而言不是賦予值，而是預設成為"台北市" ```