글 작성자: juyoungit

javascript는 HTML DOM 이라는 개념을 통해서 html 문서 내에 존재하는 모든 tag에 접근하고 이를 변경할 수 있습니다. 따라서 이 DOM의 개념에 대해서 정확하게 이해하고 넘어가는 것은 대단히 중요 합니다.

문서객체모델(DOM - Document Object Model)

html을 위한 Standard Object Model, Programming Interface
html element에 어떻게 접근하고, 내용을 변경하고, 추가하고, 삭제하는 지에 대한 표준
html 문서의 전체적인 구조를 Object Tree의 형태로 표현한 모델

웹 페이지가 웹 브라우져를 통해서 로딩될 때, 브라우져는 해당 페이지에 대한 DOM을 생성하여 유지하게 된다.

다음과 같이 Object의 Tree 형태로 html 문서를 표현한다.

그리고 이를 javascript와의 사용을 통해서 다음과 같은 일들을 수행할 수 있다.

1. html element를 변경
2. html attribute를 변경
3. CSS Style 변경
4. 기존의 html element, attribute를 삭제
5. 새로운 html element, attribute를 추가
6. html element에서 발생하는 이벤트에 반응
7. 새로운 html event를 생성

 

HTML DOM

1. Document Object Model 의 줄임말
2. html 문서의 구조를 Object Tree로 모델링한 것이라고 보면 됨.
3. 이를 javascript를 통해서 다양한 동적인 요소를 웹 페이지에 집어넣는 것이 가능함.
4. javascript 이외에 다른 프로그래밍 언어를 통해서도 접근할 수 있음
5. DOM에서 각 html element는 Object로서 정의됨

 

HTML DOM Method

  • html dom method
html element 상에서 수행할 수 있는 동작
  • html dom properties
설정하거나 변경할 수 있는 html element가 가지는 값 (value)
<html> 
  <body>
    <p id="demo"></p> 
	  <script> 
		document.getElementById("demo").innerHTML = "Hello World!";
	  </script> 
  </body> 
</html>

다음 코드에서 getElementById(), innerHTML 을 볼 수 있음.

getElementById는 method, innerHTML은 property에 해당함.

 

getElementById() Method

1. id를 사용해 html element에 접근하는 방식 → 가장 일반적으로 많이 사용되는 방식
2. 위의 예시에서는 "demo"라는 id를 가진 html element를 찾아서 그 내용을 변경하는 모습임

 

innerHTML Property

1. html element의 내용을 가장 쉽게 얻는 방법 → innerHTML Property를 사용하는 것
2. html element의 내용을 가져오거나 변경하는 데 유용하게 사용할 수 있음
3. <body>, <html>을 포함한 모든 Html 요소의 내용을 가져오거나 변경하는 데 사용할 수 있음

 

DOM Document

html element에 접근할 수 있는 방식이 다양하게 존재함

(종류가 매우 많으니 아래의 링크 참조해서 필요한 것들 골라서 사용할 것)

JavaScript DOM Document

 

JavaScript DOM Document

JavaScript HTML DOM Document The HTML DOM document object is the owner of all other objects in your web page. The HTML DOM Document Object The document object represents your web page. If you want to access any element in an HTML page, you always start wit

www.w3schools.com

 

Html DOM Elements

html element를 다루기 위해서는 먼저 자신이 다루고자 하는 html element를 정확하게 찾아내는 것이 필요

그리고 이는 아래와 같은 기준을 통해서 찾는 것이 가능

  • id
1. getElementById("[접근할 element의 id]") 형식을 통해서 접근하는 것이 가능함.
2. element가 발견된 경우, 해당 method는 해당 element를 object로 반환함
3. element가 발견되지 않았다면 해당 method는 null을 반환하게 된다.
<script> 
  const element = document.getElementById("intro"); 
  document.getElementById("demo").innerHTML = "The text from the intro paragraph is: " + element.innerHTML; 
</script>

 

  • tag name
<script> 
  const element = document.getElementsByTagName("p"); 
  document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML; 
