- create, update
// 1. 요소 만들기
const oneDiv = document.createElement('div');
console.log(oneDiv) // <div></div>
// 2. 요소 안에 text 넣기
oneDiv.textContent = 'dev';
console.log(oneDiv) // <div>dev</div>
// 3. 요소에 클래스 넣기
oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>
// class를 지우고 싶을 때
oneDiv.classList.remove('tweet')
// 4. 다른 요소에 붙이기(트리구조)
const container = document.querySelector('#container')
container.append(oneDiv)
- 추가적인 속성(attribute) 추가할 때 사용하는 setAttribute
(출처 : https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_setattribute1)
<!DOCTYPE html>
<html>
<style>
.democlass {
color: red;
}
</style>
<body>
<h1 id="myH1">The Element Object</h1>
<h2>The setAttribute() Method</h2>
<p>Click "Add Class" to add a class attribute to the h1 element:</p>
<button onclick="myFunction()">Add Class</button>
<script>
function myFunction() {
document.getElementById("myH1").setAttribute("class", "democlass");
}
</script>
</body>
</html>
-
READ 는 querySeletor 페이지 참조
(https://velog.io/@nara20210617/getElementById-querySeletor의-차이) -
DELETE
자식 요소가 담고 있는 문자열을 비교해 "Tweet List"만 남기거나, 새로운 변수를 생성하고 Tweet List를 할당해뒀다가 반복문이 끝난 뒤에 새롭게 추가할 수도 있다.
그 외의 경우를 아래에서 소개한다.
// 1. remone
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.
// 2. innerHTML
document.querySelector('#container').innerHTML = '';
// innerHTML은 보안상 문제가 있으므로 가능하면 사용하지 않는다
// 3. removeChild
// container의 child를 모두 지우고 싶은 경우
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
// 0번째 요소인 child를 하나만 남기고 싶은 경우
const container = document.querySelector('#container');
while (container.children.length > 1) {
container.removeChild(container.lastChild);
}
// 클래스 이름이 tweet인 요소만 골라서 삭제하고 싶은 경우
const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
tweet.remove();
})
// or
for (let tweet of tweets){
tweet.remove()
}
web