728x90
SMALL
순회하며 전체수정하기(콘솔창에서)
const boxes = document.querySelectorAll('.box')
undefined
boxes
NodeList(3) [div.box.b1, div.box.b2, div.box.b3]
for(item of boxes){
item.style.backgroundColor = 'red'
}
"red"
for(item of boxes){
item.style.border = '5px solid black'
}
"5px solid black"
<!DOCTYPE html>
<html>
<head>
<title>브라우저 제어하기</title>
</head>
<body>
<ul id = "root">
<li>1뎁스 =1</li>
<li>1뎁스 =2</li>
<li>1뎁스 =3</li>
<li>1뎁스 =4</li>
<ul>
<li>2뎁스-1</li>
<li>2뎁스-2</li>
<ul>
<li>3뎁스-1</li>
<li>3뎁스-2</li>
<li>3뎁스-3</li>
<ul>
<li>4뎁스 -1</li>
<li>4뎁스 -2</li>
<li>4뎁스 -3</li>
</ul>
</ul>
</ul>
</ul>
<li>1뎁스-5</li>
<ul>
<li>2뎁스</li>
</ul>
</body>
</html>
root
<ul id="root">…</ul>
root.childNodes
NodeList(11) [text, li, text, li, text, li, text, li, text, ul, text]0: text1: li2: text3: li4: text5: li6: text7: li8: text9: ul10: textlength: 11__proto__: NodeList
root.children
HTMLCollection(5) [li, li, li, li, ul]
innerText : 텍스트만
innerHTML : 태그
<!DOCTYPE html>
<html>
<head>
<title>브라우저 제어하기</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.2/purify.min.js" integrity="sha512-T6jx0SL5artICbQxeQCg3iToWGEuWM6P2XjNxP1vMI6fNtgIb3dnVD5gpd/pkQKoMfi1ygq5ezv/Z2VB3lLGtw==" crossorigin="anonymous"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<script>
function handleClick() {
alert('클릭했음')
}
</script>
<div ondblclick="handleClick()" class="box">._.</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>브라우저 제어하기</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.2/purify.min.js" integrity="sha512-T6jx0SL5artICbQxeQCg3iToWGEuWM6P2XjNxP1vMI6fNtgIb3dnVD5gpd/pkQKoMfi1ygq5ezv/Z2VB3lLGtw==" crossorigin="anonymous"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="boxbox" class="box">._.</div>
<script>
const box = document.querySelector('#boxbox')
box.onclick = () => {
alert('triggered')
}
</script>
</body>
</html>
- 박스움직이기
<!DOCTYPE html>
<html>
<head>
<title>브라우저 제어하기</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.2/purify.min.js" integrity="sha512-T6jx0SL5artICbQxeQCg3iToWGEuWM6P2XjNxP1vMI6fNtgIb3dnVD5gpd/pkQKoMfi1ygq5ezv/Z2VB3lLGtw==" crossorigin="anonymous"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="boxbox" class="box">._.</div>
<script>
const box = document.querySelector('#boxbox')
let x = 0
let y = 0
document.body.addEventListener('keydown', e => {
switch(e.key) {
case 'ArrowUp':
y -= 5
break;
case 'ArrowDown':
y += 5
break;
case 'ArrowLeft':
x -= 5
break;
case 'ArrowRight':
x += 5
break;
}
box.style.transform = `translate3d(${x}px, ${y}px, 0)`
})
</script>
</body>
</html>
728x90
LIST
'Front > Html, css,jsp' 카테고리의 다른 글
| 20201118 회원가입창에 -또는- 구현하기 (0) | 2020.11.19 |
|---|---|
| 20201118 newneek회원가입창 따라만들어보기 (0) | 2020.11.18 |
| 20201111_34 flex (0) | 2020.11.11 |
| 20201111_34 레이아웃 실습 (0) | 2020.11.11 |
| 20201111_ 34 사각형 (0) | 2020.11.11 |
댓글