웹브라우저 JavaScript

Element 객체

 

소개

Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다.

다른 객체들과의 관계

DOM의 계층구조에서 Element 객체의 위치는 아래와 같다.

주요기능

식별자

문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API

  • Element.classList
  • Element.className
  • Element.id
  • Element.tagName

조회

엘리먼트의 하위 엘리먼트를 조회하는 API

  • Element.getElementsByClassName
  • Element.getElementsByTagName
  • Element.querySelector
  • Element.querySelectorAll

속성

엘리먼트의 속성을 알아내고 변경하는 API

  • Element.getAttribute(name)
  • Element.setAttribute(name, value)
  • Element.hasAttribute(name);
  • Element.removeAttribute(name);

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다!
  2. 황혁진_에반
    잘봤습니다
  3. tachyon
    감사합니다.
  4. yihsang
    감사합니다. 감사합니다.
  5. JustStudy
    2017.07.08 금
    고맙습니다 3.
  6. JustStudy
    2016.06.30
    고맙습니다 2.
  7. 김정규
    어떤건 세미콜론이 들어가고 안들어간것도 있고 무슨 차이죠?
  8. 이주환
    2016. 04. 27
    잘보고갑니다~!
    식별자, 조회, 속성 깔끔하게 정리해두셨네요.
  9. JustStudy
    고맙습니다
  10. 헤르메스호
    감사합니다. 도움 많이 됩니다. 기초가 부족했는데 어디서 이런 귀한 강의를 들을 수 있겠습니까.

    학원은 돈독이 올라 멘붕수준이랍니다.
  11. 박민호
    쥬슈야 님 안녕하세요 저랑 똑같이 공부하면서 저랑 똑같이 느끼신것 같아서요..저도 맨붕상태인데

    이글이 4개월전에 쓰여지신것 같더라구요

    지금쯤 어느정도 길을 저보다도 앞서가실것 같은데 조언을 얻고 싶은데 연락좀 주시면 안될까요

    카톡아이디 wanted7751 입니다!!!
    대화보기
    • 쥬슈야
      답변 감사합니다. 현재 카페24의 쇼핑몰 솔루션을 이용한 쇼핑몰 제작목적으로 공부를 진행하고 있거든요. 회원가입/결제/상품리스트(진열) 이 3가지 부분을 어떻게 처리해야 하는지 몰라서 php와 mysql도 공부했었는데요. 오늘 때마침 강좌를 보다가 FTP안의 파일에서 봤던 JSON 과 html의 주석인 <!-- 을 발견했네요. 제게 절실히 필요했던 부분이 자바스크립트에 많이 담겨 있는 것 같습니다. 카페24에서 자주 쓰이는(?) 모듈 부분도 자바스크립트에 담겨 있는 것 같고요.

      필요한 부분만 빨리 배우려고 일부러 자바스크립트 부분을 건너띄고 php와 mysql을 먼저 배웠었는데요. 오히려 다른 부분부터 먼저 배우는 형태가 된 것 같습니다. 의욕을 회복했습니다. (혹여나 제가 틀리게 보고 있다면(?!) 답변 부탁드릴게요 ㅜ.ㅠ;)
      대화보기
      • egoing
        쥬슈아님 그렇다면 공부는 잠시 멈추시고, 무엇인가를 만들어보시면 좋을 것 같아요. 일전에 제가 적정수준의 공부에서 강조한 것처럼 너무 많은 학습은 독이되거든요. 지금 알고 계신 것을 가지고 도전해보셨으면 좋겠어요.
        대화보기
        • 쥬슈야
          html, css, javascript(언어), php, mysql 배울때에는 조금이나마 홈페이지를 만드는 교육의 느낌이 있었는데 "웹브라우저 자바스크립트" bom, dom 부분에 들어오면서 부터 지나치게 분산된(?) 지식을 얻는 느낌이 듭니다. 조금 더 인내하면서 다음 강좌를 봐도 될까요? "웹브라우저 자바스크립트"를 배우면서적당한 예제를 통해 지금까지 배운것을 활용해봐야 하는데.. 마냥 이것저것 새로운 것을 배우기만 하니 이전에 배우던 것을 계속 잊어버리게 되는 것 같습니다. 갈수록 깊은 미궁 속으로 빠지는 느낌이네요;;

          제 상황은 예로들어보자면..
          활 비슷한 모양이라도 만들어서 과녁에 화살을 쏘아보며 배우고 싶은데, 지금 활은 만드는 건지 화살을 만드는건지도 잘 모르겠네요. ㅜ.ㅠ 조금 더 기다리면 활을 쏘기라도 하는건지요..
        • 코딩!
          감사합니다!
        • will
          의견// DOM 사용원리가 나무를 보는 수업이라면

          이번 강의는 DOM이라는 잎에서 HTMLElenment-> Elemnt 라는 줄기로 점점 뿌리로 내려가

          전체적인 그림? 숲?을 파악해서 DOM을 넓게 이해하고 시야가 넓어지는 등의 의의가 있는 강의 같습니다
          대화보기
          • 아이린
            너무너무 잘 보고있습니다. 감사합니다.^-^b
          • 머머
            여기 까지 오다가 함수에 대한 개념 때문에 언어 자바스크립트 완주하고 왔는데 흐름이 끊겨버렸..
            열심히 해야겠어요! :)
          • 김신애
            어려워요ㅠㅠ
          • socialg
            강의를 들으면 들을수록 뿌듯해집니다! 감사합니다 ㅠㅠ
          • 육점이
            항!상! 감사합니다!!!!!!!!!!!!!!! 실습 20시간 무작정 따라하기, 클라이언트 HTML, 클라이언트 CSS, 언어 Javascript까지 완강하고 또 웹브라우저 자바스크립트 강의는 여기까지 왔네요!!!! 무서운 속도로 실습을 따라하면서 완강을 하고 있는데 온전한 제것이 되기 위해서는 저의 구체적인 경험들이 더해져야겠지요!!!
            빠르게 듣고 있음에도 불구하고 완전히 이해가 되게끔 쏙쏙 잘 강의해주셔서 감사합니다. 항상 몸 건강하시고 하는일 다 잘되시길 바랄께요.^^
          • GNyon
            이 수업의 목표는 jQuery에서 사용하게될 DOM 사용의 원리를 파악하는 것인가요??
          • 박성민
            good!
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기