HTML in Javascript

HTML in Javascript

• Document
• Searching For Element

document.GetelementById("title") // id가 title인걸 가져옴

console.log(title.id);
console.log(title.className);

title.innerText= "Hi"; // 해당 id 내용 추가

document.GetelementClassName("something"); class가 something인걸 가져옴

document.querySelection(".hello h1"); 
// css방식으로 검색 class가 hello 안에 h1 찾기 (첫 번째로 해당 되는 것만 가져옴)

document.querySelection("#hello from"); // id인 hello 그 밑의 from id 가져옴

document.querySelectionAll(".hello h1"); 
// css방식으로 검색 hello 클래스 안에 h1 찾기 (해당 되는 전부 가져옴 Array)

const title = document.querySelection(".div.hello:first-child h1"); 
//클래스 hello를 가진 div 내부의 firstchild 인 h1 가져오기

title.style.color = "blue"; // 글씨색

• Event

기본 document Element

https://developer.mozilla.org/ko/docs/Web/API/element

Element - Web API | MDN

console.dir("title") // console에서 title 이벤트 찾아내기

const title = document.querySelection(".div.hello:first-child h1"); 
//클래스 hello를 가진 div 내부의 firstchild 인 h1 가져오기

function handleTitleClick() {
	console.log("clicked!");
}

title.addEventListener("click", handleTitleClick); 
// 클릭시 handleTitleClick function 실행

function handleMouseEnter()
{
	console.log("here!!");
}

title.addEventListener("mouseenter", handleMouseEnter); 
// 해당 칸에 마우스 갖다두면 function 실행

function handleMouseLeave()
{
	console.log("Leave");
}
title.addEventListener("mouseleave", handleMouseLeave); 
// 해당 칸에 마우스 갖다두면 function 실행

title.onclick = handleTitleClick;
title.onmuseenter = handleMouseEnter;
// 이런 방법으로도 이벤트를 호출 할수 있다

Event 조건

const h1 = document.querySelection("div.hello:first-child h1"); 
//클래스 hello를 가진 div 내부의 firstchild 인 h1 가져오기

function handleTitleClick() {
	
    const currentColor = h1.style.color;
    let newColor;
    
    if(currentColor === "blue")
    {
    	newColor = "tomato"
    }
    else
    {
    	newColor = blue
    }
	h1.style.color = newColor
}

h1.addEventListener("click", handleTitleClick)