목차

JavaScript / jQuery DOM Selectors

  • description : JavaScript / jQuery DOM Selectors
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-14


Ref

JavaScript / jQuery DOM Selectors

jQuery vs JavaScript

jQuery는 2006년 John Resig가 만들었습니다.
브라우저 비호환성을 처리하고 HTML DOM 조작, 이벤트 처리, 애니메이션 및 Ajax를 단순화하도록 설계되었습니다.

10년이 넘도록 jQuery는 세계에서 가장 인기있는 JavaScript 라이브러리였습니다.

그러나 JavaScript 버전 5 (2009) 이후, 대부분의 jQuery 유틸리티는 몇 줄의 표준 JavaScript로 해결할 수 있습니다.

Finding HTML Element by Id

id="id01"인 요소를 반환합니다.

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h2>Finding HTML Elements by Id</h2>
  <p id="id01">Hello World!</p>
  <p id="id02">Hello Sweden!</p>
  <p id="id03">Hello Japan!</p>
  <p id="demo"></p>
  <script>
    $(document).ready(function () {
      var myElements = $("#id01");
      $("#demo").text("The text from the id01 paragraph is: " + myElements[0].innerHTML);
    });
  </script>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html lang="en">
<body>
  <h2>Finding HTML Elements by Id</h2>
  <p id="id01">Hello World!</p>
  <p id="id02">Hello Sweden!</p>
  <p id="id03">Hello Japan!</p>
  <p id="demo"></p>
  <script>
    var myElement = document.getElementById("id01");
    document.getElementById("demo").innerHTML = "The text from the id01 paragraph is: " + myElement.innerHTML;
  </script>
</body>
</html>

Finding HTML Elements by Tag Name

모든 <p> 요소를 반환합니다.

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h2>Finding HTML Elements by Tag Name</h2>
  <p>Hello World!</p>
  <p>Hello Sweden!</p>
  <p>Hello Japan!</p>
  <p id="demo"></p>
  <script>
    $(document).ready(function () {
      var myElements = $("p");
      $("#demo").text("The text in the second paragraph is: " + myElements[1].innerHTML);
    });
  </script>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html lang="en">
<body>
  <h2>Finding HTML Elements by Tag Name</h2>
  <p>Hello World!</p>
  <p>Hello Sweden!</p>
  <p>Hello Japan!</p>
  <p id="demo"></p>
  <script>
    var myElements = document.getElementsByTagName("p");
    document.getElementById("demo").innerHTML = "The text in the second paragraph is: " + myElements[1].innerHTML;
  </script>
</body>
</html>

Finding HTML Elements by Class Name

class="intro"를 가진 모든 요소를 반환합니다.

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <h2>Finding HTML Elements by Class Name</h2>
  <p class="intro">Hello Korea!!</p>
  <p class="intro">Hello Bali!!</p>
  <p class="intro">Bonjour France!!</p>
  <p id="demo"></p>
  <script>
    $(document).ready(function () {
      var myElements = $(".intro");
      $("#demo").text("The first paragraph with class='intro' is: " + myElements[0].innerHTML);
    });
  </script>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html lang="en">
<body>
  <h2>Finding HTML Elements by Class Name</h2>
  <p class="intro">Hello Korea!!</p>
  <p class="intro">Hello Bali!!</p>
  <p class="intro">Bonjour France!!</p>
  <p id="demo"></p>
  <script>
    var myElements = document.getElementsByClassName("intro");
    document.getElementById("demo").innerHTML = "The first paragraph with class='intro' is: " + myElements[0].innerHTML;
  </script>
</body>
</html>

Finding HTML Elements by CSS Selectors

class="intro"를 가진 모든 <p> 요소의 목록을 반환합니다.

jQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h2>Finding HTML Elements </h2>
  <p class="intro">Hello Korea!!</p>
  <p class="intro">Hello Bali!!</p>
  <p class="intro">Bonjour France!!</p>
  <p id="demo"></p>
  <script>
    $(document).ready(function () {
      var myElements = $("p.intro");
      $("#demo").text("The third paragraph with class='intro' is: " + myElements[2].innerHTML);
    });
  </script>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html>
<body>
  <h2>Finding HTML Elements </h2>
  <p class="intro">Hello Korea!!</p>
  <p class="intro">Hello Bali!!</p>
  <p class="intro">Bonjour France!!</p>
  <p id="demo"></p>
  <script>
    var myElements = document.querySelectorAll("p.intro");
    document.getElementById("demo").innerHTML = "The thrid paragraph with class='intro' is: " + myElements[2].innerHTML;
  </script>
</body>
</html>
, , , ,