Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

FU11M00N

[ JavaScript ] JS 노드 종류 API , nodeType과 nodeName 본문

SUA 정보보안/JavaScript

[ JavaScript ] JS 노드 종류 API , nodeType과 nodeName

호IT 2021. 2. 8. 10:44

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

 

 

 

 

- 노드 종류 API

 

 

노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있습니다.

 

이런 경우에 사용할 수 있는 API가 nodeType, nodeName입니다.

 

 

Node.nodeTypenode의 타입을 의미합니다.

Node.nodeNamenode의 이름 (태그명을 의미합니다.)

 

 

 

 

 

 

- 모든 노드의 종류와 종류에 따른 값

 

for(var name in Node){
   console.log(name, Node[name]);
}

모든 노드의 종류와 종류에 따른 값을 출력하는 예제입니다.

 

Node Type 노드의 종류에 따라서 정해진 상수가 존재합니다.

 

 

실행 결괏값입니다.

 

 

굳이 다 외울필요는 없고 필요할 때 찾아보면 될 것 같습니다.

 

 

 

 

- 노드 종류 API 이용한 예제

자기 자신을 호출하는 재귀 함수를 이용한 예제입니다.

 

<!DOCTYPE html>
<html>
<body id="start">
<ul>
    <li><a href="./532">html</a></li> 
    <li><a href="./533">css</a></li>
    <li><a href="./534">JavaScript</a>
        <ul>
            <li><a href="./535">JavaScript Core</a></li>
            <li><a href="./536">DOM</a></li>
            <li><a href="./537">BOM</a></li>
        </ul>
    </li>
</ul>
<script>
function traverse(target, callback){
    if(target.nodeType === 1){
        //if(target.nodeName === 'A')
        callback(target);
        var c = target.childNodes;
        for(var i=0; i<c.length; i++){
            traverse(c[i], callback);       
        }   
    }
}
traverse(document.getElementById('start'), function(elem){
    console.log(elem);
});
</script>
</body>
</html>

 

위 코드를 실행시키면 아래와 같은 실행결과가 출력됩니다.

 

 

 

만약 17행부터 시작하는 if 문이 없다면, text가 출력될 겁니다.

 

if문 안의 조건인 target.nodeType === 1 은 "Element node" 일 때를 의미합니다.

 

따라서 text node 일 때는 출력되지 않습니다.

 

 

 

 

 

 

또한 만약 앵커 태그만 출력하게 하고 싶다면

 

if(target.nodeName === 'A')

위 코드에서 주석이 되어있는 부분을 제거해주고 실행하면 됩니다.

 

결괏값.

 

 

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.

 

'SUA 정보보안 > JavaScript' 카테고리의 다른 글

[ JavaScript ] JS jQuery 노드 (추가,제거,변경,복사,복사,이동)  (0) 2021.02.08
[ JavaScript ] JS 노드 추가, 생성 , 제거 , 변경 API  (0) 2021.02.08
[ JavaScript ] Node 객체  (0) 2021.02.08
[ JavaScript ] JS jQuery api 범위 제한 , .find()  (0) 2021.02.08
[ JavaScript ] JS jQuery 속성 제어 API , attribute vs property  (0) 2021.02.08
'SUA 정보보안/JavaScript' Related Articles more
Comments