</script>
위와 같이 tag의 이름을 명시하여 해당 tag에 대한 element를 모두 불러오는 것이 가능하다.

tag의 이름을 사용하면, tag는 고유한 것이 아니기 때문에 해당 문서에 존재하는 여러 개의 tag를 한 번에 불러오게 되는 데, 이렇게 할 경우 Array index의 개념을 사용해서 원하는 element에 access하는 것이 가능하다. 그리고 index가 매겨지는 순서는 html 문서 상에서 위에서 아래로 내려가는 방향으로 이해하면 된다.

 

  • class name
<script> 
  const x = document.getElementsByClassName("intro"); 
  document.getElementById("demo").innerHTML = 'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML; 
</script>

위와 같이 class의 이름을 명시하여 해당 class에 속하는 모든 element들을 불러오는 작업 또한 가능하다. 마찬가지로 class의 경우는 둘 이상의 element를 포함하는 것이 가능하기 때문에 tag name의 경우와 마찬가지로 indexing을 통해 접근하고자 하는 element를 선택할 수 있다.

 

  • CSS selector
<script> 
  const x = document.querySelectorAll("p.intro"); 
  document.getElementById("demo").innerHTML = 'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML; 
</script>

CSS에서 사용하는 selector를 사용하여 html element를 선택하고 access하고 싶은 경우 "querySelectorAll" method를 사용한다. 이를 통해 CSS selector 사용하여 html element를 선택하는 것이 가능해진다.

 

  • html object collections
<form id="frm1" action="/action_page.php"> 
First name: <input type="text" name="fname" value="Donald"><br> 
Last name: <input type="text" name="lname" value="Duck">
<br><br> <input type="submit" value="Submit"> 
</form> <p>These are the values of each element in the form:</p> 
<p id="demo"></p> 

<script> const x = document.forms["frm1"]; 
let text = ""; 
for (let i = 0; i < x.length ;i++) { 
  text += x.elements[i].value + "<br>"; } 
document.getElementById("demo").innerHTML = text; 
</script>

위와 같이 작성된 코드의 경우 form method를 통해서 id="fm1"으로 지정된 form이 가지는 element들을 불러오는 모습이다. 그리고 마찬가지로 form이 여러 개의 element를 가질 수 있는 경우는 indexing을 사용하여 선별적으로 접근하는 것이 가능

 

DOM HTML

html dom은 javascript를 사용하여 기존에 존재하는 html element가 가지는 내용을 변경할 수 있도록 해준다.
  • innerHTML

html element의 내용을 가장 쉽게 변경하는 방법은 innerHTML property를 사용하는 방법이며, 아래와 같은 syntax 구조를 사용한다. 하지만 최근에는 보안상의 문제로 inner html이 잘 사용되지 않는다. 이러한 보안 이슈를 피하기 위해서는 프레임워크를 사용할 것이 권장된다.

document.getElementById(id).innerHTML = new HTML

 

  • attribute
html element가 가지는 속성을 변경하는 목적으로 사용한다.
document.getElementById(id).attribute = new value

위의 구조에서 attribute는 수정하고자 하는 속성의 이름을 전달해주면 된다.

<img id="myImage" src="smiley.gif"> 

<script> 
document.getElementById("myImage").src = "landscape.jpg"; 
</script>

위와 같은 예시의 경우 동적으로 <img> 태그가 가지는 src 속성의 속성값을 변경해준다.

 

  • Dynamic HTML Content
<p id="demo"></p> 

<script>
  document.getElementById("demo").innerHTML = "Date : " + Date(); 
</script>

위의 예시와 같이 javascript는 동적으로 html content의 내용을 생성할 때에도 유용하게 사용할 수 있다.

 

  • document.write()

document.write() method는 html output stream을 통해서 html 문서에 특정 내용을 출력하고자 하는 목적으로 사용하고자 할 때 사용된다. 그리고 이는 다음과 같은 형식으로 사용할 수 있다.

