ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • HTML DOM 메소드
      Dev_Study/JavaScript 2021. 3. 4. 17:16
      반응형
      ✔ HTML DOM 메서드는 HTML 요소에서 수행 할 수 있는 작업 입니다.
      ✔ HTML DOM 속성은 설정하거나 변경할 수 있는 값 (HTML 요소의)입니다.

      ✔       DOM 프로그래밍 인터페이스
      - HTML DOM은 JavaScript (및 기타 프로그래밍 언어)로 액세스 할 수 있습니다.
      - DOM에서 모든 HTML 요소는 객체 로 정의됩니다.
      - 프로그래밍 인터페이스는 각 개체의 속성 및 메서드입니다.
      - 메서드( method )는 당신이 (추가 또는 HTML 요소를 삭제 등) 할 수있는 작업입니다.
      - 속성( property )은 당신이 (HTML 요소의 내용을 변경하는 등) 가져 오거나 설정할 수있는 값입니다.
      // id로 접근시
document.getElementById("id")

// name으로 접근시
document.getElementsByName("name").[인덱스]

// class으로 접근시
document.getElementsByClassName("className").[인덱스]
      <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width
                                    , initial-scale=1.0">
    <script>
        /* 문서의 모든 콘텐츠(images, script, css, etc)가
           로드된 후 발생하는 이벤트*/
         
        window.onload = function () {

            console.log('window onload 호출~!');

        };

        // change innerHTML id
        function changeInnerHTML(obj) {
            
            document.getElementById("testDiv").innerText
            	= "버튼의 class : " + obj.className
                  +"\n 버튼의 id : " + obj.id
                  +"\n 버튼의 name : " + obj.getAttribute("name");
        }

        function changeReset(){
            document.getElementById("testDiv").innerText = "테스트 영역";
        }

    </script>

</head>
<body>
    <button type="button" class="testClass" id="testId" name="testName"
    	onClick="changeInnerHTML(this)">버튼</button>
    <button type="button" onClick="changeReset()">초기화</button>
    <div id="testDiv">테스트 영역</div>
</body>

       

      반응형
      저작자표시 비영리 변경금지

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

      [JS] 객체 ( Object )  (0) 2021.03.10
      [JS] 배열 ( Array )  (0) 2021.03.10
      BOM - Window  (0) 2021.03.04
      HTML DOM ( Document Object Model )  (0) 2021.02.19
      JavaScript 버전  (0) 2021.02.19

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바