11. JavaScript - DOM

62101 단어 Javascript 기초JavaScriptJavaScript
  • 혼자서 JavaScript를 공부하고 실습하면서 작성한 글입니다.
  • 처음 공부하고 있어서 부족하거나 잘못된 정보가 있을 수 있습니다. (2021.06.22 화)
  • 조금 더 자세히 알게 되거나 수정할 부분이 있으면 바로바로 수정하겠습니다.

문서 객체 모델 (DOM)

  • (x)html 문서의 구조를 가리켜 문서 객체 모델(DOM : Document Object Model)이라고 한다.

  • (x)html 문서의 기본 구조는 최상위 객체로 <html>이 있고 그 하위 객체로 <head>와 <body>가 있다.

  • (x)html 각 태그마다 기능과 속성이 있다.

    예를 들어 <img> 태그는 문서에 이미지를 출력하는 기능이 있고, 속성으로 src와 alt를 포함하고 있다. 이 <img> 태그도 문서 객체라고 한다.

  • 이렇듯 (x)html 태그는 각각의 기능(Method)과 속성(properties)을 갖고 있는 문서 객체이다.

  • 문서 객체 모델(DOM)을 배우는 주된 목적은 자바스크립트를 사용하여 문서 객체를 선택하고 속성 또는 스타일(css)을 적용하기 위해서 이다.

  • HTML 문서를 브라우저에서 로드 시 각 구성요소들을 객체화하여 객체 트리 구조를 나타냄

    • 루트 노드 : 트리 구조에서 가장 위에 위치한 노드 / 부모 노드가 없음
    • 부모 노드 : 트리 구조에서 상위에 위치하는 노드
    • 자식 노드 : 트리 구조에서 하위에 위치하는 노드
    • 형제 노드 : 같은 부모 노드를 가지는 노드

선택자

  • (x)html에서 사용하는 스타일(css)과 js 내에서 사용하는 스타일은 모두 (x)html의 선택한 요소에 디자인 속성을 바꿀 때 사용한다.
  • 자바스크립트를 이용해 특정 문서 객체를 선택하고, 여기에 속성(Atrribute)또는 스타일을 적용하기 위해서는 문서 객체의 선택자 사용법을 잘 알고 있어야 한다.
  • 선택자에는 크게 직접 문서에서 요소를 선택해 오는 직접 선택자(id, class, 폼명(Form name), 요소명(Element Name) 선택자를 포함)가 있고, 이 선택자를 사용해 온 문서 객체를 기준으로 가까이에 있는 요소를 선택하는 인접 관계 선택자(parentNode, childNodes, firstChild, childeren, previousSibling, nextSibling 선택자를 포함)가 있다.
구분종류설명
직접선택자document.getElementById("아이디명")아이디를 이용해 요소를 선택
document.getElementByTagName("요소(태그)명")요소의 이름을 이용해 요소를 선택
document.formName.inputName폼 요소에 name 속성을 이용해 요소를 선택
인접 관계 선택자parentNode선택한 요소의 부모 요소를 선택
childNodes선택한 요소의 모든 자식 요소를 선택. 선택한 모든 요소가 배열 객체로 저장됨
children선택한 요소의 자식 요소인 태그만 선택. 선택한 모든 요소가 배열 객체로 배열 저장
firstChild선택한 요소의 첫 번째 자식 요소만 선택
previousSibling선택한 요소의 이전에 오는 형제 요소만 선택
nextSibling선택한 요소의 다음에 오는 형제 요소만 선택

  • 예시1 - 직접선택자(id)를 이용하여 요소 선택
<html>
  <head>
    <title>예시1</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1 id="selector">선택자</h1>
    <script>
      // id 값이 "selector"인 요소에 글자가 초록색으로 출력.
      document.getElementById("selector").style.color="green"
    </script>
  </body>
</html>
  • 예시2 - 직접선택자(id)를 이용하여 요소 선택2
<html>
  <head>
    <title>예시2</title>
    <meta charset="utf-8">
    <script>
      // id 값이 “selector”인 요소에 글자가 초록색으로 출력됩니다.
      window.onload=function( ){        document.getElementById("selector").style.color="green"
      }
    </script>
  </head>
  <body>
    <h1 id="selector">선택자</h1>
  </body>
</html>
  • 예시3 - 직접선택자를 2번 이용하여 요소 선택
<!DOCTYPE html>
<html>
  <head>
    <title>예시3</title>
  </head>
  <body>
    <div id="box">
      <p>내용1</p>
      <p>내용2</p> 
      <p>내용3</p> 
    </div>
    <script>
      //<div id=“box”>에 두 번째 <p>태그에 ‘내용2’가 빨간색으로 출력됩니다.
      var obj = document.getElementById("box");
      obj.getElementsByTagName("p")[1].style.color="#f00";
    </script>
  </body>
</html>
  • 예시3-2 - 직접선택자, 인접관계선택자를 사용하여 요소 선택
<!DOCTYPE html>
<html>
  <head>
    <title>예시3-2</title>
  </head>
  <body>
    <div id="box">
      <p>내용1</p>
      <p>내용2</p> 
      <p>내용3</p> 
    </div>
    <script>
      //<div id=“box”>에 두 번째 <p>태그에 ‘내용2’가 빨간색으로 출력됩니다.
      var obj = document.getElementById("box");
      obj.children[1].style.color="#f00";
    </script>
  </body>
</html>

인접 관계 선택자로 문서 객체에 스타일 적용하기

