본문 바로가기

DEVELOPMENT/클라이언트사이드

11-07, 클라이언트 사이드

문서 객체 선택

여러 가지 방법으로 HTML 요소를 선택 가능

id : document.getElementByld("id") - 이것은 배열에 담기지않음

문서 <body></body>내의 요소들 중에서 속성 id가 'id'와 일치하는 요소 하나 선택

 

tag name

document.getElementsByTagName("h1") - 반드시 복수로 해야함(상황에 따라서 다름)

문서 <body></body>내의 모든 "h1"요소들을 선택 - 배열에 담아옴 (여러개를 하기에 배열이 필요

 

class name

document.getElementsByClassName("cls")

HTML class 속성은 클래스 이름이 동일한 스타일을 정의하는 데 사용됨

동일한 class 속성을 가진 모든 HTML요소는 동일한 스타일 갖습니다.

 

css selector

    .pgm  <- (.)이런 것을 Selector라고 함  {

      color: blue;

    }

document.querySelector("sel")

문서<body> 내의 요소들 중에서 CSS selector가 "sel"과 일치하는 첫 요소를 선택

document.querySelectorAll("p.intro")

문서 바디 내의 <p>요소들 중에서 속성 class가 "intro"와 일치하는 모든 요소들을 선택

 

HTML obejct collection

document.<요소들>

anchors 문서 내의 위치를 잡아주기 위한 것

body 웹 문서 전체가 다 담겨져있음

documentElement 모든 것

embeds

forms

head

images

links

scripts

title

 

문서 객체 조작

HTML 내용

element.innerHTML = new HTML content

요소의 내부 HTML 내용을 변경

 

속성

요소의 속성(attribute) 값을 변경

element.attribute = new value

element.setAttribute(attribute, new value)

요소의 속성 값 가져오기

element.getAttribute(attribute)

 

스타일

element.style.property = new style

요소의 스타일 속성 값을 변경

 

 

 

스타일 속성 이름 비교

Style sheet vs JavaScript

 

Style sheet = backgorund-color

border-radius

color

JavaScript = backgroundColor

borderRadius

color

 

<!DOCTYPE html>

<html lang="ko" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

    window.onload = function() {

 

    }

    .pgm { // .pgm의 .이 셀렉트라고 할 수 있다.

      color: blue;

    }

    .thm {

      color: red;

    }

    </style>

    <!-- ====================== -->

    <script type="text/javascript">

      window.onload = function() {

        let classpgm = document.querySelectorAll(".pgm");

            for(let item of classpgm) {

           item.style.color = "orange";

          }

 

          // 문서의 첫 <li> 객체의 속성 class의 속성값을 경고창으로 표시하기

          // 1. 첫 < li> 객체를 선택하여 가져온다

          // 2. 가져온 객체의 속성 class의 속성값을 읽어온다.

          // 3. 읽은 속성 값을 경고창(alert)으로 표시한다.

          let firstLI = document.querySelector("li");

          let classValue = firstLI.getAttribute("class");

          alert(classValue);

          alert("선택 객체의 class 속성 값을 thm으로 변경합니당");

          //4. 가져온 객체의 속성 class의 속성값을 thm으로 변경한다.

          // let styleValue = classValue.setAttribute("pgm", "thm");

          

          //firstLI.setAttribute("class", "tgm");

          alert(firstLI.innerHTML);

        }

    </script>

    <!-- ====================== -->

  </head>

  <body>

    <h1>DOM Coding Test</h1>

    <hr>

    <h2>2학기 공통 수강과목</h2>

    <hr>

    <p>과목 분류 : [<span class="thm">이론 과목</span>] [<span class="pgm">프로그래밍 실습과목</span>]</p>

 

    <ul>

      <li class="pgm">Client side Programing</li>

      <li class="pgm">Java 프로그래밍</li>

      <li class="thm">데이터베이스</li>

      <li class="pgm">오픈소스소프트웨어</li>

    </ul>

 

  </body>

 

</html>