1. tagname
1)
<title>태그명을 통해서 문서 객체 탐색</title>
<script type="text/javascript">
//윈도우가 로드될 때 호출
window.onload=function(){
//태그명을 통해서 태그를 탐색해서 문서 객체로 반환
//복수의 태그가 존재할 수 있기 때문에 배열로 반환
let spans = document.getElementByTagName('span');
spans[0].innerHTML = '달빛이 찬란한 호수' //innerHTML : 내용에 접근해서 내용 제어
spans[1].innerHTML = '흰 눈이 눈 부신 들판';
};
</script>
</head>
<body>
<span>하늘</span><br>
<span>하늘</span>
</body>
</html>2)
<title>태그명을 통해서 문서 객체 탐색</title>
<script type="text/javascript">
window.onload=function(){
let spans = document.getElementByTagName('span');
for(let i=0;i<spans.length;i++){
if(i%2==1){
spans[i].innerHTML = '우주';
}else{
spans[i].innerHTML = '지구';
}
}
};
</script>
</head>
<body>
<span>하늘</span><br>
<span>하늘</span><br>
<span>하늘</span>
</body>
</html>2. id & id_tagename
1)
<title>id를 이용한 문서 객체 탐색</title>
<script type="text/javascript">
window.onload=function(){
let header1 = document.getElementById('header_1');
let 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>2)
<title>id와 태그명을 사용해서 문서 객체 탐색</title>
<script type="text/javascript">
window.onload=function(){
let allSpans = document.getElementByTagName('span');
let output = '[모든 span 태그의 text 출력]\n';
for(let i=0;i<allSpans.length;i++){
output += allSpans[i].innerHTML + '\n'; //브라우저 줄 바꿈 : \n
}
alert(output);
let foo = document.getElementById('foo');
let fooSpans = foo.getElementsByTagName('span'); //foo에 접근
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>3. name & classname
1)
<title>name 속성을 이용한 문서 객체 탐색</title>
<script type="text/javascript">
window.onload=function(){
let prev = document.getElementsByName('prev');
let next = document.getElementsByName('next');
prev[0].innerHTML = '이전';
next[0].innerHTML = '다음';
let country = document.getElementsByName('country');
country[0].checked = true;
let comment = document.getElementsByName('comment');
comment[0].value = '간단한 설명 입력';
};
</script>
</head>
<body>
<button name="prev">prev</button>
<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>2)
<title>클래스를 이용한 문서 객체 탐색</title>
<script type="text/javascript">
window.onload=function(){
let 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);
let foo2 = document.getElementById('foo');
let 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);
//클래스명이 여러개인 경우 공백을 구분자로해서 문자열로 전달
//순서는 바꾸어도 됨
let 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>4. querySelector & querySelectorAll
1)
<title>CSS 선택자를 통해서 객체 탐색</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 = '호호';
//CSS 선택자를 명시하면 여러개의 태그를 반환하는 상황에서도
//querySelector는 같은 태그의 최상단의 태그만 접근 가능 - id에 특화
let elem = document.querySelector('li'); //사과에만 접근
elem.style.backgroundColor = 'yellow'; //background-color에서 '-'을 빼고 뒤에오는 알파벳을 대문자로 바꿔줌
};
</script>
</head>
<body>
<h1 id="header_1">Header</h1>
<h1 id="header_2">Header</h1>
<ul>
<li>사과</li>
<li>바나나</li>
<li>오렌지</li>
</ul>
</body>
</html>2)
<title>querySelectorAll</title>
</head>
<body>
<ul>
<li>서울</li>
<li>부산</li>
<li>대구</li>
</ul>
<script type="text/javascript">
//ul 요소의 자식 요소인 li 요소를 모두 탐색하여 반환
let elems = document.querySelectorAll('ul > li');
for(let i=0;i<elems.length;i++){
document.write(elems[i].innerHTML + '<br>');
}
elems.forEach(function(item){
item.style.color = 'blue';
});
</script>
</body>