<p>Bla bla bla</p>

<script>
  document.write(Date())
</script>

<p>Bla bla bla</p>

html 문서가 로딩된 이후에는 document.write()를 사용해서는 안된다. 이렇게 하면 문서가 덮어쓰기 되어 바람직하지 않다.

 

 

DOM Forms

htm을 사용해 구현 했던 form validatiion 을 javascript를 통해서도 구현할 수 있다.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function validateForm() { let x = document.forms["myForm"]["fname"].value; 
if (x == "") { alert("Name must be filled out"); return false; } } 
</script> 
</head> 
<body> 
<h2>JavaScript Validation</h2> 
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post"> 
Name: <input type="text" name="fname"> 
<input type="submit" value="Submit"> 
</form> 
</body>
</html>

위의 코드처럼 작성한 경우, 입력 창에 아무 내용도 입력하지 않으면 alert 창을 통해서 알림을 주는 형식의 동작이 가능해짐. onsubmit 이라는 속성에 함수를 할당함으로서 submit이 이뤄질 때 사전에 javascript로 정의한 함수를 호출하는 방식으로 동작하게 됨

 

(아래와 같은 형식의 응용도 가능하다)

<!DOCTYPE html> 
<html> 
<body> 
<h2>JavaScript Validation</h2> 
<p>Please input a number between 1 and 10:</p> 
<input id="numb"> 
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p> 
<script> 
function myFunction() { 
// Get the value of the input field with id="numb" 
let x = document.getElementById("numb").value; 
// If x is Not a Number or less than one or greater than 10 let text; 
if (isNaN(x) || x < 1 || x > 10) { text = "Input not valid"; } else { text = "Input OK"; } document.getElementById("demo").innerHTML = text; } 
</script> 
</body> 
</html>

DOM CSS

html dom을 통해서 html element의 내용 뿐만 아니라 css style 도 변경하는 것이 가능함

(보통 아래의 형식으로 사용하게 됨)

document.getElementById(id).style.property = new style
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Changing the HTML style:</p>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
document.getElementById("p2").style.fontFamily = "Arial"; 
document.getElementById("p2").style.fontSize = "larger"; 
</script>
</body>
</html>

Event 사용하기

html dom을 통해서 event가 발생한 경우에 대해서 사전에 정의되어 있는 별도의 로직을 실행하도록 할 수 있음. 여기서 말하는 event란 다음과 같은 종류들에 해당한다.

  • 특정 element가 클릭된 경우
  • page가 로딩된 경우
  • 특정 Input field의 내용이 수정된 경우

(그래서 아래와 같이 버튼을 클릭했을 때 다른 html 요소의 style이 변경되도록 하는 로직을 작성하는 것이 가능하다.)

<!DOCTYPE html>
<html> 
<body> 
<h1 id="id1">My Heading 1</h1> 
<button type="button" onclick="document.getElementById('id1').style.color = 'red'"> Click Me!</button> 
</body> 
</html>

html DOM Animation

모든 animation은 container에 대해서 상대적으로 동작해야 한다. 즉, container 들은 relative position으로 지정되어야 하고, 움직이는 element는 absolute position을 사용해야 함. 아래의 코드를 통해서 볼 수 있듯이 움직이지 않고 container의 역할을 하는 element는 position: relative / 그리고 움직이는 역할을 하는 animate element는 position: absolute 가 적용된 것을 확인할 수 있다.

 

<!Doctype html>
<html>
<style>
#container { 
width: 400px; 
height: 400px; 
position: relative; 
background: yellow; 
} 
#animate {
width: 50px; 
height: 50px; 
position: absolute; 
background: red; } 
</style> 
<body> 
<h2>My First JavaScript Animation</h2> 
<div id="container"> 
<div id="animate"></div> 
</div> 
</body> 
</html>

animation을 코드로 구현하는 방식?

