JavaScript/생활코딩

웹브라우저 자바스크립트 - Element객체

점미 2018. 11. 26. 16:02



Element객체 - https://opentutorials.org/course/1375/6681



Element객체란 문서상에 있는 각 각의 태그 element를 추상화한 객체이다.


<!DOCTYPE html>

<html>

<body>

<ul>

    <li>HTML</li>

    <li>CSS</li>

    <li id="active">JavaScript</li>

</ul>

<script>

</script>

</body>

</html>

예제를 실행 후 콘솔화면에서 아래와 같이 t변수를 만들어 줍니다.

t는 HTMLLIElement객체 입니다. 이 객체는 HTMLElement의 자식객체입니다. 그리고 HTMLElement의 부모객체는 Element객체 입니다.


[콘솔화면]





※ HTMLElement와 Element를 구분하는 이유

Dom(Element)이 html만을 제어하는 규격은 아니기 때문입니다. (XML, SVG, XUL...등등 다른 마크업언어들를 제어할 수 있습니다)

HTMLElement는 html언어를 제어하는 객체입니다.









DOM의 계층구조












Element의 주요기능


식별자

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

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

조회

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

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

속성 -> <a href ="" target="">~</a> 에서 속성값인 href=""부분과 target=""부분의 값을 제어

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

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


댓글수0