[BOM(Browser Object Model) : 브라우저 객체 모델]
웹브라우저가 위에서부터 script해석 -> body를 해석 하게 됨.
하지만 body를 먼저 로딩한 후 그에 해당하는 script를 적용하기 위해서
요즘은 window객체에 있는 onload를 활용한다.
<script>
//window객체에 onload를 만듬
//load가 다 끝나면 function실행해라
window.onload = function() {
alert('load complete...')
}
</script>
[DOM(Document Object Model) : 도큐먼트 객체 모델]
body와 관련해서 움직이고 있음
window.onload와 함께 쓰여야 한다.
<script>
window.onload = function() {
//document.body.innerHTML: tag까지나옴
alert('innerHTML : ' + document.body.innerHTML)
//document.body.innerText: tag를 제외한 나머지 요소값만 나오게
alert('innerText : ' + document.body.innerText)
let tags = ''
tags += '<ul>'
tags += '<li>red</li>'
tags += '<li>orange</li>'
tags += '<li>blue</li>'
tags += '</ul>'
// document.body.innerHTML = tags
// document.body.innerText = tags
// 함수 innnerHTML나옴
document.write(tags)
// document.body.innerHTML = document.body.innerHTML + tags
// document.body.innerHTML += tags
// document.body.innerHTML += '<br>'
// document.body.innerText += tags
}
</script>
[DOM과 관련한 함수]
getElementById('id')
querySelector("#id")
querySelectorAll('td')
getElementByTagName('td')
setAttribute
appendChild
createElement
createTextNode
remove
removeChild
[DOM과 관련한 함수 예시1]
getElementById('id')
querySelector("#id")
querySelectorAll('td')
getElementByTagName('td')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload = function() {
//id는 unique: 동일한 id값 가진 것 없음
//'id'라고 써진 id를 찾아서 id에 넣기
var id = document.getElementById('id')
//querySelector: id, class둘다 꺼내올 수 있음
//td태그 같은 것도 가능, 맨처음에 잡히는 거 1개만 꺼내옴
//querySelectorAll(): td태그를 다 뽑아낼때 배열의 형태로 뽑아냄
//#:id , .:class
var id = document.querySelector('#id')
//console.log(id)
id.innerHTML = '아이디'
var password = document.querySelector('.pwd')
password.innerText = '패스워드'
}
</script>
</head>
<body>
<table border="1" style="width:100px; height: 100px">
<tr>
<td id="id">아이디</td>
</tr>
<tr>
<td class="pwd">PASSWORD</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
var tags = document.getElementsByTagName('td')
tags[0].innerHTML = '아이디'
let nodes = document.querySelectorAll('td')
nodes[1].innerText = '패스워드'
}
</script>
</head>
<body>
<table border="1" style="width:100px; height: 100px">
<tr>
<td>ID</td>
</tr>
<tr>
<td>PASSWORD</td>
</tr>
</table>
</body>
</html>[DOM과 관련한 함수 예시2]
setAttribute
appendChild
createElement
createTextNode
이와 같은 구조로 html을 만들었을 때, a태그에 href를 의 내용을 붙이고 싶다
<a> 에서 <a href="http://www.daum.net">으로 변경시
aTag = document.createElement('a')
aTag.setAttribute('href', 'http://www.daum.net ') 로 변경하면 된다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
let tag = document.createElement('h1')
let tagText = document.createTextNode("Hello")
// console.log(tag)
// console.log(tagText)
tag.appendChild(tagText)
document.body.appendChild(tag)
let imgTag = document.createElement('img')
imgTag.src = "https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png"
// console.log(imgTag)
aTag = document.createElement('a')
//aTag.href = 'http://www.daum.net'
aTag.setAttribute('href', 'http://www.daum.net')
aTag.setAttribute('target', '_blank')//새창
//aTag 안쪽 내용에 내용자체를 넣을 때
aTag.appendChild(imgTag)
document.body.appendChild(aTag)
console.log(aTag)
}
// body
// |
// ------------
// | |
// h1 p
// | |
// "hello" a [href, target]
// |
// img [src]
</script>
</head>
<body>
<!-- <h1>Hello</h1>
<img src="https://t1.daumcdn.net/daumtop_chanel/op/20170315064553027.png"> -->
</body>
</html>
[DOM과 관련한 함수 예시3]
remove: 자기포함 지운다
removeChild : 자기포함x, 자식객체만 지운다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
window.onload = function() {
let idTag = document.getElementById('id')
idTag.parentNode.removeChild(idTag)
//idTag.remove()
pwd = document.getElementById('pwd')
// <td id="id" style="color:red; font-size: 20pt; background-color: yellow;">아이디</td>
pwd.style.color = 'red'
pwd.style.fontSize = '20pt'
pwd.style.backgrondColor = 'yellow'
pwd.style['border-style'] = 'dashed'
pwd.style['border-color'] = 'blue'
pwd.style['border-width'] = '3px'
}
</script>
</head>
<body>
<table border="1" style="width:100px; height: 100px">
<tr>
<td id="id">아이디</td>
</tr>
<tr>
<td id="pwd">PASSWORD</td>
</tr>
</table>
</body>
</html>
'' 카테고리의 다른 글
| [javaScript] innerHTML / innerText 차이 (0) | 2021.05.08 |
|---|---|
| [jQuery] html(), text(), attr() 함수 (0) | 2021.05.07 |
| [javaScript] 고전적 javascript 이벤트 모델 / jQuery 이벤트 모델 (0) | 2021.05.06 |
| [javascript] 선언적함수/ 익명함수 (0) | 2021.05.04 |
