노드

일반 노드 찾기

 

• 아이디 이름으로 노드 찾기
  

  $("#아이디 이름")​

• 태그 이름으로 노드 찾기
  

  $("태그 이름")​

• 클래스 이름으로 노드 찾기
  

  $(".클래스이름")​

• 속성으로 노드 찾기
  

  $("속성옵션")​

  - $("E[A]") : 속성 A를 포함한 모든 E 노드 찾기
  - $("E[A=V]") : 속성 A값이 V인 모든 E 노드 찾기
  - $("E[A^=V]") : 속성 A값이 V로 시작하는 모든 E 노드 찾기
  - $("E[A$=V]") : 속성 A값이 V로 끝나는 모든 E 노드 찾기
  - $("E[A*=V]") : 속성 A값이 V를 포함하고 있는 모든 E 노드 찾기

cf)  - $('선택자').css('속성', '속성 값');
       : 속성을 1개만 변경

     - $('선택자').css({'속성':'속성 값', '속성':'속성 값'})
       : 속성을 여러 개 변경 가능

 

찾은 노드 다루기

 

• 찾은 노드의 개수 구하기
  

  $대상.length​

  - length 뒤에 괄호()를 사용하지 않는다.
• 찾는 노드 중 n번째 노드 접근하기
  

  $대상.eq(index)​

  - eq(n) : n-1 번째 위치한 태그에 접근한다.
• 자바스크립트 DOM 객체 접근하기
  

  $대상.get(index)​

• 순차적으로 찾은 노드 접근하기
  

  $대상.each(function(index){
  	var $target = $(this);
      또는
      var $target = $대상.eq(index);
  })​

  - each() 실행 구조
    ▷ each() 메서드는 $대상에 들어있는 노드 개수만큼 매개변수 값으로 넘겨 받은 함수를 반복해서 호출한다.
  - $(this)에서 this는 일반 자바스크립트 DOM 객체를 의미하기 때문에 $(this)가 실행되면 이 DOM 객체를 포장하고 있는 새로운 jQuery 객체가 생성된다.
• 찾은 노드 중에서 특정 노드만 찾기
  

  $대상.filter("선택자")​

  - 찾은 노드 중에서 특정 노드만을 걸러내고 싶을 때 filter() 메서드를 사용
  - filter() 메서드가 찾는 대상은 오직 현재 찾은 노드이며 현재 찾은 노드의 자식 또는 자손 그리고 부모 노드는 모두 관련이 없다.
• 찾은 노드의 자손(자식포함) 노드 중 특정 노드 찾기
  

  $대상.find("선택자")​

  - find() 메서드는 현재 노드가 아닌 현재 노드의 자식을 포함한 자손 노드를 검색한다는 것이다.
  - filter() 메서드와 find() 메서드 차이점
   ▷ filter() 메서드는 현재 노드 중에서 특정 노드를 걸러내고 싶을 때 사용. 검색 대상에서 자식 및 자손 노드는 제외.
   ▷ find() 메서드는 현재 노드의 자손 노드 중에서 특정 노드를 찾고 싶을 때 사용. 검색 대상에서 현재 노드는 제외.
• 인덱스 값 구하기
  

  $대상.index()
  $목록.index($대상)
  $목록.index(대상DOM)​

  - index() 메서드를 이용하면 노드가 위치한 인덱스 값을 알 수 있다.
  - index() 메서드와 length를 활용하여 위치 파악하기 
  

    <script src="js/jquery-3.6.0.js"></script>
    <script>
      $(function(){
  
        // length : 개수를 세는 명령어
        var all = $('li').length
        $('span').text(all)
  
        $('a').click(function(){
          var n = $(this).parent().index()+1 // <li><a></a></li> 중 a를 기준
          $('strong').text(n)
        })
  
        $('li').click(function(){
          // var n = $(this).index() + 1 // <li><a></a></li> 중 li를 기준
        })
  
      })
    </script>

 

자식 노드 찾기

 

• 모든 자식 노드 찾기
  

  $대상.children()​

  - children( ) vs. contents( )
    ▷ contents( )는 태그 노드는 물론 텍스트 노드 등의 모든 자식 노드를 자식 노드로 찾아 준다.
       (실무에서는 특별한 경우가 아니고서는 사용하지 않는다.)
