판봉 개발 일기
[03]Browser[document] - javascript 본문
DOM NODE
DOM 노드는 종류에 따라서 각각 다른 프로퍼티를 지원합니다.
주로 쓰이는것중에는 tagName이란게 있는데
tagName은 프로퍼티의 요소 노드에만 존재합니다.
반대로 nodeName이란것도 있는데 이것은 모든 Node에 존재하기 떄문에 그다지 많이 쓰이지는 않을 것 같습니다.
Node property
innerHTML이란 것을 이용하면 HTML을 문자열 형태로 받아 올 수 있습니다.
또한 요소안의 HTML을 수정 하는 것도 가능하죠.
실무에서도 많이 쓰인다고 하니 중요한 부분입니다.
<html>
<body>
<p>p 태그</p>
<div>div 태그</div>
<script>
// DOM객체.innerHTML
// 요소 내부
console.log(document.body.innerHTML); // 내용 읽기
// setTimeout(실행할함수, 시간(ms))
setTimeout(() => {
// 원래의 body 내부에 html태그를 추가함
document.body.innerHTML += "<div>태그임</div>"; // 태그 추가
}, 2000);
</script>
</body>
</html>위 코드를 사용하여 livesever에서 돌리면 이런 결과가 나옵니다.
setTimeout이란 것을 이용해서 시간이 지나면
원래의 body 내부에 새로운 html태그가 추가된것을 확인 하실 수 있습니다.
즉 , innerHTML은 내용을 출력하고 완전히 바꾸어 버리죠!
여기서 setTimeout()에 뒤에 있는 "2000"이란 숫자는 ms로 2초를 뜻하고
저게 2초가 지난뒤에 실행된다는 의미가 아니라 최소한 2초의 시간이 지난뒤에 바뀐다는걸 뜻합니다.
뭐 2초보다 더 길 수도 있다는 이야기겠죠?
OuterHTML
이것은 위에 있는 InnerHTMl과는 조금 다릅니다.
outterHTMl은 요소 자체가 바뀌지가 않습니다.
innerHTMl에 요소 자체를 더한 것이라고 생각하시면 됩니다.
대신에 outerHTMl은 DOM안의 요소를 교체합니다.
실제로 옷중에도 이너라고 해서 안쪽에 입는 옷들이있죠?
이너 티셔츠 나 뭐 그런걸 생각하시면 될거 같습니다.
아우터도 뭐 생각해보니 비슷한거 같네요
textContent
지금까지 innerHTMl과 OuterHTML에 대해서 알아보았는데 이번엔 좀 다른걸 알아보겠습니다.
textContent란게 있는데 이것을 이용하면 요소 내에 있는 텍스트에 접근할 수 있습니다.
태그를 제외하고 텍스트만 추출하는 것이죠
<html>
<body>
<div id="news">
<h1>주요 뉴스!</h1>
<p>화성인이 지구를 침공하였습니다!</p>
</div>
<script>
const news = document.querySelector("#news");
// 주요 뉴스! 화성인이 지구를 침공하였습니다!
//태그까지
console.log(news.innerHTML);
// 텍스트 내용만
console.log(news.textContent);
</script>
</body>
</html>
잘 보시면 위에는 innerHTMl이라 태그들까지 나오지만 textcontent는 태그가 나오지 않는 것을 볼 수 있습니다!
Hidden
hidden 프로퍼티는 요소를 보여줄지 말지 지정할때 사용할 수 있습니다.
HTML에도 있지만 자바스크립트에도 있습니다.
hidden은 기술적으로 style="display:none"와 동일 하다고 합니다.
조금 코드가 짧아진것뿐입니다.
<html>
<body>
<div>아래 두 div를 숨겨봅시다.</div>
<!--<div hidden>, 속성값은 true-->
<!--<div>, hidden 속성값은 false-->
<div hidden>HTML의 hidden 속성 사용하기</div>
<div id="elem">자바스크립트의 hidden 프로퍼티 사용하기</div>
<script>
const elem = document.querySelector("#elem");
setTimeout(() => {
// css의 display:none과 같음
// elem.style.display = "none";
elem.hidden = true;
}, 2000);
</script>
</body>
</html>최근에 보았던 setTimeout()이라는 메서드를 이용해서 작성해보았습니다.
눈으로 직접 확인해보니 정말 신기한 것같습니다.
아 이게 javascript의 묘미구나 라고 느꼈습니다.
정말 배우기 어려운 언어이긴 하지만 동적으로
느껴져서 뭔가 잘하면 정말 재밌는걸 만들 수 있지 않을까 라는 기대감이 듭니다.
다음 글에는 Browser에서 속성 프로퍼티에 대해서 알아보겠습니다.
'JAVA 웹개발 과정' 카테고리의 다른 글
| Javascript-Document-manipulation[0816] (0) | 2021.08.16 |
|---|---|
| [04]Browser[document] - javascript (0) | 2021.08.12 |
| [02]Browser[document] - javascript (0) | 2021.08.12 |
| [01]Browser[document] - javascript (0) | 2021.08.12 |
| javascript-array-method2[0810] (0) | 2021.08.10 |
