노드 생성과 삽입 메소드
노드 생성 메소드
노드 삽입 메소드
노드 삭제 메소드
▼ 코드 예시 보기 ▼
<h1>문서 수정</h1>
<h3>노드 생성</h3>
<p>
document.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만든다.<br>
document.createTextNode(value) : 텍스트 노드를 만든다. (잘 쓰이지 않음) <br>
element.cloneNode(deep) : 요소를 복제함. deep == true 일 경우 모든 자손 요소도 복제한다.
</p>
<h3>노드 삽입, 삭제</h3>
<p>
node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입<br>
node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입<br>
node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입<br>
node.after(노드나 문자열) : node 이후에 노드나 문자열을 삽입<br>
node.replaceWith(노드나 문자열) : node를 노드나 문자열로 대체<br>
node.remove() : node를 제거
</p>
<h3>li(텍스트 노드가 있는) 노드 생성</h3>
<button onclick="test1();">실행확인</button>
<ul id="list">
<li>기존 목록1</li>
<li>기존 목록2</li>
<li>기존 목록3</li>
</ul>
<script>
function test1(){
let list = document.getElementById("list");
// list의 앞 뒤에 문자열 삽입
list.before("before");
list.after("after");
// li 노드 생성
let newList1 = document.createElement("li");
let newList2 = document.createElement("li");
// 각 노드의 내부 텍스트 설정
let text = document.createTextNode("새로운 목록1");
newList1.append(text); //<li>새로운 목록1</li>
newList2.innerHTML = "새로운 목록2";
// list의 마지막 항목/첫 항목으로 삽입
list.append(newList1);
list.prepend(newList2);
}
</script>
<h3>이미지(텍스트 노드가 없는) 노드 생성</h3>
<button onclick="test2();">실행확인</button>
<div id="area2" class="area"></div>
<script>
function test2(){
// img 노드 생성
let imgTest = document.createElement('img');
// 속성 지정
imgTest.src = "https://www.iei.or.kr/resources/images/main/main_renewal/top_logo.jpg";
imgTest.width = "200";
imgTest.height = "100";
document.getElementById('area2').append(imgTest);
}
</script>
<style>
.area {
background : lightgray;
border : 1px solid black;
min-height: 100px;
}
.div-test {
border : 1px solid black;
padding : 20px;
}
.div1 { background : mistyrose; }
.div2 { background : ivory; }
.div3 { background : honeydew; }
.div4 { background : aliceblue; }
</style>
<h3>노드 삭제</h3>
<button onclick="test3();">맨 앞 이미지 삭제</button>
<script>
function test3(){
// 삭제 할 img 노드 찾기 (img 노드 중 첫 번째 리턴)
let img = document.querySelector('img');
// 존재할 경우 (null이 아닌 경우) 삭제
if(img != null)
img.remove();
}
</script>
<h3>노드 복제</h3>
<button onclick="test4();">실행 확인</button><br>
<ul class="copy">
ul 영역
<li>li 영역</li>
</ul>
<script>
function test4(){
let ul = document.querySelector(".copy");
let cloneFalse = ul.cloneNode(false);
let cloneTrue = ul.cloneNode(true);
ul.before(cloneFalse);
ul.after(cloneTrue);
}
</script>
<h3>노드 대체</h3>
<button onclick="test5();">실행확인</button>
<script>
function test5(){
// 대체할 노드 찾기 (img 태그 중 첫 번째 리턴)
let img = document.querySelector("img");
// 존재할 경우(null이 아닌 경우) 대체
if(img != null)
img.replaceWith("<b>이미지가 있던 곳</b>");
// => 태그가 아닌 문자열로 인식
}
</script>
추가 HTML 삽입 메소드
element.insertAdjacentHTML(where, html)
where은 element 기준 상대 위치를 나타내며, html은 문자열로 태그 포함한 문자열은 이스 케이프 처리 없이 태그로 기능함
▼ 코드 예시 보기 ▼
<h3>insertAdjacentHTML</h3>
<p>
element.insertAdjacentHTML(where, html)
: where은 element 기준 상대 위치, html은 문자열.
태그 포함한 문자열은 이스케이프 처리 없으 태그로 기능한다.<br>
beforebegin : element의 바로 앞에 html 삽입<br>
afterbegin : element의 첫 번째 자식 요소 바로 앞에 html 삽입<br>
beforeend : element의 마지막 자식 요소 바로 다음에 html 삽입<br>
afterend : element의 바로 다음에 html 삽입
</p>
<h3>노드 대체 수정</h3>
<button onclick="test6();">실행확인</button>
<script>
function test6(){
// 대체할 노드 찾기
let img = document.querySelector("img");
// 존재할 경우(null이 아닌 경우) 대체
if(img != null){
img.insertAdjacentHTML('afterend', '<b>이미지가 있던 곳</b>');
img.remove();
}
}
</script>
<h3>요소 위치 바꾸기</h3>
<div class="first">first</div>
<div class="second">second</div>
<p>
모든 노드 삽입 메소드는 자동으로 기존에 있던
노드를 삭제하고 새로운 곳으로 노드를 옮기기 때문에
요소 노드를 다른 곳으로 옮길 때 기존에 있던 노드를
지울 필요가 없음
</p>
<button onclick="test7();">실행확인</button>
<script>
function test7(){
let first = document.querySelector(".first");
let second = document.querySelector('.second');
// second 뒤에 first 삽입
second.after(first);
}
</script>
문서 스타일 수정
- style객체를 이용하여 문서의 스타일을 변경
- 자바 스크립트에서 식별자에 ‘-’를 쓰지 못하기 때문에 속성명이 css에서 쓰는 것과 다른 부분이 있다.
- 예) background-color -> backgroundColor
element.style.속성명 = 속성값;
- Class를 변경하거나 추가하여 반영되는 CSS 속성 수정
className : class 속성에 대응하며 대입 시 클래스 문자열 전체가 변경
classList : 클래스 하나만 조작할 수 있는 add, remove, toggle 메소드가 존재함
▼ 코드 예시 보기 ▼
<h3>스타일 지정</h3>
<p>
프로퍼티 style은 속성 style에 쓰인 값에 대응 되는 객체<br>
여러 단어를 이어서 만든 프로퍼티는 카멜 표기법을 사용해서 이름 지어짐<br>
Ex. background-color => backgroundColor,
border-radius => borderRadius<br>
style을 수정하는 방법에는 class를 변경/추가하여 수정하는 방법도 있음<br>
className : class 속성에 대응. 대입 시 클래스 문자열 전체가 바뀜<br>
classList : 클래스 하나만 조작할 수 있는 add/remove/toggle 메소드가 있음
</p>
<button onclick="test8();">style 수정</button>
<button onclick="test9();">class 수정</button>
<div id="area4" class="area"></div>
<script>
function test8(){
let area4 = document.querySelector('#area4');
area4.style.width = '200px';
area4.style.backgroundColor = 'yellow';
area4.style.borderRadius = '50%';
}
function test9(){
let area4 = document.querySelector("#area4");
// 전체 클래스명이 circle로 변경 되어 area 클래스로 가지고 있던
// 속성도 제거 됨(높이 값이 없어 보이지 않음)
// area4.className = 'circle';
// 기존 area 클래스에 circle 클래스 추가
area4.classList.add('circle');
}
</script>
'Programming > JavaScript' 카테고리의 다른 글
| 10. 이벤트 (0) | 2022.02.21 |
|---|---|
| 9. BOM(Brower Object Model) (0) | 2022.02.21 |
| 7. 요소 검색 (0) | 2022.02.18 |
| 6. DOM(Document Object Model) (0) | 2022.02.18 |
| 5. 숫자/문자/날짜 다루기 (0) | 2022.02.18 |
