-
웹브라우저 자바스크립트 - Element객체JavaScript/생활코딩 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);
'JavaScript > 생활코딩' 카테고리의 다른 글
웹브라우저 자바스크립트 - 조회 API (0) 2018.11.27 웹브라우저 자바스크립트 - 식별자 API (0) 2018.11.26 웹브라우저 자바스크립트 - HTMLCollection (0) 2018.11.26 웹브라우저 자바스크립트 - HTMLElement (0) 2018.11.26 웹브라우저 자바스크립트 - 제어 대상을 찾기 (0) 2018.11.23 댓글
