쌍용교육(JAVA)/JavaScript
쌍용교육 -JavaScript수업 36~37일차 ch24_JSDOM
구 승
2024. 4. 15. 14:04
s01_tagname.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그명을 통해서 문서 객체 탐색</title>
<script type="text/javascript">
//윈도우가 로드될 때 onload에 대입된 함수가 실행
window.onload = function(){
//태그명을 통해서 태그를 탐색해서 문서 객체로 반환
//복수의 태그가 존재할 수 있기 때문에 배열로 반환
const header1 = document.getElementsByTagName('h1');
header1[0].innerHTML = '달빛이 찬란한 호수';
header1[1].innerHTML = '흰 눈이 눈 부신 들판';
const header3 = document.getElementsByTagName('h3');
for(let i=0; i<header3.length; i++){
if(i%2==1){//인덱스번호가 홀수
header3[i].innerHTML = '우주';
}else{//인덱스번호가 짝수
header3[i].innerHTML ='지구';
}
}
};
</script>
</head>
<body>
<h1>하늘</h1><!-- header1[0] -->
<h1>하늘</h1><!-- header1[1] -->
<hr size="1" width="90%">
<h3>구름</h3>
<h3>구름</h3>
<h3>구름</h3>
</body>
</html>
s02_id.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id를 이용한 문서 객체 탐색</title>
<script type="text/javascript">
//윈도우가 로드될 때 onload에 대입된 function를 실행
window.onload = function(){
const header1 = document.getElementById('header_1');
const header2 = document.getElementById('header_2');
//태그의 내용 변경
header1.innerHTML = '하하';
header2.innerHTML = '호호';
};
</script>
</head>
<body>
<h1 id="header_1">Header</h1>
<h1 id="header_2">Header</h1>
</body>
</html>
s03_tagname_id.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그명과 id를 사용해서 문서 객체 탐색</title>
<script type="text/javascript">
//윈도우가 로드될 때 onload에 대입된 함수가 실행
window.onload = function(){
const allSpans = document.getElementsByTagName('span');
let output = '[모든 span 태그의 text 출력]\\n';
for(let i=0; i<allSpans.length; i++){
output +=allSpans[i].innerHTML + '\\n';
}
alert(output);
//id가 foo인 p태그 반환
const foo = document.getElementById('foo');
//id가 foo인 p태그의 자식 태그 중 span 태그 반환
const fooSpans = foo.getElementsByTagName('span');
let output2 ='[id가 foo인 p태그 하위 태그 중 모든span 태그의 text 출력]\\n';
for(let i=0;i<fooSpans.length;i++){
output2 +=fooSpans[i].innerHTML+'\\n';
}
alert(output2);
};
</script>
</head>
<body>
<p id="foo">
<span>a</span>
<span>b</span>
<span>c</span>
</p>
<p id="bar">
<span>x</span>
</p>
</body>
</html>
s04_name.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>name 속성을 이용한 문서 객체 탐색</title>
<script type="text/javascript">
window.onload=function(){
//name속성의 값을 통해서 태그 객체들을 배열에 담아 반환
const prev = document.getElementsByName('prev');
prev[0].innerHTML = '이전';
const next = document.getElementsByName('next');
next[0].innerHTML = '다음';
const country = document.getElementsByName('country');
country[0].checked = true;
const comment = document.getElementsByName('comment');
comment[0].value = '간단한 설명 입력';
};
</script>
</head>
<body>
<button name="prev">prev</button>
<br>
<button name="next">next</button>
<br>
<input type = "checkbox" name ="country" value="한국">한국
<input type = "checkbox" name = "country" value="미국">미국
<input type = "checkbox" name = "country" value="영국">영국
<br>
<input type = "text" name="comment">
</body>
</html>
s05_className.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>클래스를 이용한 문서 객체 탐색</title>
<script type="text/javascript">
window.onload = function(){
//태그의 class 속성이 지정한 class 명과 일치하는 문서객체를 배열로 반환
const foo = document.getElementsByClassName('matched');
let output = '[class명이 matched인 모든 태그의 text 출력]\\n';
for(let i=0; i<foo.length;i++){
output +=foo[i].innerHTML+'\\n';
}
alert(output);
//id가 foo인 p태그 반환
const foo2 = document.getElementById('foo');
//id가 foo인 p태그의 하위 태그 중 class명이 matched인 태그들을 반환
const fooMatched =foo2.getElementsByClassName('matched');
let output2 = '[id가 foo인 태그의 하위 태그 중 class명이 matched인 모든 태그의 text 출력]\\n';
for(let i=0;i<fooMatched.length;i++){
output2 +=fooMatched[i].innerHTML+'\\n';
}
alert(output2);
//태그 중에서 class명이 matched와 unmatched 모두 적용된 태그를 반환
//크래스명이 여러개인 경우 공백을 구분자로해서 문자열로 전달
//순서는 변경 가능
const fooMatched2 = foo2.getElementsByClassName('matched unmatched');
let output3 = '[id가 foo인 태그의 하위 태그 중 class명이 matched unmatched인 모드 태그의 text 출력]\\n';
for(let i=0;i<fooMatched2.length;i++){
output3 +=fooMatched2[i].innerHTML+'\\n';
}
alert(output3);
};
</script>
</head>
<body>
<P id = "foo">
<span class ="matched">a</span>
<span class = "matched unmatched">b</span>
<span class = "unmatched">c</span>
</P>
<p id = "bar">
<span class = "matched">x</span>
</p>
</body>
</html>
s06_querySelector.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>querySelector</title>
<script type="text/javascript">
window.onload=function(){
//명시한 선택자를 통해 해당 선택자를 사용하는 태그를 반환
//CSS 선택자
let header1 = document.querySelector('#header_1');
let header2 = document.querySelector('#header_2');
header1.innerHTML = '서울';
header2.innerHTML = '부산';
let input1 = document.querySelector('#my_form #input_1');
input1.value = '홍길동';
//CSS 선택자를 명시하면 여러개의 태그를 반환하는 상황에서도
//querySelector는 같은 태그의 최상단의 태그만 접근 가능
let element = document.querySelector('li');//유니크하지 않는 정보(li는 여러개 있기에)를 넣을 때
element.style.backgroundColor = 'yellow'//background-color로 사용못함 하이픈을 못써서 c를 대문자로 입력
//그러므로 쿼리셀렉터는 주로 id를 넣어서 사용할 때 주로 사용한다.
};
</script>
</head>
<body>
<h1 id ="header_1">Header</h1>
<h1 id ="header_2">Header</h1>
<form id = "my_form">
<input type="text" id="input_1">
</form>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</body>
</html>
s07_querySelectorAll.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>querySelectorAll</title>
</head>
<body>
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
<script type="text/javascript">
//ul 요소의 자식 요소인 li 요소를 모두 탐색하여 배열로 반환
//자식 선택자
const elems = document.querySelectorAll('ul > li');
for(let i=0; i<elems.length; i++){
document.write(elems[i].innerHTML+'<br>');
}
document.write('-----------------------<br>');
elems.forEach(function(element){
element.style.color = 'blue';
});
</script>
</body>
</html>
s08_createElement.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>태그 생성</title>
<script type="text/javascript">
/*
메서드 이름 설명
createElement(tagName) 요소 노드를 생성
createTextNode(text) 텍스트 노드를 생성
appendChild(node) 객체에 노드를 연결
*/
window.onload = function(){
const header = document.createElement('h1');//h1태그생성
const textNode = document.createTextNode('Hello DOM');//텍스트 생성
//노드 연결
header.appendChild(textNode);//h1태그에 텍스트를 추가
document.body.appendChild(header);//body에 h1를 추가
};
</script>
</head>
<body>
</body>
</html>
s09_createElement.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 속성 지정</title>
<script type="text/javascript">
window.onload = function(){
const img = document.createElement('img');//img 태그 생성
img.src='../files/landscape.jpg';
img.width = 500;
img.height = 350;
//노드 연결
document.body.appendChild(img);//body에 h1를 추가
};
</script>
</head>
<body>
</body>
</html>
s10_innerHTML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>뭄서 객체의 innerHTML 속성 사용</title>
<script type="text/javascript">
window.onload = function(){
let output = '';
output +='<ul>';
output +=' <li>JavaScript</li>';
output +=' <li>jQuery</li>';
output +=' <li>Ajax</li>';
output+='</ul>';
//innerHTML 속성에 문자열을 할당
document.body.innerHTML = output;//HTML태그 실행
//document.body.textContent = output; //텍스트로만 처리
};
</script>
</head>
<body>
</body>
</html>
document.body.textContent = output; //텍스트로만 처리
s11_removeChild.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 제거</title>
<script type="text/javascript">
window.onload=function(){
const willRemove = document.getElementById('will_remove');
//3초 후에 매게변수로 전달된 함수를 호출
setTimeout(function(){
//id가 will_remove인 h1태그를 제거
//document.body.removeChild(willRemove); //body를 쓴 이유는 body가 부모이기 때문에 부모가 자식을 삭제한다는 의미
//문서 객체의 하위 요소를 모두 제거
document.body.innerHTML = '';
},3000);//3초후에 제거
};
</script>
</head>
<body>
<h1 id="will_remove">Header</h1>
<h1>Header2</h1>
</body>
</html>
s12_style.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체의 스타일 처리</title>
<script type="text/javascript">
window.onload=function(){
const header = document.getElementById('header');
/*
css background-color 속성은 자바스크립트에서는 backgroundColor로 명시해야함.
자바스크립트는 식별자에 '하이픈(-)'을 사용할 수 없음.
*/
//문서 객체의 스타일을 바꿈
header.style.border = '2px solid black';
header.style.color = 'orange';
header.style.fontFamily = 'Helvetica'; //글자체
header.style.backgroundColor = 'yellow';
};
</script>
</head>
<body>
<h1 id="header">Header</h1>
</body>
</html>
