윤제니

JavaScript - DOM(Document Object Model), 요소 선택, getElements~ 본문

JavaScript/JavaScript

JavaScript - DOM(Document Object Model), 요소 선택, getElements~

꿈다루 2020. 5. 5. 15:28

DOM('Document Object Model')

  • '문서 객체 모델' 이라하며 document 객체를 의미 
  • HTML 요소(element)를 제어(생성, 삭제 등)하기 위해 사용

 

  • HTML 문서가 만들어지면 눈에 보이지 않지만 위의 그림처럼 HTML 요소들을 노드(node)와 노드가 연결된 tree 구조로 만들어 준다.
  • html, head, meta, title, body, h1, p와 같은 태그 요소들  =>  '요소 노드'
  • 텍스트  =>  '텍스트 노드'

* DOM에 대한 작업 *

  1. 먼저 요소를 선택할 수 있어야 한다.
  2. 요소를 직접 선택하는 방법
  3. 노드와 상대 위치로 선택하는 방법 

 

요소의 선택

 1) 요소를 직접 선택하는 방법

메서드 설명
getElementById() document.getElementById("apple")일 경우 HTML 요소 중 id 속성이 "apple"인 요소를 선택
한 개의 요소만 선택
getElementsByClassName() document.getElementsByClassName("name")일 경우 HTML 요소 중 class 명이 "name"인 
요소들을 선택
복수 개의 요소를 선택
getElementsByTagName() document.getElementsByTagName("ul")일 경우 HTML 요소 중 태그명이 "ul"인 요소들을 선택
복수 개의 요소를 선택
getElementsByName() document.getElementsByName("error")일 경우 HTML 요소 중 name명이 "error"인 요소들을 선택
복수 개의 요소를 선택

 

<body>
    <div id="content">
      <ul class="name">
        <li>내용1</li>
        <li>내용2</li>
      </ul>
      <ul class="menu">
        <li>내용1</li>
        <li>내용2</li>
      </ul>
      <ul>
        <li>내용1</li>
        <li>내용2</li>
      </ul>
      <input type="text" name="txt" value="자바스크립트" />
      <input type="text" name="txt" value="제이쿼리" />
    </div>
  </body>
  <script>
    document.onload = start();
    function start() {
      var result = "";
      var content = document.getElementById("content");
      var menu = document.getElementsByClassName("menu");
      var ul = document.getElementsByTagName("ul");
      var txt = document.getElementsByName("txt");

      result += content + "\n";
      result += menu + "\n";
      result += ul + "\n";
      result += txt;
      alert(result);
    }
  </script>

 >> 결과

 

 >> 설명

getElementById() 메서드를 제외한 나머지 메서드들은 'object HTML Collection'과 'object NodeList'가 출력 

 =>  복수 개의 요소들이 변수에 저장되었기 때문

복수 개로 저장된 요소들을 다시 개별적으로 선택하고 싶다면 ...

  1. ul.item(index) -> ul.item(0) ul 변수에 저장된 ul 요소들 중 첫 뻔재 ul 요소를 선택
  2. ul[index] -> 복수 개의 요소가 변수에 저장되면 내부적으로 요소들을 배열로 만들어 저장, ul[1]로 두번째 요소 선택 
  3. ul.length -> ul 변수에 저장된 ul 요소는 모두 3개이므로 3이 된다.

 

메서드명에 'getElements'처럼 's'가 붙은 복수형 메서드들은 요소를 하나만 선택한다고 해서 다음과 같이 사용할 수 없다.

getElementsByTagName("p")는 모든 p 요소를 선택하므로 '<p>내용</p>' 는 p 요소 중 가장 첫 번째 요소가 된다. 

<body>
 <p>내용</p>
</body>
<script>
   var p=document.getElementsByTagName("p");
   p.style.backgroundColor="red";  ->  사용 X
   //p[0].style.backgroundColor="red";  ->  사용 O
   //p.item(0).style.backgroundColor="red";  ->  사용 O
</script>

 

 

