DOMContentLoaded
웹브라우저가 문서 객체(html)를 모두 읽고 나서 실행하는 이벤트
body태그가 생성되기 이전는 head태그 안에 script태그가 작동되지 않는데,
javascript의 실행 순서상(위->아래) script문서가 먼저 읽히기 때문에 body태그에 있는 요소에 접근하지 못함
DOMContentLoaded는 body태그를 모두읽고 나서 script를 실행하라는 의미의이벤트이다
문서객체가져오기 querySelector
querySelecor : 선택한 요소를 하나만 가져온다
<script>
document.addEventListener('DOMContentLoaded',()=>{
const header = document.querySelector('h1')
header.textContent = 'HEADERS ADD!!!!'
header.style.color = 'tomato'
header.style.backgroundColor = 'black'
header.style.padding = '20px'
})
</script>
<body>
<h1></h1>
</body>
javascript에서 CSS style을 추가한 결과
문서객체가져오기 querySelectorAll
querySelecorAll : 문서 객체 여러개를 배열로 읽어들이는 함수이다
내부의 요소에 접근하고 활용하려면 반복문을 돌려서 출력해야 한다
일반적으로 forEach() 메소드를 많이 사용한다
<script>
document.addEventListener('DOMContentLoaded',()=>{
const headers = document.querySelectorAll('h2')
headers.forEach((header)=>{
header.textContent = 'HEADERS h2 tag ADD!!!!'
header.style.color = 'white'
header.style.backgroundColor = 'tomato'
header.style.padding = '20px'
})
})
</script>
<body>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
<h2></h2>
</body>
javascript에서 CSS style을 추가한 결과
'개발공부_Blog > JavaScript' 카테고리의 다른 글
| javascript - setAttribute / getAttribute메소드 (0) | 2021.12.19 |
|---|---|
| javascript - .textContent / .innerHTML (0) | 2021.12.19 |
| javascript - 객체속성확인 (0) | 2021.12.18 |
| JavaScript - Math.random() (0) | 2021.12.18 |
| JavaScript - String객체 : split() (0) | 2021.12.18 |
댓글