(2024 02 26) html,css,js 7일차
html 에서 자바스크립트를 사용하기 위해서는 객체로 만들어야 한다
문서 객체 선택,조작
1개선택
document.getElementByld(아이디)
document.querySelector(선택자)
여러개 선택
document.getElementByName(이름)
document.getElementByClassName(클래스)
document.querySelectorAll(선택자) => 배열로 값 저장 한다
<script>
window.onload = function() {
let header = document.getElementById('header'); => header 이라는 아이디를를 객체 선택한다
header.style.color='orange';
header.style.backgroundColor='red';
header.innerHTML='From Javascript'; //h1 에 이값 집어 넣기
let head=document.querySelector('h1'); =>h1이라는 테그를 선택한다
head.style.color='orange';
head.style.backgroundColor='red';
head.innerHTML='head'; //h1 에 이값 집어 넣기
}
</script>
<body>
<h1>header</h1>
<h1 id="header">header</h1>
<h1>header</h1>
<h1>header</h1>
</body>
결과
header.style.color='orange';
이코드를 보면 header 객체로 선언한걸 .style 속성을 변경하여 글자 색을 변경할수 있다 이게 스타일 조작이라 한다
글자 조작
textContent => 순수 텍스트 형식으로 가져오기 (글자 그자체를 집어넣는다)
innerHTML => HTML 태그를 반영해 가져오기 (태그도 적용해준다 \)
<script>
window.onload = function() {
let output='';
let aa=document.getElementById('aa');
let bb=document.getElementById('bb');
for (let i=0; i<10; i++) {
output+='<h1>header-'+i+'</h1>';
}
// document.body.textContent=output;
aa.textContent=output;
//document.body.innerHTML=output;
bb.innerHTML=output;
};
</script>
<body>
<div id="aa"></div>
<div id="bb"></div>
</body>
속성 조작
setAttribute(속성 이름,속성 값) 속성 지정
getAttribute(속성 이름) 속성 추출
<script>
window.onload = function () {
//속성 선언
let image=document.getElementById('image');
//속성 변경
image.width=300;
image.height=200;
//속성 지정
document.body.setAttribute('data-coustom','value');
//속성 추출
let data=document.body.getAttribute('data-coustom'); => 경고문으로 value 라는 값이 나타난다.
alert(data)
let clock=document.getElementById('clock');
//재사용 하는 함수 setInterval(내용,몇초후 재사용)
setInterval (function () {
let now = new Date();
clock.innerHTML=now.toString();
}, 500)
}
</script>
<body>
<img id="image">
<h1 id="clock"></h1>
</body>
이벤트 연결
<script>
function buttonClick(){
alert('click');
}
window.onload = function () {
let button = document.getElementById('button');
//이벤트 연결
button.onclick=function() {
alert('click');
};
}
</script>
</head>
<body>
<button onclick="buttonClick()">버튼1</button>
<button onclick="alert('click')">버튼2</button>
<button id="button">버튼3</button>
</body>
버튼1은 script 태그에 인라인 이벤트 모델 사용한 방법
버튼 2는 인라인 이벤트 모델 사용한 방법
버튼 3은 고전 이벤트 모델이다.
이벤트 삭제
<script>
window.onload = function () {
//객체를 선택합니다
let button = document.getElementById('button');
//이벤트를 연결한다
button.onclick = function() {
//이벤트를 제거한다
return false;
}
};
</script>
</head>
<body>
</body>
원래 하이퍼 링크를 클릭하면 그 사이트로 이동 되어야 하지만 return false 로 인해 이벤트가 제거 되었다
반응형
'html,css,js 공부' 카테고리의 다른 글
| (2024 02 28) html,css,js 9일차 (0) | 2024.02.28 |
|---|---|
| (2024 02 27) html,css,js 8일차 (0) | 2024.02.28 |
| 카카오 로그인 창 (0) | 2024.02.26 |
| (2024 02 23) js 6일차 (0) | 2024.02.24 |
| 반응형 웹 만들어보기 (0) | 2024.02.21 |