[DOM_Element] JS - nodeValue 속성 - 지정노드의 노드값 설정/반환 (= nodeValue속성 = 노드밸류속성)

1. nodeValue 예제 - 첫번째 <h1> 요소의 첫번째 자식노드 값
2. nodeValue 정의
3. nodeValue 구문
4. nodeValue 예제 - <div> 요소 첫번째 자식노드의 노드명/노드값/노드타입

nodeValue 예제 - 첫번째 <h1> 요소의 첫번째 자식노드 값 

 

<h1>홈짱닷컴 Homzzang.com</h1>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var h = document.getElementsByTagName("H1")[0];

  var x = h.childNodes[0].nodeValue;  

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

}

</script>

 

결과보기 (결과값: 홈짱닷컴 Homzzang.com)

nodeValue 정의

 

지정노드의 노드값 설정/반환.

 

---

 

1.

지정노드가 요소노드이면, null 반환.

 

2. 요소의 텍스트 내용 반환 경우 명심사항

• 텍스트는 항상 Text 노드 내부에 있음.
• Text 노드의 노드값(예: element.childNodes[0].nodeValue)으로 텍스트 반환.

 

3.

• 노드 타입에 따라, nodeValue는 다른 값 반환함.
• textContent 속성 - nodeValue 대안으로 사용 가능.

 

4.

모든 브라우저 지원.

 

5. MDN nodeValue 예제 보기
https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue

 

nodeValue 구문

 

반환

node.nodeValue

 

설정

node.nodeValue = value

 

---

[속성값]

 

value

필수. 저정노드의 노드값 지정.

 

nodeValue 예제 - <div> 요소 첫번째 자식노드의 노드명/노드값/노드타입

 

<div id="hz">홈짱닷컴 Homzzang.com</div>

<button onclick="homzzang()">클릭</button>

<p id="demo"></p>

<script>

function homzzang() {

  var x = document.getElementById("hz").firstChild;

  var txt = "";

  txt += "nodeName: " + x.nodeName + "<br>";

  txt += "nodeValue: " + x.nodeValue + "<br>";

  txt += "nodeType: " + x.nodeType;

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

}

</script>

 

결과보기

---

PS. 결과값

nodeName: #text

nodeValue: 홈짱닷컴 Homzzang.com

nodeType: 3