html element의 style을 점진적으로 변화시킴으로서 animation을 구현하게 된다. 이러한 점진적인 변화는 timer에 의해서 이뤄지는 데 timer에 설정된 간격이 작을수록 animation이 자연스럽게 연속적으로 이어지는 효과를 기대할 수 있다. 아래와 같은 코드를 추가함으로서 대각선으로 움직이는 사각형 animation을 구현하는 것이 가능하다.

 

<script>
function myMove() { 
let id = null; 
const elem = document.getElementById("animate"); 
let pos = 0; clearInterval(id); id = setInterval(frame, 5); 
function frame() { 
if (pos == 350) { 
clearInterval(id); 
} else { 
pos++; elem.style.top = pos + "px"; elem.style.left = pos + "px"; 
} 
} 
} 
</script>

DOM Events

DOM을 통해서 html element에 대해 발생하는 다양한 이벤트 들에 대해서 대응하는 것이 가능하다. 여기서 말하는 event는 한 가지 종류가 아니라 아래와 같이 여러가지 종류가 될 수 있다.

  • When a user clicks the mouse
  • When a web page has loaded
  • When an image has been loaded
  • When the mouse moves over an element
  • When an input field is changed
  • When an HTML form is submitted
  • When a user strokes a key

아래와 같이 onclick 속성을 사용하면 해당 element가 클릭되었을 때에 대한 동작을 지정할 수 있다.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>
</body>
</html>

아래와 같이 별도의 함수를 지정해두고 이를 onclick 속성에 지정해줄 수 도 있는데 이 때, 이렇게 호출되는 함수를 "Event Handler" 라고 부른다.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>
<script>
function changeText(id) { id.innerHTML = "라이언은 사랑입니다."; }
</script>
</body>
</html>

그리고 이렇게 javascript를 통해서 html에 event를 할당해주는 것도 가능하다.

 

이렇게 작성할 경우 html 코드의 가독성을 높일 수 있다는 장점이 있다. - CSS와 비슷한 맥락

<!DOCTYPE html>
<html>
<body>
<h2 id="header">JavaScript HTML Events</h2
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script> document.getElementById("myBtn").onclick = displayDate;
function displayDate() { document.getElementById("demo").innerHTML = Date(); 
document.getElementById("header").innerHTML = "라이언은 사랑입니다."; } 
</script>
</body>
</html>

부가적으로 몇가지 event에 대해서 더 알아두도록 하자.

onload & onunload

사용자가 페이지에 접속하거나 나가는 상황에 촉발?(triggered) 됨. onload 이벤트는 방문자의 브라우저 종류 및 브라우저 버전을 확인하고 정보를 기반으로 웹 페이지의 적절한 버전을 로드하는 데 사용할 수 있음. 쿠기(cookies)를 다루는 데에 사용될 수 있음 (여기서 말하는 쿠키에 대한 이해는 조금 애매한데 일단 넘어가자)

<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<h2>JavaScript HTML Events</h2>
<p id="demo"></p>
<script> function checkCookies() { var text = "";
if (navigator.cookieEnabled == true) { text = "Cookies are enabled.";
} else { text = "Cookies are not enabled.";
} 
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>

onchange

주로 input field에 대한 validation check와 함께 유용하게 사용된다. 사용자가 input field에 대한 입력을 마친 경우 발생하게 된다. - 그리고 여기서 말하는 입력을 마친 경우는 커서가 input field를 벗어난 경우 (focused) 되지 않은 상태를 가리켜서 말한다.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase(); } 
</script>
</body>
</html>

onmouseover & onmouseout

over는 마우스가 특정 element 위에 올라간 경우, out은 마우스가 특정 element에 over된 상태에서 이를 빠져나갈 때 발생하게 되는 event에 해당한다. 쉽게 혼동할 수 있는 event의 종류이기도 하니 정확하게 잘 이해하고 넘어가는 것이 중요!

<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script> 
function mOver(obj) { obj.innerHTML = "Thank You" } function mOut(obj) { obj.innerHTML = "Mouse Over Me" } 
</script>
</body>
</html>

onmousedown & onmouseup

