1)firstChild와 firstElementChild - firstElementChild가 유용함
(1)개요
모두 선택된 객체의 첫 번째 자식 요소를 반환한다.
(2)비교
firstChild는 first childe node를 element node 또는 text node, comment node로 반환한다. firstElementChild는 first child node를 element node로만 반환을 한다 (text와 comment nodes를 무시). 따라서 textContent에 접근하거나 style을 바꾼다든지 등등 HTML code에 반영을 위한 접근이 필요하다면 firstElementChild을 쓴다.
The difference boils down to the difference between a Node and an Element. Every Element is also a Node, but a Node can also be a Text node, a Comment node, or something else. firstElementChild returns the first child Element node, whereas firstChild returns the first child Node, regardless of whether it’s an Element, a Text, a Comment, or something else. (출처:StackOverflow)
(3)참고URL
[javaScipt]DOM의 선회
DOM의 선회 ParentNode :현재 노드의 부모노드에 접근한다. [html 일부] [javascript 일부] 위 코드에...
blog.naver.com
2)createTextNode와 innerHTML와 textContent - textContent가 유용함
(1)개요
모두 선택된 객체에 text(문자열 내용)을 추가할 수 있다.
(2)사례
참고로 <b></b> 태그는 글자를 굵게 표시하는 태그로 bold의 약자입니다.
<strong></strong>태그도 같은 기능을 하며 최신 표준은 <b> 태그 보다는 <strong> 태그를 권고 하고 있습니다.
CSS에서 font-weight을 bold으로 설정하는 것과 같은 효과를 나타냅니다.
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<script>
let text = '<b>text</b>';
elem1.append(document.createTextNode(text));
elem2.innerHTML = text;
elem3.textContent = text;
</script>
//결과
<b>text</b>
text
<b>text</b>(3)innerHTML
QuerySelector로 가져온 도큐먼트 오브젝트의 내용이나, 내부 HTML 코드를 JavaScript 코드에서 변경 할 수 있습니다.
<html>
<head>
<script type= "text/javascript">
function innerHTMLTest(){
var randValNode = document.getElementById("rand-val");
randValNode.innerHTML = "<b><font color='red'>"+Math.random()+"</font></b>";
}
</script>
</head>
<body>
<div id="rand-val">Let's generate random Value</div>
<button onclick="innerHTMLTest()">Generate</button>
</body>
</html>button 클릭하면 붉은색 굵은 글씨의 소수점 숫자가 random하게 출력된다.
(4)참고 URL
①개괄
엘리먼트의 텍스트를 변경하는 다양한 방법 / createTextNode, innerHTML, textContent, insertAdjacentHTML
jQuery의 .append()를 아시나요..? 제가 참 좋아하는데요 ㅠ,ㅠ jQuery가 점점 줄어들고 순수자바스크립트의 중요성이 강해지면서 자바스크립트를 이용하는 방법을 알아볼까나요! 그 전에... append는 요
mesonia.tistory.com
②innerHTML
JavaScript innerHTML 속성 - ofcourse
개요 QuerySelector로 가져온 도큐먼트 오브젝트의 내용이나, 내부 HTML 코드를 JavaScript 코드에서 변경 할 수 있습니다. 예제 function innerHTMLTest(){ var randValNode = document.getElementById("rand-val"); randValNode.inne
ofcourse.kr
3)Node와 Element
(1)개요
Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>같은)만 가리킵니다. 따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다.
(2)참고URL
[Javascript] node와 element의 차이
Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠
hianna.tistory.com
'[Javascript]' 카테고리의 다른 글
| [javascript] Event의 구성요소와 등록방법 (0) | 2023.03.25 |
|---|---|
| [Javascript] Date() 관련 참고할 만한 사항 (0) | 2023.03.22 |
| [Javascript] createElement, forEach, innerHTML, append 활용 예시 (0) | 2023.03.16 |
| [Javascript] JS로 HTML 요소 생성 및 추가하기 (0) | 2023.03.16 |
| [Javascript] Date() 관련 메소드 정리 (0) | 2023.03.15 |