요소 생성 메서드
document.createElement(tagName)
: 태그 이름을 사용해 새로운 요소 생성
let div = document.createElement('div')
document.createTextNode(value)
: 새로운 텍스트 노드 생성
let textNode = document.createTextNode('안녕하세요.');
element.cloneNode(deep)
: 요소 복제
- deep==true일 경우, 모든 자손 요소도 복제
삽입 메서드
- 임의의 노드 목록이나 문자열을 넘겨줄 수 있다.
- 문자열을 넘겨주면 자동으로 텍스트 노드가 만들어진다.
node.append(노드나 문자열)
: node 끝에 삽입
node.prepend(노드나 문자열)
: node 맨 앞에 삽입
node.before(노드나 문자열)
: node 이전에 삽입
node.after(노드나 문자열)
: node 다음에 삽입
node.replaceWith(노드나 문자열)
: node를 대체
node.remove()
: node를 제거
See the Pen 1 by nadia kwon (@nadia-kwon) on CodePen.
특정 위치에 삽입
elem.insertAdjacentHTML(where, html): HTML 문자열을 그대로 삽입
elem.insertAdjacentText(where, html): text를 문자 그대로 삽입
elem.insertAdjacentElement(where, html): 요소 삽입
- beforebegin: elem 바로 앞에 삽입 (before)
- afterbegin: elem 안쪽 첫 번째 삽입 (first)
- beforeend: elem 안쪽 마지막 삽입 (last)
- afterend: elem 바깥쪽 삽입 (after)
See the Pen 2 by nadia kwon (@nadia-kwon) on CodePen.
구식 메서드
- parent.appendChild(node)
- parent.insertBefore(node, nextSibling)
- parent.removeChild(node)
- parent.replaceChild(newElement, node)
클래스 DOM 프로퍼티
className
: 클래스 전체를 문자열 형태로 반환해주는 프로퍼티
- 클래스 전체를 관리할 때 유용
classList
: 클래스 하나를 관리할 수 있게 해주는 메서드
- 개별 클래스를 조작할 때 유용
- classList는 이터러블(iterable) 객체이기 때문에 for..of를 사용해 클래스를 나열할 수 있다.
- elem.classList.add/remove("class")
: class를 추가하거나 제거 - elem.classList.toggle("class")
: class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가 - elem.classList.contains("class")
: class 존재 여부에 따라 true/false를 반환클래스 하나만 조작하게 해주는 메서드인 add / remove / toggle가 있다.
classList 메서드
- elem.classList.add/remove("class")
<body class="main page">
<script>
// 클래스 추가
document.body.classList.add('article');
alert(document.body.className); // main page article
</script>
</body>
요소의 스타일
element.style
: 속성 "style 속성에 쓰인 값에 대응되는 객체
- background-color 👉 elem.style.backgroundColor
- z-index 👉 elem.style.zIndex
- border-left-width 👉 elem.style.borderLeftWidth
document.body.style.backgroundColor = prompt('배경을 무슨 색으로 바꿀까?', 'green');
CSS 변경하기
style.cssText
: 문자열을 사용해 전체 스타일을 설정
<div id="div">버튼</div>
<script>
// cssText를 사용하면 'important' 같은 규칙도 설정할 수 있다.
div.style.cssText=`color: red !important;
background-color: yellow;
width: 100px;
text-align: center;
`;
alert(div.style.cssText);
</script>
getComputedStyle(element, [위치 요소])
: HTML 스타일의 정보를 가져온다.
- JavaScript에서 DOM 요소의 현재 스타일 값을 가져오기 위해 사용되는 메서드
- 스타일 정보가 들어 있는 (전체 CSS 클래스 정보도 담긴) 객체 반환
- 프로퍼티 이름 전체( paddingLeft, marginTop, borderTopWidth 등)를 정확히 알고 있어야 한다❗
- 읽기 전용 메서드
- style 프로퍼티는 "style" 속성의 값을 읽을 때만 사용할 수 있다. CSS 종속(CSS cascade)값을 다루지 못한다.
👉 elem.style만으로는 CSS 클래스를 사용해 적용한 스타일을 읽을 수 없다 ⛔
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// 이제 마진과 색 정보를 얻을 수 있다.
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>function getStyle(node, prop) {
if (typeof node === 'string') node = document.querySelector(node);
if (typeof prop !== 'string') throw new Error('getStyle 함수의 두 번째 인수는 문자 타입 이어야 합니다.');
return getComputedStyle(node)[prop]
}
const h1FontSize = getStyle('.first', 'fontSize')
console.log(h1FontSize); // 32px
getStyle('.second', 'border');
// '0px none rgb(255, 192, 203)'
문서 수정하기
ko.javascript.info
스타일과 클래스
ko.javascript.info