down은 마우스 왼쪽 버튼이 눌린 상태, up은 클릭히 해제된 상태임을 의미한다.

<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me
</div> 
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>

이외에도 유용하게 활용할 수 있는 것들이 많으니 필요할 때 찾아보고 사용하자

DOM Event Listener

addEventListener() method를 통해서 원하는 특정 element에 대해 event handler를 추가하는 것이 가능함.

⇒ 첫번째 인자로는 이벤트의 종류, 두번째로 호출할 함수명을 전달하면 된다.

⇒ 세번째 인자의 경우 optional이고 event bubbling인지 capturing인지를 결정하는 boolean value에 해당한다.

element.addEventListener(event, function, useCapture);

마찬가지로 이렇게 함으로써 Html 코드에 대한 가독성을 향상시키는 것이 가능함. 동일한 element에 대해서 여러번 사용해도 이전에 추가한 내용이 덮어쓰는 것이 아니라 모두 유지됨. removeEventListener() method를 통해서 할당했던 event handler를 삭제하는 것도 가능함.

x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction);

만약 위와 같이 동일한 element에 동일한 event에 대해서 여러 개의 event handler를 걸면 해당 event 발생시 2개의 handler가 모두 동작함

x.addEventListener("mouseover", myFunction); 
x.addEventListener("click", mySecondFunction); 
x.addEventListener("mouseout", myThirdFunction);

그리고 유사하게 위와 같이 하나의 element에 대해서 여러 개의 event에 대한 handler를 각각 등록해도 모두 동작한다.

 

<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>

위와 같이 html element 뿐만 아니라 다양한 요소들에 대해서 event listener를 등록하는 것이 가능함

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2); });
function myFunction(a, b) {
document.getElementById("demo").innerHTML = a * b;
}
</script>

다음과 같이 parameter를 넘겨주는 것도 가능함

 

Event Bubbling or Event Capturing?

만약 클릭과 같은 이벤트를 상위, 하위 요소에 대해서 동일하게 설정했다면? - 둘다 클릭이벤트가 발생한다. (상위 요소가 하위요소를 포함하는 개념이기 때문) 다음과 같이 parameter를 넘겨주는 것도 가능함. 그렇게 되면 이러한 상황에서 어떤 요소에 대한 이벤트를 먼저 처리해줄 것인지에 대한 이슈가 발생하게 됨. 이벤트 발생 시 이에 반응하는 요소의 순서를 정의하는 것. 

 

bubbling은 가장 안쪽에 위치한 element에 대해서 먼저 처리됨 (안쪽에서 바깥쪽을 뻗어나가는 방향)

capturing은 가장 바깥쪽에 위치한 element에 대해서 먼저 처리됨 (바깥쪽에서 안쪽으로 뻗어나가는 방향)

 

 

removeEventListener()

첫번째 인자로 이벤트의 종류, 두번째 인자로 할당한 handler의 이름을 전달하면 된다.

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

 

DOM Navigation

html 문서를 바라볼 때 이 html 문서를 node의 tree로 바라보고 이들 사이의 relationship을 사용하여 접근하는 것이 가능하다. 그래서 실제로 html 문서는 모두 node로 이뤄져 있다고 볼 수 있으며 이 개념을 다음과 같이 확장하여 설명할 수 있다.

1. html 전체 문서는 document node로 이뤄져 있음
2. 모든 html element들은 element node에 해당함
3. html element 내에 있는 text들은 text node에 해당함
4. 모든 html attribute들은 attribute node에 해당함
5. 모든 html 문서 내의 comment들은 comment node에 해당함.

즉, 다음과 같은 구조로 바라볼 수 있다.

html dom을 사용하면 node tree에 존재하는 모든 node들은 javascript에 의해 access될 수 있으며, 새로운 node를 생성하여 추가하거나, 기존에 존재하는 node를 수정 또는 삭제하는 것 또한 가능하다.

 

Node Relationships

