노드 조작
document 객체의 속성이나 메서드로 DOM의 노드를 선택하고 나면 선택한 노드에 여러 조작 가능
콘텐츠 조작하기
| 속성 | 설명 |
|---|---|
| textContent | 요소 노드의 모든 텍스트에 접근 |
| innerText | 요소 노드의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근 |
| innerHTML | 요소 노드의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근 |
ex)
<p id = "title">Hello, <span style="display:none;">Javascript!</span></p>document.getElementById("title").textContent;
document.getElementById("title").innerText;
docuemnt.getElementById("title").innerHTML;
Hello,Javascript!
Hello,
Hello, Hello, <span=style = "display:none;">JavaScript! </span>조작시 접근한 노드의 콘텐츠를 가져올 뿐아니라 속성에 값 할당 시 각 노드의 콘텐츠를 바꿀수 있음
<p id="textContent"></p>
<p id="innerText"></p>
<p id="innerHTML"></p>
<script>
document.querySelector("#textContent").textcontent = '<strong>textContent</strong> 속성 '
document.querySelector("#innerText").innerText = '<strong>innerText</strong> 속성 '
document.querySelector("#innerHTML").innerHTML = '<strong>innerHTML</strong> 속성 '
</script>
스타일 조작하기
선택된 노드의 타입이 요소 노드라면 style 속성으로 요소에 스타일(CSS) 지정 가능
<노드> .style. <css 속성명> = < 속성 값>;ex)
<p id="text">text</p>
<script>
const pE1 = document.querySelector("p"); // 노드 선택하기
pE1.style.color = "red";
</script>querySelector()로 스타일을 조작하고 싶은 노드 선택 후 , 선택한 노드의 조작하고 싶은 CSS 속성명 및 속성값을 할당
-> CSS 속성 중 background-color 속성과 같이 속성명에 대시(-)가 있는 속성은 js에서 뺄셈 연산자로 인식함
-> 카멜 표기법으로 변경해서 작성해야 함
<p id="text">text</p>
<script>
const pE1 = document.querySelector("p"); // 노드 선택
pE1.style.backgroundColor = "red";
pE1.style.fontSize = "20px";
pE1.style.color = "#fffff";
</script>클래스 속성 조작하기
<body>
<p>text</p>
<script>
const pE1 = document.querySelector("p");
pE1.style.color = "red";
pE1.style.fontSize = "20px";
pE1.style.fontWeight = "bold";
pE1.style.lingHeight = "1";
</script>
</body>style 속성으로 스타일 조작 시 위처럼 하나하나 적어야함
-> 지정할 스타일이 명확하다면 class 속성을 추가하고 클래스 선택자로 지정하는 것이 깔끔
<style>
.active{
color:red;
font-size:20px;
font-weight:bold;
line-height:1;
}
</style>
<body>
<p class="active">text </p>
</body>자바 스크립트로도 class 속성을 조작해 스타일 적용 가능
-> 선택한 노드에 class 속성을 지정할 때는 classList 속성의 add(), remove(), toggle() 메서드 사용
<노드>.classList.add("class 속성 값"); // 추가
<노드>.classList.remove("class 속성 값"); // 삭제
<노드>.classList.toggle("class 속성 값"); // 추가와 삭제 반복ex)
<style>
.red-color{
color:red;
}
.fz20{
font-size:20px;
}
</style>
<p id="text"> text </p>
<script>
const pE1 = document.querySelector("#text"); // 노드 선택
pE1.classList.add("red-color");
pE1.classList.add("fz20");
</script>
실행 시 <p id="text" class = "red-color fz20">text</p>와 같이 나타남class 속성을 한번에 추가할려는 경우
<script>
const pE1 = document.querySelector("#text");
pE1.classList.add("red-color", "fz20");
</script>적용된 class 속성값을 삭제할려는 경우(remove() 메서드 사용)
<p id="text class="red-color fz20">text</p>
<script>
const pE1 = document.querySelector("#text");
pE1.classList.remove("red=color, "fz20");
</script>toggle() 메서드는 add 메서드와 remove() 메서드 반복해서 호출
<p id="text">text<p>
<script>
const pE1 = document.querySelector("#text");
setInterval(function(){ // window 객체 메서드
pE1.classList.toggle("red-color");
}, 1000);
</script>-> 1초마다 빨간색, 검은색으로 바뀜
데이터 속성 조작하기
data-*속성은 HTML5에 추가된 사용자 정의 속성
-> 이는 자바스크립트의 dataset 속성을 사용해 조작 가능
<button data-cnt="10">가방 구매 </button>
<button data-cnt="0"> 신발 구매</button>
<script>
const buttonE1s = document.querySelectorAll("button");
buttonE1s.forEach((e1) =>{
console.log(e1.dataset);
})
</script>
속성 중 data-cnt 속성의 값만 가져오고 싶다면
ex)
<script>
const buttonE1s = document.querySelectorAll("button");
buttonE1s.forEach((e1) => {
console.log(e1.dataset.cnt);
})
</script>
10
0data-cnt 속성의 값을 바꿀수도 있음
<script>
const buttonE1s = document.querySelectorAll("button");
buttonE1s.forEach((e1) => {
e1.dataset.cnt = 50;
})
</script>메서드로 속성 조작하기
위에 내용까지는 document의 객체의 속성으로 HTML 요소에 접근해 일부 속성을 조작하여음
-> 속성 조작 메서드 사용 시 모든 속성을 전체적으로 조작 가능
| 메서드 형식 | 설명 |
|---|---|
| < 노드 >.getAttribute("속성명"); | 속성값을 가져옴 |
| < 노드 >.setAttribute("속성명", "속성값"); | 속성값을 설정 |
| < 노드 >.removeAttribute("속성명"); | 속성을 삭제 |
getAttribute() 메서드는 선택된 요소 노드의 속성값을 가져오고 싶을 때 사용
<a href = "https://www.gilbut.co.kr"> 길벗</a>
<script>
const aE1 = document.querySelector("a");
const href = aE1.getAttribute("href");
console.log(href);
</script>
setAttribute() 메서드는 속성값을 새로 설정하고 싶을 때 사용
<a href = "https://www.gilbut.co.kr"> 길벗</a>
<script>
const aE1 = document.querySelector("a");
const href = aE1.getAttribute("href");
aE1.setAttribute("href", "https://www.naver.com");
aE1.innerText = "네이버";
</script>
위 코드에서 네이버를 새창에 열리게 하고 싶다면
aE1.setAttribute("target", "_blank");getAttribute와 setAttribute 메서드는 모든 속성의 상위 메서드라 classList 속성이나 dataset 속성으로 하는 조작 전부 가능!!
<style>
.red-color{
color:red;
}
</style>
<a href="https://www.naver.com" data-link="네이버">네이버</a>
<script>
const aE1 = document.querySelector("a");
aE1.setAttribute("data-link", "이지톡");
aE1.setAttribute("class", "red-color");
</script>removeAttribute()메서드를 통해 노드의 속성을 제거할수도 있음
ClassList 속성과 setAttribute() 메서드 차이
classList 속성으로 Class 속성 값을 추가 하거나 삭제하면, 기존 요소가 가지고 있던 class 속성값을 보존하면서 추가하거나 삭제
<a href ="#" class = "fz20">link</a>
<script>
const aE1 = document.querySelector("a");
// a 태그의 기존 class 속성 값을 보존하면서 red-color 추가
aE1.classList.add("red-color");
</script>
실행결과
<a href="#" class="fz20 red-color">link </a><a href ="#" class = "fz20">link</a>
<script>
const aE1 = document.querySelector("a");
// a 태그의 기존 class 속성 값을 보존하지 않고 red-color 추가
aE1.classList.add("red-color");
</script>
실행결과
<a href="%" class="red-color">link </a>remove(), removeAttribute() 메서드
-> remove() 메서드는 기존 속성을 보존하면서 매개변수로 전달된 속성만 삭제하지만, removeAttribute() 메서드는 속성 자체를 삭제
