능글맞은 구렁이

JavaScript-DOM 본문

JS/JavaScript

JavaScript-DOM

보라색츄르 2021. 6. 10. 14:41

DOM:Document Object Model

문서 객체 모델이란 브라우저가 HTML문서에 접근할 수 있도록 정의해 놓은 표준 모델이다.

즉, HTML 문서의 태그를 자바스크립트에서 사용할 수 있도록 객체로 만든 것을 문서 객체라고 하며

HTML 문서를 분석하고 표시하는 방식을 문서 객체 모델이라고 한다. 

 

 

DOM 요소의 접근 방법

 

1. id를 이용한 방법 : getElementById("아이디명")

See the Pen js-dom(id) by jangbora (@jangboraa) on CodePen.

 

 

 

 

 

 

 

 

2. 태그명을 이용한 방법 : getElementsByTagName("태그명")

See the Pen js-dom(Tag) by jangbora (@jangboraa) on CodePen.

 

 

 

 

 

 

 

 

3. 클래스명을 이용한 방법 : getElementsByClassName("클래스명")

See the Pen js-dom(class) by jangbora (@jangboraa) on CodePen.

 

 

 

 

 

 

 

 

 

DOM 요소의 수정

 

1. 요소의 내용 수정

  1) innerHTML속성 사용 (가장간단) :

  • HTML 요소 내용을 가져올 수 있다. 
  • innerHTML 속성에 값을 대입함으로써 요소의 내용을 수정할 수 있다.

  2) textContent 속성 사용

  • 선택한 노드와 모든 자손 노드의 텍스트 콘텐츠, 즉 HTML태그와 속성을 제외하고 내용만을 가져올 때 사용
  • 태그를 포함한 텍스트로 요소의 내용을 성정하는 경우에는 태그도 일반 텍스트로 취급된다.

 

See the Pen js-DOM요소수정 by jangbora (@jangboraa) on CodePen.

 

 

 

 

 

 

 

 

2. 요소의 속성 수정

HTML 요소가 사용하는 속성도 수정이 가능하다 

예)<img> 태그의 src속성을 변경하려면 document.getElementById("image").src="sun.png";

<body>
	<p>이미지 위로 마우스를 옮겨 보세요!</p>
	<img id="image" src="flower.jpg" heigth="100" onMouseover="changeSize(300)" onMouseout="changeSize(100)">

	<script>
		function changeSize(imgHeight){
    		document.getElementById("image").height=imgHeight;
    	}
	</script>
</body>

 

3. 요소의 스타일 수정

CSS스타일도 동적으로 수정할 수 있다. 

예)document.getElementById("아이디명").style.CSS속성명="속성값";

 

See the Pen js-요소의 스타일수정 by jangbora (@jangboraa) on CodePen.

 

 

 

 

 

 

 

 

 

 

DOM 노드 삽입과 삭제

1. 새로운 요소의 삽입

    1) createElement() 메서드를 이용해서 추가하려는 새로운 요소를 생성한다.

  var 새요소변수=document.createElement("요소명");

 

    2) 텍스트 노드 또는 속성 노드 생성하기

       2-1) 텍스트 내용이 있는 요소의 경우에는 createTextNode() 메서드를 이용해서 텍스트 노드를 생성한다.

  var 텍스트노드변수=document.createTextNode("텍스트내용");

       2-2) 속성을 지정하는 경우에는 createAttribute()메서드는 이용해서 새로운 속성을 생성한 후,

              value 속성을 이용해서 속성값을 지정한다.

  var 속성노드변수=document.createAttribute("속성명");

 

   3) 생성된 노드를 새 요소에 추가하기

       3-1) 텍스트 노드 생성의 경우

  새요소변수.appendChild(텍스트노드변수);

       3-2) 속성 노드 생성의 경우

  새요소변수.setAtrributeNode(속성노드변수);

 

   4) 새로운 요소 '새요소변수'가 추가될 부모 요소를 찾아 자식 요소로 연결시킨다.

  var 부모요소=document.getElementById("부모요소_아이디명");

  부모요소.appentChild(새요소변수);

 

See the Pen js-DOM 노드 삽입 by jangbora (@jangboraa) on CodePen.

 

 

2. 기존 HTML 요소의 삭제

   removeChild()메서드 적용!

 

See the Pen js-DOM 노드 삭제 by jangbora (@jangboraa) on CodePen.

 

 

 

 

 

 

'JS > JavaScript' 카테고리의 다른 글

javaScript_div안에 div추가  (0) 2021.07.20
javaScript-BOM  (0) 2021.06.11
JavaScript-Math  (0) 2021.06.10
javaScript-Date  (0) 2021.06.09
JavaScript-이벤트  (0) 2021.06.08
'JS/JavaScript' Related Articles more
Comments