위의 그림과 같이 나타나 있는 node tree에서 각 node들은 서로 계층적인 관계를 가지고 있다. 그리고 이 관계 (Relationship)을 설명하기 위해서 parent, child, sibling과 같은 용어들이 사용된다. 그리고 tree 구조라는 명칭에서 알 수 있듯이 node tree도 마찬가지로 다음과 같은 특징들을 가진다.

1. node tree에서 가장 상위에 있는 node를 가리켜 root(node) 라고 한다.
2. root를 제외한 모든 node들은 정확하게 하나의 parent를 가진다. (root parent를 가지지 않음)
3. node는 여러 개의 child를 가질 수 있음
4. sibling끼리는 모두 서로 동일한 parent를 가진다.

따라서 이러한 관계들을 표현하고 이를 기반으로 다양한 html element들에 access 하기 위해 javascript에서는 다음과 같은 종류의 속성을 지원한다.

1. parentNode
2. childNodes[nodenumber]
3. firstChild
4. lastChild
5. nextSibling
6. previousSibling

 

child Nodes와 Node value와 관련하여 주의할 점

DOM Processing을 수행하면서 가장 많이 범하는 실수 중 하나는 element가 text를 포함한다고 생각하는 것이다.

<title id="demo">DOM Tutorial</title>

실제로 위의 문서에서 id="demo"에 해당하는 title tag는 text를 포함하고 있지 않다. 여기서 "DOM Tutorial" 이라는 부분은 title element의 child node인 text node에 해당한다. text node의 내용은 아래와 같이 innerHTML 속성을 통해서 접근 가능하다.

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

이외에도 아래와 같이 다양한 방법으로 동일한 접근이 가능하다.

myTitle = document.getElementById("demo").firstChild.nodeValue;
myTitle = document.getElementById("demo").childNodes[0].nodeValue;

 

따라서 전체 document에 대해서 접근하는 방식이 두 가지가 있다.

1. document.body
2. document.documentElement

1의 경우에는 html 문서에서 node search 대상을 body로 설정하겠다는 의미이고, 2는 대상을 html 문서에 존재하는 모든 element를 대상으로 하겠다는 의미이다. 따라서 자신의 필요에 따라서 적절한 속성을 골라서 사용하면 된다.

 

nodeName 속성

nodeName 속성을 사용하면 해당 element가 어떤 종류인지를 출력해준다. 여기서 말하는 node name은 해당 element의 tag name이라고 이해하면 된다. 또한 attribute의 node name은 attribute의 name으로 이해하면 된다. 또한 text와 document node의 경우에는 항상 text, document가 그 결과로 반환된다. 따라서, 이를 사용하여 아래와 같은 종류의 활용이 가능하다.

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

그리고 nodeName 속성을 통해서 얻는 node name은 항상 uppercase로 나타난다는 점을 기억해두도록 하자.

 

nodeValue 속성

nodeValue 속성을 사용하면 해당 node가 가지는 값을 알아내는 데 사용할 수 있다. 일반적으로 element의 경우에는 value를 가지지 않기 때문에 nodeValue 속성을 사용하면 null이 출력되고, text node에 대해서는 text 내용 그대로가, attribute에 대해서는 attribute 값이 그대로 출력된다.

 

 

nodeType 속성

nodeType 속성을 사용하면 해당 node의 type이 무엇인지에 따라서 정수값으로 출력된다.

<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

각각의 node들이 어떤 type을 가지는 지에 대해서는 아래의 표를 참고하도록 하자.

 

DOM Nodes

(추후 업데이트)

DOM Collections

(추후 업데이트)

DOM Node Lists

(추후 업데이트)

'Web Basic > JavaScript' 카테고리의 다른 글

자바스크립트 - HTML AJAX  (0) 2020.07.31
자바스크립트 - HTML BOM  (0) 2020.07.31
자바스크립트 - Form  (0) 2020.07.28
자바스크립트 - 정규식(Regular Expressions)  (0) 2020.07.28
자바스크립트 - 반복문, break, continue  (0) 2020.07.28

티스토리툴바