---
# System prepended metadata

title: js dom&class&clock

---

# 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