Romantic Developer : )
(Web JavaScript) 웹 자바스크립트 DOM (4) HTML element 본문
(Web JavaScript) 웹 자바스크립트 DOM (4) HTML element
Romantic_Developer 2018. 8. 2. 17:00안녕하세요, 영감을 주는 개발자 방민방민입니다.
오늘은 지난 DOM 객체의 엘리먼트 객체를 찾아내는 것에 대하여 조금 더 심화학습해 보고자 합니다.
바로 시작합니다.
1. HTML Element (1)
바로 실습코드를 확인해 보도록 하겠습니다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script>
var li = document.getElementById('active');
console.log(li.constructor.name); // HTMLElement 하나만 리턴
var lis = document.getElementsByTagName('li');
console.log(lis.constructor.name); //HTMLCollection 복수 리턴
</script>
</body>
</html>이는 li 변수에 document.getElementById 를 통해서는 단 하나의 엘리먼트만
lis 라는 변수에는 document.getElementsByTagName 를 통해 여러개의 엘리먼트가 리턴되어 저장되는 것을 확인할 수 있습니다. 실행결과는 아래와 같습니다.
2. HTML Element (2)
다음코드입니다.
<html>
<!DOCTYPE>
<head>
</head>
<body>
<a href="htte://aaaa.com" id="anchor">aaaa.com</a>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="list">JavaScript</li>
</ul>
<input type="button" id='button' value ='button'/>
<script>
var target = document.getElementById('list');
console.log(target.constructor.name);
var target = document.getElementById('anchor');
console.log(target.constructor.name);
var target = document.getElementById('button');
console.log(target.constructor.name);
</script>
</body>
</html>
위의 코드에서 Id list 를 기준으로 엘리먼트를 target 에 담은 상태로 그 constructor 을 출력하면 , HTMLLIELEMENT 를 출력합니다.
반면
anchor 일때는, HTMLAnchorElement를 출력하고 button 일때는 HTMLInputElement 을 출력합니다. 즉 각각의 엘리먼트의 constructor 가 다르다는것을 의미합니다.
이는 예를들어 위의 a 태그의 경우 링크이기 때문에 herf 라는 속성이 필요한 반면 li 엘리먼트는 herf 속성을 필요로 하지 않습니다. 이와 같이 각각의 엘리먼트들은 그 정의된 객체의 형태가 모드 다르고 이 형태에 따라서 HTML 000 ELEMENT 라고 출력됩니다.
DOM Element 에 대한 표준 정의 객체 유형은 아래의 사이트 링크에서 확인이 가능합니다.
1) HTMLElement
interface HTMLLIElement : HTMLElement {
attribute DOMString type;
attribute long value;
};
2) HTMLAnchorElement
interface HTMLAnchorElement : HTMLElement {
attribute DOMString accessKey;
attribute DOMString charset;
attribute DOMString coords;
attribute DOMString href;
attribute DOMString hreflang;
attribute DOMString name;
attribute DOMString rel;
attribute DOMString rev;
attribute DOMString shape;
attribute long tabIndex;
attribute DOMString target;
attribute DOMString type;
void blur();
void focus();
};
두 엘리먼트를 비교해보면 그 구조가 다르지만 AnchorElement 가 일반 Element의 구조를 상속하고 있음을 알 수 있습니다.
3.DOM tree
이처럼 DOM 에서의 객체, 특히 Element 는 부모객체와 자식객체의 상속관계로 이루어져 있습니다.
이를 그림으로 나타내면 아래와 같습니다. (출처 : 생활코딩)
이렇게 DOM 을 이해하는 것에 있어서 위와같은 부모객체 자식객체의 관계를 이해하는 거이 매우 중요합니다.
4.HTML collection
하나의 엘리먼트를 가져오면 HTML element 이지만, 여러개의 엘리먼트를 가져오면, HTML collection(유사배열) 형태로 리턴됩니다. 그리고 유사배열 형태로 저장되는 HTMLCollection 객체의 내용물은 코드에 따라 실시간으로 변경될 수 있습니다.
<!DOCTYPE>
<html>
<head>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li id="active">JavaScript</li>
</ul>
<script>
console.group('before');//비포 그룹 출력
var lis = document.getElementsByTagName('li');
for(var i =0; i<lis.length; i++){
console.log(lis[i]);
}
console.groupEnd();//비포 그룹 끝
console.group('after');//에프터 그룹 출력
lis[1].parentNode.removeChild(lis[1]);//특정 객체를 삭제
for(var i = 0; i<lis.length; i++){
console.log(lis[i]);
}
console.groupEnd();//에프터 그룹 끝
</script>
</body>
</html>
이는 아래의 결과를 출력합니다.
이 내용에 대해서는 자세한 설명보다는 HTML collection 이라는 엘리먼트의 집합 객체 내부에 속해있는 많은 엘리먼스가 코드에 따라 실시간으로 변경될 수 있다는 것만 일단 이해하면 될 것 같습니다.
자, 오늘은 여기까지 자바스크립트에서 HTML Element 과 HTMLCollection 에 대하여 알아보았습니다.
지김까지 영감을 주는 개발자 방민방민이었습니다!
'Romantic Developer > Web JavaScript' 카테고리의 다른 글
| (Web JavaScript) 웹 자바스크립트 DOM (6) 식별자 API (0) | 2018.08.04 |
|---|---|
| (Web JavaScript) 웹 자바스크립트 DOM (5) jQuery객체 (0) | 2018.08.03 |
| (Web JavaScript) 웹 자바스크립트 DOM (3) jquery 제어대상 찾기 (0) | 2018.08.01 |
| (Web JavaScript) 웹 자바스크립트 DOM (2) jquery 사용 (0) | 2018.07.31 |
| (Web JavaScript) 웹 자바스크립트 DOM (1) 제어대상 찾기 (0) | 2018.07.30 |