종류의미
요소 선택.속성명요소의 지정한 속성값을 불러온다.
요소 선택.속성명 = "새 값"요소의 지정한 속성값을 새 값으로 변경 또는 생성
요소 선택.getAttribute("속성")요소의 지정한 속성값을 불러온다.
요소 선택.setAttribute("속성","새값")요소의 지정한 속성값을 새값으로 변경 또는 생성

  • 예시1 - getAttribute("속성")을 이용하여 요소의 지정한 속성 값 불러오기
<!DOCTYPE html>
<html>
  <head>
    <title>예시1</title>
    <style>
      #box {width:300px; height:300px; border:1px solid #000;}
    </style>
  </head>
  <body>
    <div id="box" style = "background-color:yellow">
      <p>내용1</p>
      <p>내용2</p> 
      <p>내용3</p> 
    </div>
    <script>        
      // background-color:yellow 가 화면에 출력된다.
      document.write(document.getElementById("box").getAttribute("style"));  
    </script>
  </body>
</html>

  • 예시2 - setAttribute("속성", "새값")을 이용하여 지정한 속성 값 변경
<!DOCTYPE html>
<html>
  <head>
    <title>예시2</title>
    <style>
      #box {width:300px; height:300px; border:1px solid #000;}
    </style>
  </head>
  <body>
    <div id="box" style = "background-color:yellow">
      <p>내용1</p>
      <p>내용2</p> 
      <p>내용3</p> 
    </div>
    <script>        
      // background-color:yellow 가 화면에 출력된다.
      document.write(document.getElementById("box").getAttribute("style"));  

      // box의 배경색이 노랑색에서 빨간색으로 변함  
      document.getElementById("box").setAttribute("style", "background-color:red");
    </script>
  </body>
</html>
  • 예시3
<!DOCTYPE html>
<html>
  <head>
    <title>예시3</title>
  </head>
  <body>

    <h1>월요일</h1>
    <h2>화요일</h2>
    <p style="font-size:50px" id="txt">수요일</p>
    <script>
      document.body.style['backgroundColor']="gold";
      document.body.style['fontSize']="50px";
      document.body.style['color']="red";
      document.write(document.getElementById('txt').getAttribute("style"));
    </script>

  </body>
</html>

DOM - 제어대상 선택

  • document.getElementsByTagName 은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList 라는 유사 배열에 담아서 반환
<!DOCTYPE html>
<html>
  <head>
    <title>연습1</title>
  </head>
  <body>

    <ul>
      <li>사과</li>
      <li>수박</li>
      <li>멜론</li>
    </ul>

    <script>
      var lis = document.getElementsByTagName('li');
      for(var i=0; i<lis.length;i++){
        lis[i].style.color="red";
      }
    </script>
  </body>
</html>
  • document.getElementsByClassName
<!DOCTYPE html>
<html>
  <head>
    <title>연습2</title>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li class="active">CSS</li>
      <li class="active">JavaScript</li>
    </ul>
    <script>
      var lis = document.getElementsByClassName('active');
      for(var i=0; i < lis.length; i++){
        lis[i].style.color='red';   
      }
    </script>
  </body>
</html>
  • document.getElementById
<!DOCTYPE html>
<html>
  <head>
    <title>연습3</title>
  </head>
  <body>
    <ul>
      <li>HTML</li>
      <li id="active">CSS</li>
      <li>JavaScript</li>
    </ul>
    <script>
      var li = document.getElementById('active');
      li.style.color='red';
    </script>
  </body>
</html>
  • document.querySelector - 지정한 요소 중 첫번째 요소만 선택
<!DOCTYPE html>
<html>
  <head>
    <title>연습4</title>
  </head>
  <body>
  
    <ul>
      <li>HTML</li>   <!-- HTML만 빨간색 적용 -->
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    
    <ol>
      <li>HTML</li>
      <li class="active">CSS</li> <!-- CSS만 파란색 적용 -->
      <li class="active">JavaScript</li>
    </ol>
    
    <script>
      var test1 = document.querySelector('li');
      test1.style.color='red';
      
      var test2 = document.querySelector('.active');
      test2.style.color='blue';
    </script>
    
  </body>
</html>
  • document.querySelectorAll
<!DOCTYPE html>
<html>
  <head>
    <title>연습5</title>
  </head>
  <body>
  
    <ul>
      <li>HTML</li>   <!-- 모든 li 태그에 파란색 적용 -->
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
    
    <ol>
      <li>HTML</li>
      <li class="active">CSS</li>
      <li class="active">JavaScript</li>
    </ol>
    
    <script>
      var lis = document.querySelectorAll('li');
      for(var name in lis){
        lis[name].style.color = 'blue';
      }

    </script>
    
  </body>
</html>

document.createElement() - 지정한 tagName의 html 요소를 만들어 반환한다.

Syntax : let element = document.createElement(tagName[, options]);


document.createTextNode() - 텍스트 노드를 생성

Syntax : var text = docuemnt.createTextNode("내용");


Node.appendChild() - 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다.

Syntax : 부모요소.appendChild(자식요소)

<!DOCTYPE html>
<html>
  <body>
    <p>버튼을 클릭하면 BUTTON 요소를 생성합니다.</p>
    <button onclick="myFunction()">클릭</button>
    <script>
      function myFunction() {
        var btn = document.createElement("BUTTON");
        var t = document.createTextNode("안녕하세요");
        btn.appendChild(t);
        document.body.appendChild(btn);
      }
    </script>
  </body>
</html>
560. Subarray Sum Equals K
[디자인 모델] 의 개폐 원칙

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage