목차
- 노드 생성/복제 메소드
1-1. document.createElement(tag)
1-2. document.createTextNode(value)
1-3. element.cloneNode(deep)
1-4. 텍스트가 있는 노드 생성 예시
1-5. 텍스트가 없는 노드 생성 예시
1-6. 노드 복제 예시 cloneNode(deep) - 노드 삽입 메소드 append/prepend, before/after
2-1. 요소 위치 바꾸기 잘라내기 → 붙여넣기와 같은 효과 - 노드 대체/삭제 메소드
3-1. 노드 대체 예시 replaceWith(노드 또는 텍스트 문자열) *인자에 HTML 문자열 취급X
3-2. 노드 삭제 예시 remove() - 추가 HTML 삽입 메소드
4-1. 노드 대체 수정 insertAdjacentHTML(where, html) *인자에 HTML 문자열 취급O - 문서 스타일 지정
5-1. style 객체 이용한 수정 element.style.속성명
5-2. class 이용한 수정 className, classList
1. 노드 생성/복제 메소드
| document .createElement(태그명) |
요소 노드 생성 |
| document .createTextNode(내용) |
텍스트 노드 생성 |
| element .cloneNode(deep) |
요소 복제 ※ deep == true일 경우 자손 요소 또한 복제 |
1-1. document.createElement(tag)
let newList1 = document.createElement("li");
let newList2 = document.createElement("li");- 태그명 통해 새로운 요소를 생성한다.
1-2. document.createTextNode(value)
let text = document.createTextNode("새로운 목록1");
newList1.append(text); //<li>새로운 목록1</li>
newList2.innerHTML = "새로운 목록2";- 텍스트 노드를 만든다.
사실상 사용 빈도는 높지 않다. - 예시에서는 ① createTextNode(value) 수행 후 → 삽입 메소드 실시하는 방법과 ② innerHTML 통한 삽입 두 가지를 다루고 있다.
1-3. element.cloneNode(deep)
- 노드 요소를 복제한다. deep = true로 명시된 경우 모든 자손 요소 또한 복사하게 된다.
1-4. 텍스트가 있는 노드 생성 예시
<body>
<button onclick="test();">실행확인</button>
<ul id="list">
<li>기존 목록1</li>
<li>기존 목록2</li>
<li>기존 목록3</li>
</ul>
<script>
function test() {
let list = document.getElementById("list");
list.before("before");
list.after("after");
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.append(newList1);
list.prepend(newList2);
}
</script>
</body>- 버튼을 클릭하면 함수 실행으로 이어지도록 <button> 시작태그에 onclick 이벤트를 지정한다.
id를 통해 직접 접근하는 방식은 오류 발생 가능성에 대비하여 지양하고자 하므로, 여기서도 요소 접근 방식을 채택한다. let list 변수에 #list 요소를 담는다: let list = document.getElementById("list");
❗ 노드 생성은 말처럼 생성만 한 상태를 말한다. 노드 삽입 메소드 통해 별도 삽입 과정을 수행해야 한다.
before/after는 노드 이전/이후에 삽입이 치러진다. 버튼을 클릭할 때마다 지정한 텍스트가 계속 추가된 모습을 확인할 수 있다.
이는 스크립트 최하단에 쓰인 append/prepend와 차이를 보인다. 이들은 각각 마지막 항목/첫 항목에 삽입되기 때문이다.
1-5. 텍스트가 없는 노드 생성 예시
<body>
<button onclick="test();">실행확인</button>
<div id="area" class="area"></div>
<script>
function test() {
// img 노드 생성
let imgTest = document.createElement('img');
// 속성 지정
imgTest.src = "logo.jpg";
imgTest.width = "200";
imgTest.height = "100";
document.getElementById('area').append(imgTest);
}
</script>
</body>- 내부문자가 없는 이미지 태그 <img>를 통해 노드 생성한 예시이다.
- 해당 노드가 가질 수 있는 속성들에 대해 별도 지정할 수 있다: src, width, height 등
- 요소 접근 방식으로 삽입할 공간을 지정하고, 노드 삽입 메소드 append 통해 추가한다. append 특성상 버튼 클릭 시마다 마지막 항목 뒤로 가 붙는다: document.getElementById('어디에').append(무엇을);
1-6. 노드 복제 예시 cloneNode(deep)
<body>
<button onclick="test();">실행 확인</button><br>
<ul class="copy">
ul 영역
<li>li 영역</li>
</ul>
<script>
function test() {
let ul = document.querySelector(".copy");
let cloneFalse = ul.cloneNode(false);
let cloneTrue = ul.cloneNode(true);
ul.before(cloneFalse);
ul.after(cloneTrue);
}
</script>
</body>- 클래스명으로 "copy" 선언한 예시이다.
- 요소 검색 메소드 querySelector(선택자) 통해 접근한 데 대해 let ul 변수를 만든다.
- 노드 복제 메소드 cloneNode(deep)는 인자로서 후손 요소들을 모두 복제할지 여부를 전달 받는다. 예시에서는 구분을 위해 각각 (false), (true)를 명시해 변수에 담도록 했다.
- 결과적으로 노드 이전 삽입 메소드인 before에 따라 ul 영역 이전에는 삽입이 일어나지 않고, deep==true 명시된 after 메소드는 ul의 모든 자식 요소인 li를 노드 뒷부분에 추가시킨다.
2. 노드 삽입 메소드 append/prepend, before/after
| node.append(노드 또는 문자열) | (node 내부)끝에 노드 또는 문자열 삽입 |
| node.prepend(노드 또는 문자열) | (node 내부)맨 앞에 노드 또는 문자열 삽입 |
| node.before(노드 또는 문자열) | node 이전에 노드 또는 문자열 삽입 |
| node.after(노드 또는 문자열) | node 이후에 노드 또는 문자열 삽입 |
2-1. 요소 위치 바꾸기 잘라내기 → 붙여넣기와 같은 효과
❗ 모든 노드 삽입 메소드는 자동으로 기존에 있던 노드 삭제 후 → 새로운 곳으로 노드를 옮긴다. 때문에 요소 노드를 다른 곳으로 옮기고자 할 때기존에 있던 노드를 지우거나 하는 별도의 작업이 요구되지 않는다.
<body>
<div class="first">first</div>
<div class="second">second</div>
<button onclick="test();">실행확인</button>
<script>
function test() {
let first = document.querySelector(".first");
let second = document.querySelector(".second");
second.after(first);
}
</script>
</body>- before/after 메소드는 각각 노드 이전/이후에 삽입한다는 특징이 있다.
- 변수 first, second에 담은 두 <div> 요소 위치를 바꾸고자 한다. 이때는 second 뒤에 first를 삽입한다는 뜻에서 다음과 같이 쓸 수 있다: second.after(first);
- 노드 삽입 메소드의 경우 잘라내기 → 붙여넣기 하듯 알아서 삭제하고 옮겨진다. 따라서 사용자로 하여금
원래 있던 노드를 찾아 지우거나 하는 번거로운 작업을 요구하지 않는다.
3. 노드 대체/삭제 메소드
| node.replaceWith(노드 또는 문자열) | node를 노드 또는 문자열로 대체 |
| node.remove() | node 제거 |
3-1. 노드 대체 예시 replaceWith(노드 또는 텍스트 문자열) *인자에 HTML 문자열 취급X
<body>
<button onclick="test();">실행 확인</button>
<script>
function test() {
let img = document.querySelector("img");
if(img != null)
img.replaceWith("<b>이미지가 있던 곳</b>");
}
</script>
</body>- 대체하고자 하는 노드에 대해 조회하고, 이를 변수에 담는다. 예시에서는 <img> 태그 중 첫 번째 요소를 가져왔다. 만약 모든 이미지 요소를 선택하려거든 querySelectorAll(선택자)를 쓸 수 있다.
- 유효성 검사 통해 존재할 경우 대체되도록 한다. 즉 기존값이 null인지 아닌지를 사전에 판단해 적용하는 것이다: if(img != null)
- onclick 이벤트에 선언한 대로, 버튼을 누르자 첫 번째 이미지가 지정한 텍스트로 대체됨을 확인할 수 있다.
- 한편,
글씨를 굵게 처리해줄 것으로 기대했던 <b> 속성은 반영되지 않았다. HTML 태그가 아니라 일반 텍스트 문자열로 읽히고 있기 때문이다. 이처럼 replaceWith 메소드의 인자로서는 (노드 또는 텍스트 문자열)만 취급된다. 이는 아래서 다룰 insertAdjacentHTML과 차이점이기도 하다.
3-2. 노드 삭제 예시 remove()
<body>
<button onclick="test();">맨 앞 이미지 삭제</button>
<script>
function test() {
let img = document.querySelector('img');
if(img != null)
img.remove();
}
</script>
</body>- querySelector 통해 <img> 노드 중 첫 번재 요소를 리턴 받는다.
- 또, 존재할 경우 삭제 진행되도록 조건식을 세운다. 이처럼 if문으로 사전에 컨트롤하지 않을 경우 null로 인한 오류 메시지가 출력된다: if(img != null)
4. 추가 HTML 삽입 메소드
❗ element.insertAdjacentHTML(where, html)에서 where는 element 기준 상대적 위치를 지정하고, html은 문자열을 말한다.
| element.insertAdjacentHTML ('beforebegin', html) |
element 바로 앞에 html 삽입 |
| element.insertAdjacentHTML ('afterbegin', html) |
element 첫 번째 자식 요소 바로 앞에 html 삽입 |
| element.insertAdjacentHTML ('beforeend', html) |
element 마지막 자식 요소 바로 다음에 html 삽입 |
| element.insertAdjacentHTML ('afterend', html) |
element 바로 다음에 html 삽입 |
4-1. 노드 대체 수정 insertAdjacentHTML(where, html) *인자에 HTML 문자열 취급O
<body>
<button onclick="test();">실행확인</button>
<script>
function test() {
let img = document.querySelector("img");
if(img != null) {
img.insertAdjacentHTML('afterend', '<b>이미지가 있던 곳</b>');
img.remove();
}
}
</script>
</body>- 대체하고자 하는 노드를 찾아 변수에 담는다.
- insertAdjacentHTML에 (위치, 문자열) 두 가지 인자를 전달한다.
- 예시에서 설정한 'afterend'는 요소 직후에, 해당 문자열을 삽입하겠다는 의미가 된다. 노드 삽입 메소드인 after와 같은 기능을 한다.
- 첨부된 이미지에서 확인할 수 있듯 insertAdjacentHTML 통해서는 글씨를 굵게 처리하고자 붙인 <b> 태그 역시 정상적으로 읽혔다. 이는 앞서 다룬 노드 대체 메소드 replaceWith(노드 또는 문자열)와 기능상 차이를 보이는 것이다.
5. 문서 스타일 지정
5-1. style 객체 이용한 수정 element.style.속성명
element.style.속성명 = 속성값;
<head>
<style>
.area {
background: lightgray;
border: 1px solid black;
min-height: 200px;
}
.circle {
background: yellow;
width: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<button onclick="test();">style 수정</button>
<div id="area" class="area"></div>
<script>
function test() {
let area = document.querySelector('#area');
area.style.width = '200px';
area.style.backgroundColor = 'yellow';
area.style.borderRadius = '50%';
}
</script>
</body>- 프로퍼티 style은 속성 style에 쓰인 값에 대응되는 객체이다.
- 자바스크립트에서는 식별자 대시(-)를 쓰지 못하기 때문에, 속성명이 CSS에서 사용하던 것과 다르다. 여러 단어를 이어 만든 프로퍼티명은 카멜 표기법을 통해 짓는다.
- 예. background-color → backgroundColor, border-radius → borderRadius
5-2. class 이용한 수정 className, classList
| className | class 속성에 대응하며, 대입 시 클래스 문자열 자체가 변경 |
| classList | 클래스 하나만 조작할 수 있는 add/remove/toggle 메소드가 존재함 |
<head>
<style>
.area {
background: lightgray;
border: 1px solid black;
min-height: 200px;
}
.circle {
background: yellow;
width: 200px;
border-radius: 50%;
}
</style>
</head>
<body>
<button onclick="test();">class 수정</button>
<div id="area" class="area"></div>
<script>
function test() {
let area = document.querySelector('#area');
// area.className = 'circle'; //class="circle"
area.classList.add('circle'); //class="area circle"
}
</script>
</body>- className의 경우 클래스 문자열 자체를 변경하는 특성이 있다. 위 예시에서도 전체 클래스명이 circle로 변경돼
area 클래스로서 가지고 있던 속성이 제거된다. 특히나 min-height 값이 없어 육안상 구별하기 어려운 결과를 낸다: class="circle" - 한편 classList는 기존 클래스에 추가됨을 일컫는다. 여기서도 area, circle 둘 모두를 가리키게 된다: class="area circle"
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] DOM 이벤트 | 이벤트 핸들러 | addEventListener | 버블링 (0) | 2022.02.23 |
|---|---|
| [JavaScript] BOM | window | setInterval | 타이머 메소드 (0) | 2022.02.22 |
| [JavaScript] 주요 노드 프로퍼티 | innerHTML | textContent | value (0) | 2022.02.21 |
| [JavaScript] 요소 검색 메소드 | querySelector | NodeList (0) | 2022.02.21 |
| [JavaScript] DOM | 요소 노드 | 텍스트 노드 | 문서 객체 (1) | 2022.02.20 |
