<script>
태그를 이용한다.<script src ='myScriptFile.js'></script>
// HTML 파일과 같은 디렉토리에 존재하는 myScriptFile.js를 불러온다.
<script>
요소를 만나면, 웹 브라우저는 <scirpt>
요소를 먼저 실행한다.<script>
요소는 등장과 함께 실행된다)<script>
태그 추가하는 방법 2가지 1.<head>
안쪽에 <script>
추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></scirpt>
</head>
<body>
</body>
</html>
2.<body>
내의 최하단에 <script>
추가하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!-- script 요소 삽입 위치 -->
<script src="myScirptFile.js"></script>
</body>
</html>
<script>
의 좋은 위치위와 같은 상황을 막기 위해 script 태그는 body 태그 최하단에 위치하는 게 좋다.
document
객체에 구현되어 있다.document
객체를 조회할 수 있다. document.body.children
console.log(document.body)
console.dir(document.body)
console.dir
이 유용하다console.dir
은 console.log
와 달리 DOM을 객체의 모습으로 출력한다.
document.body
로부터 요소를 찾아가는 일은 번거로우므로 변수 선언을 통해 정보를 저장해두면 주소를 참조하므로 편리하게 접근이 가능하다.parentElement
프로퍼티는 부모요소 '요소 노드'를 반환하는 반면, parentNode
프로퍼티는 '종류의 상관없이 부모 노드'를 반환한다.parentElement
은 null을 반환하지만, parentNode
는 해당 Node를 반환한다.parentNode
를 사용하고 element만 필요한 경우라면 parentNode
를 사용할 필요가 없다.document 객체의 createElement 메소드를 이용하여 div element를 만든다.
document.createElement('div')
DOM을 조작하기 위해서 변수를 선언하고 작업의 결과를 변수에 할당한다.
화면에 어떤 변화도 나타나지 않는다. 그 이유는?
createElement 메소드로 새성된 엘리먼트는 공중에 떠있는 상태이다.
공중에 더 있는 엘리먼트를 확인하기 위해서는 APPEND를 해야한다
append
메소드를 사용해서, 변수 tweetDiv
를 body
에 넣기
document.body.append(tweetDiv)
append
메소드를 이용하여 container
의 자식요소로 tweetDiv
추가
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
querySelector
의 첫 번째 인자로 셀렉터(Selector)를 전달하여 확인 할 수 있다. const onTweet = document.querySelector('.tweet')
querySelectorAll
을 사용 const tweets = document.querySelectorAll('.tweet')
querySelector
와 비슷한 역할을 하는 오래된 방식
만약 이번 버전의 브라우저(인터넷 익스플로러) 호환성을 신경 써야한다면, 이런 옛날 방식을 사용해야 할 수도 있다.
const getOneTweet = document.getElementById('container')
const queryOneTweet = document.querySelector('#container')
console.log(getOneTweet === queryOneTweet) // true
class
를 추가한다.
setattribute
메소드 이용
const container = document.quertSeletor('#container');
while (container.firstChild) {
container.removeChild(container.firstChild);
}
const container = document.querySeletor('#container');
while (container.children.length > 1) {
container.removeChild(container.lashChild);
const tweet = document.querySeletorAll('.tweet')
tweet.forEach(function(tweet){
tweet.remove();
})
// or
const tweet = document.querySeletorAll('.tweet')
for (let tweet of tweet){
tweet.remove()
}
doucment.querySeletor('#container').innerHTML = '';