[Java Script] JS HTML DOM

8727 단어 JavaScriptDOMhtmlDOM

HTML DOM

웹페이지가 로드될 때, 브라우저는 Document Object Model를 생성한다.

웹페이지 자체를 DOM 함수 및 개체로 다룰 수 있음.

property

document.getElementById("demo").innerHTML = ~~;

Id가 demo인 tag를 찾아서 innerHTML속성을 초기화시킨다.

단순히 문자열뿐만 아니라 html tag를 입력할 수 있다.

Finding HTML Elements

document.getElementById(id)

Id를 기준으로 찾기

document.getElementsByTagName(name)

테그 name 인 모든 요소 찾기

document.getElementsByClassName(name)

class가 name인 모든 요소 찾기

Changing HTML Elements

innerHTML

attribute

style.property

Adding and Deleting Elements

document.createElement(element)

document.removeChild(element)

document.appendChild(element)

document.replaceChild(new, old)

document.write(text)

JS로 event 추가하기

property 로 추가

<!DOCTYPE html>
<html>
<body>
	<button onclick = "addfunc()"> add function </button>
	<button id="demo"> hi </button>
	<script>
		function addfunc(){
    		document.getElementById("demo").onclick = function(){window.alert(1)};
    	}
	</script>

</body>
</html>

addEventListner() method

<!DOCTYPE html>
<html>
<body>
<button onclick="addfunc()">add Function</button>
<button id="demo">hi</button>
<script>
function addfunc(){
	document.getElementById("demo").addEventListener("click", function(){newFunc("seokwon")});
}
function newFunc(name){
	document.write(document.body.innerHTML + "<br>My name is " + name);
}
</script>

</body>
</html>

js에서 onclick 속성을 변경할 때는 함수를 실행시키는 것X, 함수 원본을 넣어야함

원본을 넣지 않으면 함수가 바로 실행

원본을 넣을 수 없을 경우

function(){ ~~ } // ~~에 실행시키고자 하는 코드 작성

과 같은 형식으로 작성한다.

다양한 event 속성

onmouseover

마우스를 위로 가져가 놓았을 때

onmouseout

마우스를 위에서 치웠을 때

onmousedown

마우스를 누른 상태

onmouseup

마우스를 뗀 상테

onclick

클릭했을 때

문과생 데이터사이언티스트되기 7!
DataStucture_1_11_괄호의 값(2504)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage