JavaScript/JavaScript
JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용
꿈다루
2020. 5. 8. 16:42
요소의 생성 및 삭제
1) 요소의 생성
| 메서드 | 설명 |
| createElement() | createElement("div")이면 div 요소를 생성 |
| createTextNode() | createTextNode("자바스크립트")이면 "자바스크립트" 텍스트 노드를 생성 |
| appendChild() | 요소 A.appendChild(child)일 때 child 요소의 '요소A'의 자식 요소로 만들어 줌 |
ex) 요소의 생성
<body>
<button id="bt">요소 생성</button>
</body>
<script>
window.onload = function () {
var bt = document.getElementById("bt");
bt.onclick = createNode;
function createNode() {
var div = document.createElement("div");
var txt = document.createTextNode("div 요소가 생성 되었습니다.");
div.appendChild(txt);
document.body.appendChild(div);
}
};
</script>
| 메서드 | 설명 |
| setAttribute(속성, 값) | 요소의 속성을 설정 |
| getAttribute(속성) | 요소의 속성값을 반환 |
| removeAttribute(속성) | 요소의 속성을 제거 |
ex) 요소의 속성(attribute) 추가
<body>
<button id="bt">요소 생성</button>
<button id="del">속성 제거</button>
</body>
<script>
window.onload = function () {
var bt = document.getElementById("bt");
var del = document.getElementById("del");
function createNode() {
var div = document.createElement("div");
var a = document.createElement("a");
var txt = document.createTextNode("윤제니");
a.appendChild(txt);
a.setAttribute("href", "https://jenny-daru.tistory.com/");
a.setAttribute("target", "_blank");
a.setAttribute("title", "새창");
div.append(a);
document.body.appendChild(div);
}
bt.onclick = createNode;
del.onclick = function () {
var divs = document.getElementsByTagName("div");
divs.item(0).firstChild.removeAttribute("title");
//divs[0].firstChild.removeAttribute("title");
};
};
</script>
>> [요소 생성] 버튼을 클릭 시 결과
>> [속성 제거] 버튼을 클릭시 결과
위의 코드에서 버튼 클릭시 첫번째 div의 "title"의 속성을 제거 하는 함수를 실행 하였기 때문에
첫번째 div의 "title"의 속성만 제거됨.
| 속성 | 설명 |
| innerHTML | 문자 방식으로 요소를 생성 |
ex) innerHTML 속성을 이용하여 요소와 속성을 생성
<body>
<button id="bt">요소 생성</button>
<div id="content"></div>
</body>
<script>
window.onload = function () {
var bt = document.getElementById("bt");
var content = document.getElementById("content");
bt.onclick = createNode;
function createNode() {
console.log("asdfa");
content.innerHTML =
"<a href='https://jenny-daru.tistory.com/' target='_blank' title='새창'>윤제니</a>";
}
};
</script>
2) 요소의 삭제
| 메서드 | 설명 |
| removeChild() | 요소A.removeChild(child)일 때 요소A의 자식 child를 제거 |
<body>
<button id="bt">요소 제거</button>
<div id="content">
<a href="https://jenny-daru.tistory.com/" target="_blank" title="새창">윤제니</a>
</div>
</body>
<script>
window.onload = function () {
var bt = document.getElementById("bt");
var content = document.getElementById("content");
bt.onclick = function () {
content.removeChild(content.firstChild);
};
};
</script>
>> 기본 화면
>> [요소 제거] 버튼 클릭 시 결과
JavaScript의 스타일 적용
자바스크립트 스타일 형식
| 요소.style.속성="속성값" |
- 자바스크립트의 스타일 속성과 CSS의 기본 속성 형식은 같지만 속성에 대한 개별 속성은 다르다.
- ex) 'border-color'의 경우 => 자바스크립트 스타일 속성에서는 '-'를 사용할 수 없어 'borderColor'와 같이 카멜 기법 사용
| CSS | 자바스크립트 스타일 |
| color | color |
| background-color | backgroundColor |
| border-bottom-width | borderBottomWidth |
ex) content1과 content2
<p id="content1">내용1</p>
<p id="content2">내용2</p>
>> content1의 style 속성
<style>
#content1 {
width: 200px;
height: 200px;
border: 2px solid red;
border-bottom-width: 4px;
}
</style>
>> content2의 style 속성은 자바스크립트로 적용
<script>
window.onload = function () {
var content = document.getElementById("content2");
content.style.width = "200px";
content.style.height = "200px";
content.style.border = "1px solid blue";
content.style.borderBottomWidth = "4px";
};
</script>
>> 결과
