[javascript] html DOM control하기

javascript로 html DOM을 control하는 속성들의 사용방법에 대해 정리하려한다.

document.getElementById("testId").innerHTML = "테스트";

.innerHTML을  사용하다가 속성을 제대로 알지 못하고 사용해 오류가 발생해 여러가지 속성들에 대해 파헤쳐 공부하고 정리한다.

 

 

---

먼저 innerHTML과 outerHTML의 차이를 알아보자 !

차이점을 알고 사용하면  헷갈리지 않고 확실하게 구현할 수 있을 것이다.

 

 

 

▶ innerHTML

    :  innerHTML에서 지정한 요소 태그를 제외한 안쪽(내부)를 가져온다.

       자기 자신을 포함하지 않는다.

 

▶ outerHTML

    :  outerHTML에서 지정한 요소 태그를 포함하여 가져온다.

      자기 자신을 포함한다.

 

 

---

추가적인 속성을 알아보자 !

 

 

 

 

 

아래 두 속성은 매개변수로 element를 사용하기 때문에 element를 생성해서 html 문자열을 넣어주고 사용해야한다.

document.createElement() 를 사용해서 객체를 생성할 수 있다.

var newElement = document.createElement('태그명');

여기서 주의할점은 추가가 아니고 생성이라는 것이다 !

 

 

 

 

 

▶ appendChild

     :  자식요소를 생성할 때 사용한다. 추가적으로 appendChild는 event 등록 시 활용하면 좋다고 한다.

        appendChild를 사용하면 선택된요소의 마지막에 추가가 된다.

     :  append와 반대로 prepend가 선택된요소의 앞에 추가가 되는 속성이다.

        하지만 이 속성은 IE에서 호환이 안되 특정 조건을 걸어줘야하는 불편함이 있어 잘 쓰이지 않는다고 한다.

        (+ 이부분에 대해서는 확실하지 않다. 정확한 정보를 알고 계시는 분의 피드백을 기다립니당 ㅠㅠ ! )

var div = document.createElement('div');
div.id = 'id';
div.textContent = 'test중입니다';
div.addEventListener('click', function(){console.log('event발생');});
document.getElementById('parent').appendChild(div);

 

 

 

 

▶ removeChild

     :  요소를 삭제할 때 사용한다. 부모요소로 접근하여 해당 객체를 삭제한다.

element.parentNode.removeChild(element);

 

 

 

 

 

 

▶ insertAdjacentHTML 

    :  HTML 문자열을 옵션에 따른 위치에 추가할 때 사용한다.

      추가할 HTML문자열을 바로 사용할 수도 있고 여러가지 방면으로 appendChild보다 속도, 코드길이 상으로 편리하고 우수하다.

parentElement.insertAdjacentHTML('추가할 위치에 따른 옵션 명', 추가할 HTML문자열);

 

     [ 추가할 위치에 따른 옵션 종류 ]

    ▷ beforebegin : 요소 앞에 추가

    ▷ afterbegin : 요소 안에 가장 첫번째 child

    ▷ beforeend : 요소 안에 가장 마지막 child

    ▷ afterend : 요소 뒤에 추가

 

 

 

 

 

 

 

 

 

 

---

속성을 제대로 알지도 못하고 문법이 틀려 오류가 발생하는 거는 정말 개발자로서 부끄러운 일이라고 생각한다.

개발 공부의 끝은 없고.. 난 이제 시작이다ㅏ...    ( _ _ )nn

 

내가 하는게 개발인지 계발인지 ..  dog발만은 되지 않기로... ㅎㅎㅎ :b