• 특정 자식 노드만 찾기
  

  $대상.children("선택자")​

• 첫 번째 자식 노드 찾기
  

  $대상.children().first()
  $대상.children().eq(0)
  $대상.children(":first")
  $대상.children(":eq(0)")​

   
• 마지막 번째 자식 노드 찾기
  

  $대상.children().last()
  $대상.children(":last")
  $대상.children().eq($대상.children().length-1)
  $대상.children().eq(":eq("+($대상.children().length-1)+")")
  $대상.children().eq(-1)
  $대상.children(":eq(-1)")​

• n번째 자식 노드 찾기
  

  $대상.children().eq(index)
  $대상.children(":eq("+index+")")​

 

부모 노드 찾기

 

부모 노드란 특정 노드를 감싸고 있는 바로 위의 상위 노드를 의미한다. 또한, 조상 노드는 특정 노드를 감싸고 있는 모든 노드를 의미한다.

• 부모 노드 찾기
  

  $대상.parent()​

• 조상 노드 찾기
  

  $대상.parents(["선택자"])​

 

형제 노드 찾기

 

형제 노드란 같은 깊이에 있는 노드를 의미한다.

• 이전 형제 노드 찾기
  

  $대상.prev()
  $대상.prevAll(["선택자"])​

  - prevAll() 메서드를 사용하면 특정 노드를 기준으로 모든 이전 형제 노드를 찾아 준다.
  - prevAll()에 선택자를 넣어 사용하면 이전 노드 중에서 선택자에 해당하는 노드만을 찾아낼 수 있다.
• 다음 형제 노드 찾기
  

  $대상.next()
  $대상.nextAll(["선택자"])​

  - next() 메서드는 메서드로서 특정 노드의 바로 다음에 있는 형제 노드를 찾고 싶을 때 사용한다.

 

노드 생성 및 추가

 

• 노드 생성
  

  var $신규노드=$("신규DOM");​

• 신규 노드를 첫 번째 자식 노드로 추가
  

  $부모노드.prepend($추가노드)
  $추가노드.prependTo($부모노드)​

• 신규 노드를 특정 노드의 마지막 번째 자식 노드로 추가하기
  

  $부모노드.append($신규노드)
  $신규노드.appendTo($부모노드)​

• 특정 노드의 이전 위치에 추가
  

  $추가노드.insertBefore($기준노드)
  $기준노드.before($추가노드)

• 특정 노드 다음에 노드 추가하기
  

  $추가노드.insertAfter($기준노드)
  $기준노드.after($추가노드)​

 

노드 이동

 

노드 이동은 노드 추가와 동일한 메서드를 사용하며 방법 역시 거의 동일하지만, 차이점은 사용하는 메서드에 넘겨주는 매개변수 값이 신규 노드라면 추가되고 기존 노드라면 이동된다.

• 첫 번째 자식 노드로 이동
  

  $부모노드.prepend($이동노드)
  $이동노드.prependTo($부모노드)​

• 마지막 번째 자식 노드로 이동
  

  $부모노드.append($이동노드)
  $이동노드.appendTo($부모노드)​

• 특정 노드의 이전 노드로 이동
  

  $이동노드.insertBefore($기준노드)
  $기준노드.before($이동노드)​

   
• 특정 노드의 다음 노드로 이동
  

  $이동노드.insertAfter($기준노드)
  $기준노드.after($이동노드)​

 

노드 삭제

 

• 특정 노드 삭제
  

  $대상.remove()​

• 모든 자식 노드 삭제
  

  $대상.children().remove()​

  - remove()는 특정 노드를 삭제하는 용도이지 내부를 비우는 데 사용하기에는 적합하지 않다. 이 경우 실무에서는 html()을 이용한다.

 

 

노드 내용 읽기 및 변경

 

• 노드 내용을 문자열로 읽기
  

  $대상.html()
  $대상.text()​

   - html() 메서드를 이용하면 특정 노드의 내부 내용을 마크업까지 확인할 수 있다.
• 노드 내용 수정하기
  

  $대상.html(수정할 태그 문자열)
  $대상.text(수정할 텍스트)​

  - 노드 내용 수정 시 노드 내용에 태그 정보가 포함돼 있는 경우에는 html() 메서드를 사용하고 일반적인 글자인 경우 text() 메서드를 사용하면 된다.