'result+=txt.item(0).value' 에서의 value 속성은 input 요소의 value 속성값을 의미 

  <body>
    <input type="text" name="txt" value="자바스크립트" />
    <input type="text" name="txt" value="제이쿼리" />
  </body>
  
  <script>
    window.onload = function () {
      var result = "";
      var txt = document.getElementsByName("txt");
      result += txt.item(0).value + "\n";
      result += txt.item(1).value + "\n";
      //result+=txt[0].value;
      //result+=txt[1].value;
      result += txt.length;
      alert(result);
    };
  </script>

 

 

 2) 상대 위치로 선택하는 방법

색상 표시된 속성들은 노드를 선택 할 때 빈 문자도 텍스트 노드로 선택하므로 사용시 주의!

속성 설명
parentNode 현재 선택된 요소의 어미 노드를 선택
childNodes 현재 선택된 요소의 자식 노드들(요소 노드, 텍스트 노드)을 선택
children 현재 선택된 요소의 자식 노드들(요소 노드)을 선택
nextSibing 현재 선택된 요소의 이전 형제 노드를 선택
previousSibing 현재 선택된 요소의 다음 형제 노드를 선택
firstChild 현재 선택된 요소의 자식 노드 중 첫 번째 노드를 선택
lastChild 현재 선택된 요소의 자식 노드 중 마지막 노드를 선택
tagName 현재 선택된 요소의 태그명을 반환
nodeValue 현재 선택된 노드의 value 값을 반환
nodeType 현재 선택된 노드의 타입을 반환

'childNodes'로 가져온 자식 노드 중에서 '빈 텍스트 노드'를 빼고 요소 노드만 저장 가능
nodeType이 요소 노드 : 1
nodeType이 속성 노드 : 2
node Type이 텍스트 노드 : 3
id 현재 선택된 요소의 id값을 반환
className 현재 선택된 요소의 class 값을 반환

 

'childNodes' 와 'children' 속성은 비슷한 기능을 가지고 있지만 차이점 존재!

  <body>
    <div>
      <ul id="gnb">
        <li><a href="#">메뉴1</a></li>
        <li><a href="#">메뉴2</a></li>
        <li><a href="#">메뉴3</a></li>
      </ul>
    </div>
  </body>
  
  <script>
    window.onload = function () {
      var gnb = document.getElementById("gnb");
      var gnbChilds = gnb.childNodes;
      var gnbChildren = gnb.children;
      alert(gnbChilds.length + "/" + gnbChildren.length);   // 7/3 출력
    };
  </script>

 

 >> 설명

childNodes 속성의 경우 : 자식 노드로 <li>만 선택하는 것이 아니라 행 구분을 위해 '엔터'를 사용한 곳(빈문자)도 자식 노드로 취급

                                       ul 요소 안에 '엔터'를 4번 사용 + li요소가 3개이므로 gnbChilds 변수에 7개 자식노드 저장

                                       변수에 복수 개의 노드가 저장되면 item() 메서드나 배열 사용 가능

                                       gnbChilds.item(0) ~ gnbChilds.item(6) 또는 gnbChilds[0] ~ gnbChilds[6]

 

children 속성의 경우 : 공백 문자는 무시하고 li 요소 3개만 자식 노드로 선택, 3개의 자식 노드를 gnbChildren 변수에 저장 

                                   gnbChildren.item(0) ~ gnbChildren.item(2) 또는 gnbChildren[0] ~ gnbChildren[2]

저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

JavaScript - Form 객체, select 요소, option 요소, form 객체에서의 this  (0) 2020.05.08
JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용  (0) 2020.05.08
JavaScript - Document 객체, Location 객체, Screen 객체, History 객체, Navigator 객체  (0) 2020.05.05
JavaScript - BOM(Browser Object Model), Window 객체  (0) 2020.05.04
JavaScript - 이벤트 객체, 기본이벤트 실행 방지, 이벤트 버블링 방지, 이벤트 강제실행, this  (0) 2020.05.04
'JavaScript/JavaScript' Related Articles more