자바스크립트 1o1 - DOM으로 작업하기 - 1

This article was originally posted in my Hashnode Blog

DOM는 D ocument O bject M odel을 나타냅니다.DOM는 문서에 액세스하기 위한 표준입니다.

프로그램이나 스크립트가 문서의 내용, 스타일 및 구조를 동적으로 변경할 수 있도록 하는 언어 중립적 플랫폼입니다.

이 기사에서 우리는 배울 것입니다
문서에 있는 요소의 모델 개체에 액세스하는 방법.

아이디를 통해

<p id="demo"></p>
<script>

let paragraph = document.getElementById("demo");  
//or
let paragraph = document.querySelector("#demo");


</script>

# is used before the id to denote we are selecting the elements having id while using querySelector

document.getElementById는 id가 있는 요소를 가져오는 데만 사용되지만 document.querySelector & document.querySelectorAll는 다른 속성을 가진 요소를 가져오는 데도 사용할 수 있습니다.

수업을 통해

<p class='para'> First Paragraph </p>
<p class='para'> Second Paragraph </p>

<script>

 let paragraphs = document.getElementsByClassName("para"); //returns HTMLCollection
//or
let paragraphs = document.querySelectorAll('.para'); //returns NodeList

</script>

. is used before the class to denote we are selecting the elements having class while using querySelector or querySelectorAll

여기서는 querySelectorAll 대신 querySelector 를 사용했습니다.

이는 querySelectorAll가 인수에 지정된 선택기와 일치하는 모든 요소를 ​​반환하기 때문입니다. 그러나 querySelector는 선택기와 일치하는 문서의 유일한 첫 번째 요소를 반환합니다.

예를 들어

<p class='para'> First Paragraph </p>
<p class='para'> Second Paragraph </p>

<script>

let paragraph = document.querySelector('.para') 
// returns the paragraph with text "First Paragraph"

</script>

따라서 Id로 선택할 때만 querySelector 를 사용합니다. 그렇지 않으면 querySelectorAll 를 사용합니다.

There is more to it with selecting elements with class

예를 들어

<p class='block'> This is paragraph </p>
<p class='block'> This is paragraph 2 </p>
<h5 class='block'> This is heading </h5>

<script>
let elems = document.querySelectorAll('p.block');
//returns only paragraph with class 'block'
</script>

태그 이름을 통해

<p> Hi </p>
<p> How are you ? </p>

<script>
  let elems = document.getElementsByTagName("p"); // returns HTMLCollection 
  //or 
  let elems = document.querySelectorAll("p"); // returns Nodelist
</script>

Not using any notation before the argument denotes selecting elements with tag name in querySelector or querySelectorAll

속성 값을 통해

<h1 title='heading'> Working with Dom </h1>

<p title='heading'> Attribute Selector </p>


<script>
  let elems = document.querySelectorAll("h1[title='heading']");
// returns NodeList of h1 elements with title 'heading'


  let elems = document.querySelectorAll("[title='heading']");
// returns NodeList of all elements with title 'headiing'
</script>

결론

id, 클래스, 태그 또는 속성을 사용하여 요소를 선택할 수 있습니다.

.는 클래스용입니다. #는 id용이고 [ attributeName = "value"]는 속성용입니다. 요소를 선택하기 위한 선택자입니다.

querySelectorAll는 요소의 NodeList를 반환하고, getElementsByClassName , getElementsByTagName는 HTMLCollection를 반환하고 getElementById & querySelector는 요소 자체를 반환합니다.

querySelector 또는 querySelectorAll를 사용할 때 요소 유형을 지정할 수도 있습니다.

눈치채셨을 수도 있습니다. 위의 코드에서 NodeList와 HTMLCollection에 대해 많이 언급했습니다. 다음 기사에서 이 낯선 사람들에 대해 알아볼 것입니다.