DOM - Element 노드 / Element 노드 선택

HTML*Element 개체 개요
HTML 문서 내의 각 element 들은 고유한 성질을 가지며,
각자 element를 DOM 트리내의 노드 개체로 인스턴스화하는 고유한 자바스크립트 생성자를 가진다.

HTML*Element 개체의 속성 및 메서드 (상속받은 것 포함)
HTML*Element 노드에 존재하는 속성 및 메서드와 관련된 정확한 정보를 얻으려면,

사양서를 무시하고 브라우저에게 물어보는 것이 제일 좋다.

다음 코드에서 생성한 배열을 살펴보면 HTML element 노드에 존재하는 속성 및 메서드에 대해 상세히 알 수 있다.

<script>

var anchor = document.querySelector('a');

// element 고유 속성

console.log(Object.keys(anchor).sort());

// element 고유 속성 및 상속 받은 속성

var documentPropertiesIncludeInherited = [];

for(var p in document){

documentPropertiesIncludeInherited.push(p);

}

console.log(documentPropertiesIncludeInherited.sort());

// element가 상속받은 속성만

var documentPropertiesOnlyInherited = [];

for(var p in document){

if(!document.hasOwnProperty(p)){

documentPropertiesOnlyInherited.push(p);

}

console.log(documentPropertiesOnlyInherited.sort());

</script>

중요하게 생각되는 주요 속성 및 메서드 목록

- createElement()
- tagName
- children
- getAttribute()
- setAttribute()
- hasAttribute()
- removeAttribute()
- classList()
- dataset
- attributes

Element 생성
<script>
var elementNode = document.createElement("textarea");

document.body.appendChild(elementNode);

</script>

Element의 태그 이름 얻기
tagName을 사용하면 element의 이름에 접근할 수 있다.
tagName 속성은 nodeName이 반환하는 것과 동일한 값을 반환한다.

console.log(document.querySelector("a").nodeName); // A 출력

</script>

Element의 Attribute 및 값에 대한 리스트/컬렉션 얻기
attributes 속성을 사용하면 현재 정의된 attr 노드의 컬렉션을 얻을 수 있다.

<script>
var atts = document.querySelector('a').attributes;

for(var i=0; i< atts.length; i++){

console.log(atts[i].nodeName +'='+ atts[i].nodeValue);

}

</script>

attributes 속성을 통해 반환되는 배열은 라이브 상태라는 점을 고려해야 한다.

이는 내용물이 언제든 변경될 수 있다는 것을 의미.

반환된 배열이 상속받고 있는 NamedNodeMap은

getNamedItem(), setNamedItem(), removeNamedItem()과 같이 배열을 조작하기 위한 메서드를 제공한다.

이 메서드를 사용하여 attribute를 조작하는 것보다는

getAttribute(), setAttribute(), hasAttribute(), removeAttribute()를 사용하는 것이 좋다.

attributes를 사용할 때의 유일한 이점은 라이브 상태의 목록을 반환한다는 것 뿐이다.
attributes 속성은 유사 배열 컬렉션이며, 읽기 전용인 length 속성을 가진다.

Element의 Attribute 값 획득/설정/제거
element의 attribute값을 가져오고 설정 및 제거하기 위한 가장 일관된 방법은
getAttribute(), setAttribute(), removeAttribute() 메서드를 사용하는 것이다.

<script>
var atts = document.querySelector("a");

// attribute 제거

atts.removeAttribute("href");

atts.removeAttribute("title");

atts.removeAttribute("style");

atts.removeAttribute("class");

// attribute 설정

atts.setAttribute("href", "#");

atts.setAttribute("title", "어쩌고");

atts.setAttribute("style", "padding:0");

atts.setAttribute("class", "link_g");

// attribute 가져오기

console.log(atts.getAttribute("href"));

console.log(atts.getAttribute("title"));

console.log(atts.getAttribute("style"));

console.log(atts.getAttribute("class"));

</script>

setAttribute()를 사용하여 attribute 값을 null이나 ''로 설정하지 말고 removeAttribute()를 사용하자.

Element가 특정 attribute를 가지고 있는지 확인하기
hasAttribute() 메서드를 사용하 판별한다.

<a href="#" title="title" style="margin:0" class="link"></a>
<script>
var atts = document.querySelector("a");

console.log(

atts.hasAttribute("href"),

atts.hasAttribute("title"),

atts.hasAttribute("style"),

atts.hasAttribute("class")

)

</script>

element가 attribute를 포함하고 있으면 값을 가지지 않더라도 true를 반환한다.

Class Attribute 값 리스트 얻기
classList 속성을 사용하면 className 속성에서 반환되는 공백으로 구분된 문자열 값을 사용하는 것보다
훨신 쉽게 class attribute 값 리스트에 접근할 수 있다.

<div class="big brown bear"></div>
<script>