[JQuery] DOM

<div class = "parent">

  <div class = "child">1번</div>
  <button class = "btn">
</div>
<div class = "parent">

  <div class = "child">2번</div>
  <button class = "btn">
</div>

<!-- 이전 형제 노드 찾기 -->
<script>
var that = $(".btn").prev(); //.btn 클래스 바로 이전에 있는 노드인 .child 클래스 노드를 찾는다.
var that = $(".child").next(); // .child 클래스 바로 뒤에 있는 노드를 찾는다.
</script>


<!--특정 버튼 클릭했을 때 자식 노드-->
<script>
$(".btn").on("click",function(){
  var that = $(this).siblings(".child").val()
  alert(that); // 첫번 째 버튼을 클릭할 경우 1번 두번째 버튼을 클릭할 경우 2번
})
</script>

<div>
  <span id = "1">1번</span>
  <span id = "2">2번</span>
  <button id = "btn">
</div>
<script>
 $("#btn").on("click", function(){
   $("#2").after("<span>3번</span>"); //#2 노드 뒤에 해당 노드를 추가한다.
   $("#2").before("<span>1.5번</span>") //#2 노드 앞에 해당 노드를 추가한다.
 })
</script>

<div>
  <span id = "1">1번</span>
  <span id = "2">2번</span>
  <button id = "btn">
</div>
<script>
$("#btn").on("click", function(){
  var that = $(this).parents("div").children("#1").val()
  var
  alert(that) // 1 을 경고창으로 띄운다.
})
</script>

<div>
  <span id = "1">1번</span>
  <span id = "2">2번</span>
  <button id = "btn">
</div>
<script>
 $("#btn").on("click", function(){
   $(this).parents("div").prepend("<span>3번</span>"); //div 노드의 첫번째 자식 노드로 추가
   $(this).parents("div").append("<span>3번</span>"); //div 노드의 마지막 자식 노드로 추가
 })
</script>

<div>
  <span class = "node">1번</span>
  <span class = "node">2번</span>
  <span class = "node">3번</span>
</div>

<script>
  var that = $('.node').eq(0).val();
  alert(that); //1번 을 경고창으로 띄운다.
  var size = $(".node").size();  //노드의 갯수
  var length = $(".node").length;  //노드의 갯수
</script>