[DOM] 태그와 엘리먼트에 대해 알아보자

태그

HTML 문서에서 엘리먼트를 정의하거나 구분짓기 위해 사용되는 키워드

태그는 각각의 역할과 의미를 가지며, 해당 엘리먼트의 동작이나 표현 방식을 지정한다.

태그는 <> 로 묶여 있는 형태인데, 3가지 종류가 있다.

 

1) 시작 태그(Opening Tag) 

<a> 처럼 사용하며 요소의 시작을 정의한다.

 

2) 종료 태그(Closing Tag)

</a> 처럼 사용하며 요소의 끝을 정의하고 요소의 범위를 지정한다.

 

3) 빈 태그(Void Tag)

<img /> <br />처럼 어떤 내용을 가진 게 아니라 속성만을 갖고 있다.

---

엘리먼트

<p> 안녕하세요 </p>

이렇게 생긴 것들을 엘리먼트라고 한다.

 

태그랑 똑같은 거 아니냐고 생각할 수 있는데, 엘리먼트는 태그를 포함해 요소의 전체를 나타낸다.

태그는 <p> </p> 만 해당되는데, 엘리먼트는 시작 태그부터 내용, 종료 태그까지 모두를 말하는 것이다.

즉 위 문장은 <p> 엘리먼트로 구성된 예시고, 안녕하세요는 이 엘리먼트의 내용이 된다.

---

엘리먼트 오브젝트

웹 페이지에서 HTML 요소를 나타내는 JS 객체

DOM의 일부로서 DOM 트리에서 각각의 노드로 표현된다.

DOM 트리에서 엘리먼트 노드는 HTML 요소를 나타내며, 다른 유형의 노드와 함께 웹 페이지의 구조를 구성한다.

이 오브젝트를 사용하면 JS에서 HTML 엘리먼트를 조작하고 수정할 수 있다.

 

 

 

HTMLLIElement만 표시되어 있는 건 예시에서 <li> 엘리먼트를 사용해서 그렇다.

 

 

이런 식으로 <li> 엘리먼트는 Node - Element - HTMLElement - HTMLLIelement 로 구조화 되어 있다.

---

엘리먼트 식별자 API

엘리먼트를 제어하기 위해서 그 엘리먼트를 조회할 식별자가 필요하다.

HTML에서 엘리먼트의 이름과 id, class가 식별자로 사용된다.

 

1) Element.tagName

해당 엘리먼트의 태그 이름을 알아낸다. 변경할 수는 없다.

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active" class="important current">JavaScript</li>
</ul>
<script>
console.log(document.getElementById('active').tagName) //LI
</script>

 

2) Element.id

id는 문서에서 단 하나만 등장할 수 있는 식별자다.

getElementById로 해당하는 아이디의 요소를 가져올 수 있다.

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active">JavaScript</li>
</ul>
<script>
var active = document.getElementById('active');
console.log(active.id);
active.id = 'deactive';
console.log(active.id);
</script>

id="active"인 <li> 요소를 선택해서 처음 콘솔에는 active가 찍힌다.

다음 줄에서 active.id = 'deactive'로 바꾸어서 다음 콘솔에는 deactive가 찍힌다.

 

3) Element.className

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active">JavaScript</li>
</ul>
<script>
var active = document.getElementById('active');
// class 값을 변경할 때는 프로퍼티의 이름으로 className을 사용한다.
active.className = "important current";
console.log(active.className);
// 클래스를 추가할 때는 아래와 같이 문자열의 더한다.
active.className += " readed"
</script>

id가 active인 <li> 요소를 선택하고, className으로 important current를 주었다.

해서 콘솔에는 important current가 찍히지만, 다음 className 에는 readed가 추가되어 출력된다.

 

4) Element.classList

classList는 className보다 편리하고 효용이 좋다.

클래스를 추가, 제거, 토글하는 메서드를 직접 제공하여 클래스를 보다 간편하게 조작할 수 있다.

<ul>
    <li>html</li>
    <li>css</li>
    <li id="active" class="important current">JavaScript</li>
</ul>
<script>
function loop(){
    for(var i=0; i<active.classList.length; i++){
        console.log(i, active.classList[i]);
    }
}
// 클래스를 추가
</script>
<input type="button" value="DOMTokenList" onclick="console.log(active.classList);" />
<input type="button" value="조회" onclick="loop();" />
<input type="button" value="추가" onclick="active.classList.add('marked');" />
<input type="button" value="제거" onclick="active.classList.remove('important');" />
<input type="button" value="토글" onclick="active.classList.toggle('current');" />

 

id="active"인 <li> 요소 안에는 important, current라는 2개의 클래스가 있다. 

그래서 우선 0 important / 1 current가 출력된다.

 

버튼을 누를 때마다 다른데, 추가 버튼을 클릭하면 active에 marked라는 클래스가 추가된다.

제거 버튼을 누르면 important가 제거되고, 토글 버튼을 누르면 current가 존재할 경우 제거하고, 존재하지 않을 경우 추가한다.

 

