문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======JavaScript / jQuery DOM Selectors======
<WRAP left notice 80%>
  * description : JavaScript / jQuery DOM Selectors
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-14
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/js/js_jquery_selectors.asp|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====
<code 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>
</code>

====JavaScript====
<code 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>
</code>

=====Finding HTML Elements by Tag Name=====
모든 %%<p>%% 요소를 반환합니다.\\
====jQuery====
<code 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>
</code>

====JavaScript====
<code 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>
</code>

=====Finding HTML Elements by Class Name=====
%%class="intro"%%를 가진 모든 요소를 반환합니다.
====jQuery====
<code 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>
</code>

====JavaScript====
<code 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>
</code>

=====Finding HTML Elements by CSS Selectors=====
%%class="intro"%%를 가진 모든 %%<p>%% 요소의 목록을 반환합니다.\\
====jQuery====
<code 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>
</code>

====JavaScript====
<code 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>
</code>








{{tag>오션 JavaScript jQuery DOM Selectors}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
