JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="header">
  <div id="gnb">
    <ul>
      <li><a class="btn_nav1" href="#section1">메뉴1</a></li>
      <li><a class="btn_nav2" href="#section2">메뉴2</a></li>
      <li><a class="btn_nav3" href="#section3">메뉴3</a></li>
      <li><a class="btn_nav4" href="#section4">메뉴4</a></li>
    </ul>
  </div>
</div>
<!-- // #header -->

JavaScript

/***** [ 노드 다루기 ] *****/


/* [일반 노드 찾기] */
// 아이디 이름으로 
$('#header');
// 태그 이름으로
$('div');
// 클래스 이름으로
$('.btn_nav1')
// 속성으로 찾기
$('[href="section1"]');



/* [찾은 노드 다루기] */
// 찾은 노드 개수 구하기
$('li').length;
// n번째 노드 접근하기
$('li').eq(0);
// 자바스크립트 DOM객체 접근하기
$('#header').get(0);
$('#header')[0]
// 순차적으로 노드에 접근하기(each)
$('li').each(function(index, target){
	console.log(index, target);
});
// 찾은 노드 중에서 특정 노드만 찾기(filter)
$('a').filter('.btn_nav1');
$('a').filter('[href="section1"]');
// 찾은 노드의 자손 노드 중 특정노드 찾기(find)
$('li').find('.btn_nav1');
$('li').find('[href="section1"]');
// 인덱스 값 구하기
console.log($('li:eq(0)').index());



/* [자식 노드 찾기] */
// 바로 아래 모든 자식노드 찾기(children)
console.log('children1:', $('#gnb ul').children());
// 바로 아래 특정 자식노드 찾기(children)
console.log('children2:', $('#gnb ul li').children('.btn_nav1'));
// n번째 자식노드 찾기
$('#gnb ul li').children().first();
$('#gnb ul li').children().eq(0);
$('#gnb ul li').children(':first');
$('#gnb ul li').children(':eq(0)');



/* [부모 노드 찾기] */
// 부모(바로 위) 노드 찾기
console.log('parent:', $('ul').parent());
// 조상 노드 찾기
console.log('parents: ', $('li').parents());



/* [형제 노드 찾기] */
// 이전 형제 노드 찾기
$('li:eq(1)').prev();
// 다음 형제 노드 찾기
$('li:eq(0)').next();



/* [노드 생성, 추가] */
// 노드 생성
var $listEle = $('<li />');
// 첫 번째 자식 노드로 추가(부모기준)
$('#gnb ul').prepend($listEle);
// 첫 번째 자식 노드 추가(추가노드 기준)
$('<li />').prependTo('$gnb ul');
// 마지막 자식 노드로 추가(부모기준)
$('#gnb ul').append($listEle);
// 마지막 자식 노드 추가(추가노드 기준)
$('<li />').appendTo('$gnb ul');
// 특정 노드의 이전 위치에 추가
$('$gnb ul').before('<li />');
// 특정 노드의 이전 위치에 추가(추가노드 기준)
$('<li />').insertBefore('$gnb ul');
// 특정 노드의 다음 위치에 추가
$('$gnb ul').after('<li />');
// 특정 노드의 다음 위치에 추가(추가노드 기준)
$('<li />').insertAfter('$gnb ul');



/* [노드 이동] - 생성과 동일하나 매개변수에 따라 다르게 사용 */
// 노드 이동의 예
$('#gnb ul').prepend('#gnb ul li:eq(2)');



/* [노드 제거] */
// 특정노드 제거
$('#gnb ul li:eq(0)').remove();
// 모든 자식노드 제거
$('#gnb ul').children().remove();
// 모든 하위노드 제거
$('#gnb').empty();



/* [노드 내용 읽기 및 변경]...