글자 조작
- textContent
- 문서 객체 내부 글자를 순수한 텍스트 형식으로 설정한다.
- innerHTML
- 문서 객체 내부 글자를 html 형식으로 반영하여 설정한다.'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
let data = "";
data+= "<h1>";
data+= "Hello";
data+= "</h1>";
document.querySelector("#output").textContent = data;
document.querySelector("#output2").innerHTML = data;
}
</script>
</head>
<body>
<div id="output"></div>
<div id="output2"></div>
</body>
</html>
- 설정하고자 하는 글자가 html 형식이 아닐 떈느 textContent 나 innerHTML 의 차이가 없다.
스타일 조작
style.속성명 = 값;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let arr = document.querySelectorAll(".member");
//arr.style.background="pink"; (X)
for(i = 0; i<arr.length;i++){
arr[i].style.background="pink";
}
//일일히 반복문을 순회하면서 설정해야하니 번거롭다.
//손쉽게 하기 위해 jquery, react, VueJS등을 사용한다.
</script>
</head>
<body>
</body>
</html>
속성 조작
- setAttribute("속성이름", 값); <-- 속성을 변경하기
- getAttribute("속성이름") <-- 속성값 읽어오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
let player = document.querySelector("#player");
player.setAttribute("src", "tencm.jpg");
player.setAttribute("width", "200px");
let now_src = document.querySelector("#now").getAttribute("src");
alert(now_src);
}
</script>
</head>
<body>
<img id= "player" src="" alt="10cm 가수의 사진">
<hr>
<img id="now" src="sun.png" alt="">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
let player = document.querySelector("#player");
//이미 태그에 정의된 src 속성같은건 .으로 접근할 수도 있다.
//즉, html 태그가 원래부터 갖고있는 속성일 때만 가능하다.
//원래부터 갖고 있는 속성이 아닐 때는 이렇게 사용할 수 없다.
//때로는 html 태그가 원래부터 갖고있는 속성이 아닌데 프로그램의 처리를 위하여 임의의 속성을 부여할 수 있다.
//그 때에는 setAttribute(), getAttribute() 를 통해서만 설정하고 읽어올 수 있다.
player.src = "tencm.jpg";
player.setAttribute("width", "200px");
let now_src = document.querySelector("#now").src;
alert(now_src);
}
</script>
</head>
<body>
<img id= "player" src="" alt="10cm 가수의 사진">
<hr>
<img id="now" src="sun.png" alt="">
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width:100px;
height:100px;
margin:10px;
background:orange;
}
</style>
<script>
window.onload = function(){
let divs = document.querySelectorAll("div");
for(let i = 0; i< divs.length; i++){
divs[i].setAttribute("idx", i);
//divs[i].idx = i; (X)
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>