JS로 웹 개발을 할 때 사용했던 것들인데 좀 더 구체적으로 알아보았다.

 

**생활코딩 참고

식별자 API - 생활코딩

---

조회 API

엘리먼트를 조회하는 것 뿐만 아니라 조회 대상을 제한해보자.

<ul>
    <li class="marked">html</li>
    <li>css</li>
    <li id="active">JavaScript
        <ul>
            <li>JavaScript Core</li>
            <li class="marked">DOM</li>
            <li class="marked">BOM</li>
        </ul>
    </li>
</ul>
<script>
    var list = document.getElementsByClassName('marked');
    console.group('document');
    for(var i=0; i<list.length; i++){
        console.log(list[i].textContent);
    }
    console.groupEnd();
     
    console.group('active');
    var active = document.getElementById('active');     
    var list = active.getElementsByClassName('marked');
    for(var i=0; i<list.length; i++){
        console.log(list[i].textContent);
    }
    console.groupEnd();
</script>

 

console.group(), console.groupEnd()는 처음 알았는데

group의 괄호 안에 적어주는 대로 groupEnd 까지 그룹이 형성된다.

 

첫 번째 list는 클래스 marked를 가진 모든 요소를 선택해 해당 요소들의 배열을 반환한다.

즉 list는 marked 클래스를 가진 요소들의 HTMLCollection이 되는데, 인덱스로 각 요소에 접근할 수 있다.

[
  <li class="marked">html</li>,
  <li class="marked">DOM</li>,
  <li class="marked">BOM</li>,
]

이런 식으로 되어 있어 list를 순회하면 0, 1, 2번 인덱스에서 해당 값을 알 수 있되 textContent로 텍스트만 가져온다.

textContent는 DOM요소의 텍스트 콘텐츠를 나타내는 속성으로 텍스트를 문자열 형태로 반환한다.

 

두 번째 list는 id가 active인 것을 찾고, 거기서 또 하위에 marked 라는 클래스 네임을 가진 것을 list라고 한다.

즉 active는 JavaScript 밖에 없는데, 이 하위 개념인 <ul> 들에서 marked 를 가진 DOM, BOM이 해당된다.

 

**생활코딩 참고

조회 API - 생활코딩

---

속성 API

속성은 HTML에서 태그명만으로는 부족한, 부가적인 정보를 제공한다. 

 

<a id="target" href="http://opentutorials.org">opentutorials</a>

<script>

var t = document.getElementById('target');
console.log(t.getAttribute('href')); //http://opentutorials.org

t.setAttribute('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
console.log(t.hasAttribute('title')); // true, title 속성의 존재여부를 확인한다.

t.removeAttribute('title'); // title 속성을 제거한다.
console.log(t.hasAttribute('title')); // false, title 속성의 존재여부를 확인한다.

</script>

변수 t에 id가 target인 a 태그를 담았다. 

 

1. getAttribute(이름) : 이름을 가진 속성을 가져온다.

2. setAttribute(이름, 값) : 이름을 가진 속성에 값을 부여하도록 설정한다.

3. hasAttribute(이름) : 이름을 가진 속성이 있는지 체크한다.

4. removeAttribute(이름) : 이름을 가진 속성을 제거한다.

---

속성과 프로퍼티

<p id="target">
    Hello world
</p>
<script>
    var target = document.getElementById('target');
    // attribute 방식
    target.setAttribute('class', 'important');
    // property 방식
    target.className = 'important';
</script>

속성 방식과 프로퍼티 방식은 HTML 요소의 속성 값을 조작하는데 사용되는 2가지 접근 방법이다.

 

속성 방식과 프로퍼티 방식은 아래 표를 참고해야 한다.

class	className
readonly	readOnly
rowspan	rowSpan
colspan	colSpan
usemap	userMap
frameborder	frameBorder
for	htmlFor
maxlength	maxLength

프로퍼티 방식이 더 간편하고 속도도 빠른데, JS에서 for는 반복문에 사용되기 때문에 htmlFor 이런 식으로 바뀐다.

또 maxlength 같은 경우에도 카멜케이스로 작성해주어야 한다. 이는 JS의 이름 규칙 때문이다.

 

속성과 프로퍼티는 값이 다를 수도 있다.

상대 경로로 작성된 a 태그의 href를 프로퍼티로 접근하면 전체 주소를 알 수 있다.

반면 속성으로 접근하면 직접 기술한 href 부분만 알 수 있다.

<a id="target" href="./demo1.html">ot</a>

<script>

//현재 웹페이지가 http://localhost/webjs/Element/attribute_api/demo3.html 일 때 
var target = document.getElementById('target');

// http://localhost/webjs/Element/attribute_api/demo1.html 
console.log('target.href', target.href);

// ./demo1.html 
console.log('target.getAttribute("href")', target.getAttribute("href"));

</script>

 

**생활코딩 참고

속성 API - 생활코딩