• 노드 내용을 이용해 여러 개의 자식 노드 추가하기
  

  $대상.html("추가할 태그 문자열")​

• 노드 내용을 이용해 모든 자식 노드 제거하기
  

  $대상.html("")​

  - 자식 노드를 모두 지우고 싶을 때 remove() 메서드 대신 html() 메서드를 사용하면 좀 더 효과적이다.

 

타깃을 감싸는 태그 추가

 

• wrap()
  - 타깃이 여러개일 경우, 따로따로 해당 태그로 감싸 진다.
• wrapAll()
  - 타깃이 여러 개일 경우, 한꺼번에 해당 태그로 감싸 진다.
  - 중간에 다른 태그가 있는 경우, 해당 태그는 뒤로 밀리게 된다.
• wrapInner()
  - 타깃의 안에 있는 내용을 감싸는 태그를 추가

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom</title>
    <style>
        *{margin:0;padding:0;}
        ul,ol,li{list-style:none;}
        a{text-decoration:none;color:#333;}

        .nav{
            background-color:#333;
        }

        h1,p{
            font-size:24px;
            text-align:center;
            margin:20px auto;
        }

        .list{
            width:900px; 
            height:40px;
            margin:20px auto;
            background-color:#ddd;
        }

        .list li{
            width:100px;
            height:40px;
            line-height:40px;
            float:left;
            text-align:center;
        }
    </style>
    <script src="js/jquery-3.6.0.js"></script>
    <!-- <script src="js/dom.js"></script> -->
    <script src="js/dom2.js"></script>
</head>
<body>
    <h1>DOM (Document Object Model : 문서 객체 모델)</h1>
    <ul class = "list list1">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
        <li><a href="#">menu5</a></li>
    </ul>

    <p>list2</p>

    <ul class = "list list2">
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li>
        <li><a href="#">menu5</a></li>
    </ul>
</body>
</html>

$(document).ready(function(){
    // 1. list1의 첫번째 a의 글자를 'HOME'으로 변경
    $('.list1 li a:first').text('HOME');

    // 2. list1의 두번째 a의 글자를 '<strong>PROFILE</strong>으로 변경
    $('.list1 li a:eq(1)').html('<strong>PROFILE</strong>');

    // 3 list1의 맨 앞에 'START'를 삽입
    $('.list1').prepend('<li><a href="#">START</a></li>');
    // $('.list1').prepend("<li><a href='#''>START</a></li>");

    // 4. list1의 맨 뒤에 'END'를 삽입
    $('.list1').append('<li><a href="#">END</a></li>');

    // 5. list1의 menu3 앞에 'GALLERY'를 삽입
    $('.list1 li:eq(3)').before('<li><a href="#">GALLERY</a></li>');

    // 6. list1의 menu3 뒤에 'BOARD'를 삽입
    $('.list1 li:eq(4)').after('<li><a href="#">BOARD</a></li>');

    // 7. list1의 'START'를 list2의 맨 앞으로 이동
    $('.list1 li:first').prependTo('.list2');

    // 8. list1의 'END'를 list2의 맨 뒤로 이동
    $('.list1 li:last').appendTo('.list2');

    // 9. list1의 'GALLERY'를 list2의 menu2 앞으로 이동
    $('.list1 li:eq(2)').insertBefore('.list2 li:eq(2)');
    //$('.list1 li').eq(2).insertBefore('.list2 li:eq(2)');

    // 10. list1의 'BOARD'를 list2의 menu3 뒤로 이동
    $('.list li:eq(3)').insertAfter('.list2 li:eq(4)');

    // 11. list2의 menu2 삭제
    $('.list2 li:eq(3)').remove();

    // 12. list2의 menu4 안에있는 내용을 비워라
    $('.list2 li:eq(5)').empty();

    // 13. list1을 <nav class="nav"></nav>로 감싸지도록 추가
    // $('.list1, .list2').wrap('<nav class="nav"></nav>');

    // 14. wrapAll() : 타겟이 여러개일 경우 한꺼번에 해당 태그로 감싸진다.
    //$('.list1, .list2').wrapAll('<nav class="nav"></nav>');

    // 15. body안에 있는 내용을 <div id-"wrap"></div>로 감싸지도록 추가
    $('body').wrapInner('<div id="wrap"></div>')
});