# js dom&class&clock ## dom * document.getElementById()從id找元素 * innerText更改文字 ```script let Myh1 = document.getElementById("myh1"); myh1.innerText="123"; console.log(myh1); ``` * document.getElementsByClassName()從class找元素是陣列 * innerHTML元素內HTML的文字 ```script let myli = doument.getElementByClassName("myli") for(let i=0;i<=myli.length;i++){ myli[i].innerHTML=`<h1>${myli[i].innerText}<h1>` } console.log(myli) ``` * querySelectorAll()從選擇器抓元素,是陣列 * getAttribute 抓標籤屬性 * setAttribute 改標籤屬性 ```script let mylink=document.querySelectorAll("#fb.link"); console.log(mylink); mylink[0].setAttribute("href","https//google.com"); mylink[0].innerText="Google"; console.log(mylink[0].getAttrbute("href")) ``` .style.css名稱=值 css名稱要改成駝峰式命名 ```script mylink[0].style.color="white"; console.log(mylink[0].style.color); mylink[0].style.backgroundColor="blue"; console.log(mylink[0].style.color); ``` * document.getElementsByTagName從標籤裡面找東西,結果是陣列 * remove()刪除 ```script let divh1=document.getElementById("mydiv").getElementsByTagName("h1"); divh1[0].remove(); ``` insertAdjacentHTML在元素指定的地方加入HTML beforeend、beforebegin、afterbegin、afterend ```script let mydiv2=document.getElementById("mydiv2"); mydiv2.insertAdjacentHTML("beforebegin","<h1>在開始前<h1>"); mydiv2.insertAdjacentHTML("beforeend","<h1>在結尾<h1>") ``` ## class * remove刪除 * add新增 * replace取代 * classList class陣列 ```script let myh1=document.getElementById("myh1"); myh1.classList.remove.("text-center"); myh1.classList.add.("text-right"); myh1.classList.replace.("red","blue");("原","取代"); 增加標籤屬性 let myh2=document.getElementById("myh2"); let cal=["text-center","red"]; myh2.classList.add(...cal); ``` ## clock