노드 조작하기 5가지 실습, tistory 에 정리.
(콘텐츠 조작,스타일 조작,클래스 속성 조작, 데이터 속성 조작,메소드로 속성
조작)
콘텐츠 조작
textContent : 요소 노드의 모든 텍스트 접근.
innerText : 요소 노드 텍스트에서 웹브라우저에서 표시되는 텍스트 접근.
innerHTML : 요소 노드 텍스트에서 HTML에 접근.
<!DOCTYPE html>
<html lang="en">
<body>
<p id="ex">sunrin, <span style="display : none;">highschool</span></p>
<p id="textcontent"></p>
<p id="innerText"></p>
<p id="innerHTMl"></p>
<script>
document.querySelector("#textContent").textContent = '<mark>textContent</mark>';
document.querySelector("#innerText").innerText = '<mark>innerText</mark>';
document.querySelector("#innerHTML").innerHTML = '<mark>innerHTML</mark>';
</script>
</body>
</html>
textContent : 태그가 사라지지 않는다.
innerText : 태그가 사라지지 않는다.
innerHTML : 태그가 사라진다.
스타일 조작
<!DOCTYPE html>
<html lang="en">
<body>
<P id="ex">ex</P>
<script>
const p = document.querySelector("p");
p.style.color = "blue";
</script>
<P id="ex">ex</P>
<script>
const p = document.querySelector("p");
p.style.backgroundColor = "blue";
p.style.color = "#ffffff";
p.style.pontsize = "20px";
</script>
</body>
</html>
style.color는 글자 색만 바꾼다.
style.backgroundColor는 배경의 색을 바꾼다.
style.pontsize는 말그대로 글자의 크기를 바꾼다.
클래스 속성 조작
<노드>.classList.add(“class 속성값”);
<P id="ex">ex</P>
<style>
.blue-color{
color:blue;
}
</style>
<script>
const p = document.querySelector("#ex");
p.classList.add("blue-color")
</script>
속성값 추가한다. 추가해서 색을 파랑색으로 바꾼다.
<노드>.classList.remove(“class 속성값”);
<P id="ex">ex</P>
<script>
const p = document.querySelector("#ex");
p.classList.remove("blue-color")
</script>
속성값 삭제한다. 색을 없앤다.
<노드>.classList.toggle(“class 속성값”);
<P id="ex">ex</P>
<script>
const p = document.querySelector("#ex");
setInterval(function(){
p.classList.toggle("blue-color");
}, 1000)
p.classList.remove("blue-color")
</script>
속성값 추가와 삭제를 반복한다. 파랑색이 됬다가 색이 없어진다.
데이터 속성 조작
<button data-cnt="1">hello</button>
<button data-cnt="2">sunrin</button>
<script>
const buttonEls = document.querySelectorAll("button")
buttonEls.forEach((el) => {
console.log(el.dataset);
})
</script>
<button data-cnt="1">hello</button>
<button data-cnt="2">sunrin</button>
<script>
const buttonEls = document.querySelectorAll("button")
buttonEls.forEach((el) => {
el.dataset.cnt = 100;
})
</script>
이건 p라는 값에 다른 값을 넣어 실행시키는 함수이다.
메소드로 속성 조작
<노드>.getAttribute("속성명");
속성값을 가져온다.
<노드>.setAttribute("속성명", "속성값");
속성값을 설정합니다.
<노드>.removeAttribute("속성명");
속성을 삭제합니다.
<script>
const aEl = document.querySelector("a");
const href = aEl.getAtribute("href");
console.log(href);
</script>
<script>
const aEl = document.querySelector("a");
const href = aEl.getAtribute("href");
aEl.setAtribute("href", "https://www.google.com/");
aEl.innertext = "helloworld";
</script>
네이버를 설정하고 거기서 값을 가져오게 하기.
그리고 값을 구글로 바꾸기.