1. 요소 생성하기
window.onload = function() {
let h1Element = document.createElement("h1");
let textNode = document.createTextNode("Hello");
h1Element.appendChild(textNode);
document.body.appendChild(h1Element);
}
.onload ==> 현재 문서의 body 부분을 읽고 난 후에 JS를 실행하라.
.createElement(tagName) ==> 태그 요소 생성
.createTextNode(text) ==> 텍스트 노드 생성
2. 속성 추가하기
onload = function() {
let img_element = document.createElement("img");
img_element.src = "images/1.jpg";
img_element.width = "200";
img_element.height = "200";
document.body.appendChild(img_element);
//혹은
img_element.setAttribute("src", "images/1.jpg");
img_element.setAttribute("width", "200");
}
요소.속성이름 = "내용";
요소.setAttribute("속성이름", "값");
3. 문서의 요소 찾기
1) getElementById("id명")
예를 들어
<body>
<h1 id="header1"></h1>
</body>
가 있으면
JS에서
let header1 = document.getElementById("header1");
로 제어할 수 있다.
이 때, header1.innerHTML = "바꿀 내용"; 으로 내용을 넣을 수 있다.
2) getElementsByTagName(태그이름)을 이용하는 방법
- 태그이름과 일치하는 요소를 배열로 가져오는 메서드.
<body>
<h1>Header1</h1>
<p>header1 내용</p>
<hr>
<h1>Header2</h1>
<p>header2 내용</p>
</body>
에서 h1들을 가져오는 방법이다.
let headers = document.getElementsByTagName("h1");
for(let i=0; i<headers.length; i++) {
headers[i].innerHTML = "getElementsByTagName()";
}
3) querySelector(선택자)
<body>
<h1 id="header_1">Header1</h1>
<h1 class="header_2">Header2</h1>
</body>
<script type="text/javascript">
onload = function() {
//문서의 요소를 찾는 방법 - 3가지
//3. querySelector(선택자)를 이용하는 방법
//3-1. querySelector(선택자)
// ==> 가장 처음 선택되는 문서의 선택자 요소를 가져오는 메서드.
//3-2. querySelectorAll(선택자)
// ==> 문서의 선택자 요소 전체를 배열로 가져오는 메서드.
let header1 = document.querySelector("#header_1");
let header2 = document.querySelector(".header_2");
header1.innerHTML = "header_1 id를 가진 요소";
header2.innerHTML = "header_2 class를 가진 요소";
}
</script>
4. 요소 삭제하기
<body>
<h1 id = "header_1">Header1</h1>
<h1 id = "header_2">Header2</h1>
</body>
js)
let header2 = document.getElementById("header_2");
document.body.removeChild(header2);
5. 클릭시 이벤트처리
let header = document.getElementById("header");
//이벤트 처리 작업
header.onclick = function() {
alert("글자를 클릭하셨군요!!!");
header.innerHTML = "글자 변경";
}
6. 주기적으로 함수 호출하기
<body>
<div id="target">
<p>여기는 텍스트 영역입니다.....</p>
</div>
<hr>
<input type="button" value="시작" onclick="change_go()">
<input type="button" value="종료" onclick="stop_go()">
</body>
function change_go() {
id = setInterval(flashText, 1000);
}
function flashText() {
let target = document.getElementById("target");
target.style.color = (target.style.color == "red") ? "blue" : "red";
}
function stop_go() {
clearInterval(id);
}
'국기훈련과정 > Web' 카테고리의 다른 글
| 16. JQuery - Event, animation (0) | 2021.10.13 |
|---|---|
| 15. JQuery (0) | 2021.10.08 |
| 13. JS의 DOM_개요 (0) | 2021.10.07 |
| 12. JS의 BOM (0) | 2021.10.06 |
| 11. JS의 객체 (0) | 2021.10.06 |
