요소노드
DOM을 노드로 이루어져 있으며 요소노드는 뼈대를 이룬다
요소노드들을 다루는 속성들을 익힌다면
자바스크립트에서 HTML 요소를 변경할 수 있다
<HTML>
<ul id="list-1">
<li>Ragdoll</li>
<li>British Shorthair</li>
<li>Scottish Fold</li>
<li>Bengal</li>
<li>Siamese</li>
<li>Maine Coon</li>
<li>American Shorthair</li>
<li>Russian Blue</li>
</ul>
<javascript>
//먼저 연결을 하고
const myPro = document.querySelector('#list-1'); //list-1은 <ul>태그이다
//속성들을 적용해본다
console.log(myPro.innerHTML); // #list-1의 내부 요소들을 보여준다
console.log(myPro.outerHTML); // #list-1를 포함한 내부 요소들을 보여준다
console.log(myPro.textContent); //myPro의 텍스트 내용을 가져온다보통 HTML관련 메소드들을 통해 HTML 요소들의 속성을 출력하지만
변수.innerHTML += '추가할 요소' 처럼 자바스크립트에서 HTML의 요소를 추가할 수도 있다
즉 자바스크립트에서 HTML을 변경할 수 있게 된다
| 요소노드 속성 | ||
| element.innerHTML //내부 요소들을 반환 | 요소를 추가할 수 있다 | myPro.innerHTML += '<li>Additional one</li>' |
| myPro.innerHTML = '<li>First</li>' + myPro.innerHTML; |
||
| element.outerHTML //요소노드+ 내부 요소들 반환 | 값 변경시, 처음요소 삭제 | myPro.outerHTML = '<ul id="new_list"> <li>Additional one</li></ul>' |
| element.textContent | 요소 내용 수정 가능 | myPro.textContent = ' 새로운 내용 '; //의견 등 적음 |
innerHTML의 문제점
innerHTML메소드를 사용해 요소를 추가할 때 원래 파일에 덮어씌우는 방식이다.
myPro.innerHTML = '<li>First</li>' + myPro.innerHTML;하지만 innerHTML과 outerHTML을 출력으로 사용하는 것이 아닌
요소를 추가하기 위해 사용하면 입력값이 많아질 때 큰 문제를 일으킬 수 있다
document.createElement('태그명');
HTML 요소를 추가해주는 메소드
const making = document.createElement(' li '); //요소노드를 만든다. 태그명을 넣는다
making.textContent = ' 요소노드 추가하자 '; //요소노드에 들어갈 텍스트값을 입력한다
element.prepend(making); //HTML에 있는 요소를 element라는 변수로 가져왔다
//이 요소 안에 .prepend 메소드를 통해 만든 making요소노드를 넣어준다
element.append('마지막에 추가'); //HTML 요소에 요소노드 뿐 아니라 문자열을 넣어줄 수도 있다*요소노드 추가: prepend / append / after / before
요소노드 삭제와 이동
making.remove(); //요소노드 전체 삭제
making.children[2].remove(); //요소노드 부분 삭제
element.append(making.children[2]) //요소노드 부분 이동
element.children[3].after(making.children[1]); //세부적인 이동
| 요소노드 활용하기 | |||
| 요소노드 열람 | element.innerHTML | 내부 HTML | |
| element.outerHTML | 요소를 포함한 내부HTML | ||
| element.textContent | |||
| 요소노드 생성과 추가 | = document.createElement(' 태그 '); | document.createElement(''); //꺽쇠X | |
| new.textContent = ' 내용 '; | prepend() / append() before() / after() |
||
| element.append(new); | |||
| 요소노드 삭제 | element.remove(); | *delete가 아니다 | |
| element.children[index].remove(); | |||
| 요소노드 이동 | element.append( 이동할 요소 ) | *children을 활용한다 | |
'Study > Javascript' 카테고리의 다른 글
| Javascript_06: 스타일 접근하기 classList, className (0) | 2021.09.22 |
|---|---|
| Javascript_05: 속성 다루기 .getAttribute() .setAttribute() .removeAttribute() (0) | 2021.09.22 |
| Javascript_03: DOM(Document Object Model)의 이해 (0) | 2021.09.22 |
| Javascript_02: 이벤트(Event)와 버튼 (0) | 2021.09.21 |
| Javascript_01: 태그 연결하기 (0) | 2021.09.21 |