HTML DOM
HTML DOM객체 - 각각의 HTML
.속성(property)
id : 아이디
tagName : 태그이름
innerHTML : 태그사이의 값
style : 스타일 객체
children(컬렉션) : [ ][ ][ ][ ][ ]
자식들 태그
ChildrenElementCount : 자식들 개수
onclick : 이벤트
onmouse : 이벤트
~
.메소드
addEventListener() : 새로운 이벤트 리스너 등록
removeEventListener():이벤트 리스너를 제거
appendChild() : 자식들 중에 마지막 뒤에 새로운 자식을 추가
insertBefore() : 특정한 태그의 앞에 새로운 자식을 추가
removeChild() : 자식 삭제
setAttribute() : 속성을 추가
getAttribute() : 속성을 알아내기
querySelector() : css셀렉터와 일치하는 태그를 찾아서 해당 태그 리턴
document 객체 - 문서 전체
. 속성(프로퍼티)
location r/w
domain
cookie
URL
title : 문서의 제목
body : body객체가 있는 주소값을 갖는 프로퍼티
head : head객체가 있는 주소값을 갖는 프로퍼티
activeElement : 문서에 포커스를 받는 객체
documentElement: html객체에 대한 주소값을 갖는 프로퍼티
태그들의 컬렉션 (images links forms ,,)
. 메소드
write() : 브라우저에 출력
getElementById() : 해당 아이디를 가진 태그 찾기
getElementsClassName(): 해당 클래스 이름을 가진 태그들 찾기
getElementsName() : 해당 name을 갖는 태그들 찾기
getElementsByTagName(): 해당 태그들 찾기
addEventListener() :
removeEventListener()
createElement('div') : HTML 태그를 동적으로 생성
removeElement()
open()
close()
. onclick : 사용자가 객체를 클릭할때
. onload : 문서나 이미지의 로딩이 완료되었을 때
<body>
<p id="t1" style="color:blue">이것은 <span>문장입니다ㅇㅅㅇ</span></p>
<form id="t2">
<input type="text">
<input type="button" value="테스트" onclick=f()>
<hr>
</form>
<script type="text/javascript">
function f()
{
let p1 = document.getElementById('t1');
let c1 = p1.firstElementChild;
let c2 = p1.parentElement;
document.write("선택한 태그이름: "+p1.tagName+"<br>");
document.write("첫번째 자식객체: "+c1.tagName+"<br>");
document.write("부모객체: "+c2.tagName+"<br>");
}
</script>
</body>
<title>맛점하셨나요ㅎㅅㅎ</title>
</head>
<body>
<script type="text/javascript">
alert("문서의 제목은..");
document.write("문서의 제목: "+document.title);
</script>
</body>
<body>
<h3>DOM객체 p의 속성, 스타일, 이벤트리스너</h3>
<hr>
< p id="first" style = "color:green; background-color: yellow;" onclick = " this.style.color='teal' " >
오늘은 <span style=' color:red '>금요일입니다.</span>
</p>
<script type="text/javascript">
let p = document.getElementById('first');
let text = p.id+"\n";
text += 'p.tagName= '+p.tagName+"\n";
text += 'p.innerHTML= '+p.innerHTML+"\n";
text += 'p.style.color= '+p.style.color+"\n";
text += 'p.onclick= '+p.onclick+"\n";
text += 'p.childElementCount= '+p.childElementCount+"\n";
text += '너 비 = '+p.offsetWidth+"\n";
text += '높 이= '+p.offsetHeight;
alert(text);
</script>
</body>
<script type="text/javascript">
function changeContent()
{
let p= document.getElementById('p');
p.innerHTML="이제부터 고급 자바스크립트를 학습합니다ㅎㅅㅎ";
p.style.color=" #FA8072 "
}
</script>
</head>
<body>
<h3>What Can JavaScript Do?</h3>
<p id="p">지금까지 자바스크립트의 기본을 학습하였습니다.</p>
<br>
<button type="button" onclick='changeContent()'>Next</button>
</body>
<script type="text/javascript">
// p1 : 텍스트 넣기
function changeContent(){
let p = document.getElementById('p1');
p.innerHTML = "조금만 참고 열공합시다♡";
}
// p2 : 이미지 넣기
document.getElementById('p2');
p2.innerHTML="<img src='../img/ku1.jpg' width=150 height=150px>";
p2.style.display='block';
p2.style.width='150px';
p2.style.height='100px';
</script>
</head>
<body>
<h2>Web Programming!</h2>
<p id="p1">지금부터 졸지 말기ㅇㅅㅇ!</p>
<p id="p2"></p>
<br>
<button type="button" onclick="changeContent()">Next</button>
</body>
<script type="text/javascript">
function change(obj, size, color) {
obj.style.color = color;
obj.style.fontSize = size;
}
</script>
</head>
<body>
<h3> this 활용 </h3>
<hr>
<button onclick="change(this, '30px', 'red')"> red버튼 </button>
<button onclick="change(this, '30px', 'blue')"> blue버튼 </button>
<button onclick="change(this, '20px', 'orange')"> ▷여기를 클릭하면 크기와 색이 변경됩니당 </button>
</body>
<script type="text/javascript">
function changeOn(){
let p = document.getElementById('box');
p.style.backgroundColor="#FA8072";
p.style.width="200px";
p.style.height="100px";
p.style.border="1px solid black";
p.style.borderRadius= "30%";
p.style.boxShadow = "10px 10px 10px gray";
}
</script>
<body>
<h2>What Can JavaScript Do?</h2>
<div id="box" style="background-color:#FFE4E1; width:200px; height:100px; border:1px solid black;
text-align:center"><br><br>스크립트동적변경</div>
<button onclick=changeOn()> 스타일 변경 </button>
</body>