HTML 선택자 (= 요소찾기 = 요소얻기)
document.getE lementB yI d("아이디");
document.getE lements B yT agN ame("태그이름");
document.getE lements B yC lassN ame("클래스"); document.queryS electorA ll("선택자"); document.forms["폼아이디"];
[주의사항]
※ 대소문자 구별 주의
※ 요소가 발견되면 객체로 반환. 요소가 발견 안 되면 null 반환.
※ 태그 및 클래스는 중간에 복수형 s 들어감에 주의.
※ getElementsByClassName() 메서드는 IE8 및 그 이하에선 작동 안 함.
※ querySelectorAll() 메서드는 IE8 및 그 이하에선 작동 안 함.
※ forms[] 메서드는 대괄호 사용함에 주의. ※ JS 외부파일에 넣어 웹문서에 삽입해 사용할 때 주의사항 보기
1.
ID 선택자
<p id="host ">Homzzang.com</p>
<p id="hz "></p>
<script>
var site = document.getElementById ("host");
document.getElementById ("hz").innerHTML = "홈짱닷컴 " + site.innerHTML ;
</script>
결과보기
2.
태그선택자 (= 태그명선택자 = 태그이름선택자)
<h2>홈짱닷컴</h2>
<p >Homzzang.com</p >
<p>홈페이지 제작강의 + 서버관리</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName ("p");
document.getElementById("demo").innerHTML = x[0] .innerHTML;
</script>
결과보기
<div id="site">
<p >홈짱닷컴</p >
<p>Homzzang.com</p>
</div>
<p id="demo"></p>
<script>
var x = document.getElementById("site");
var y = x.getElementsByTagName ("p");
document.getElementById("demo").innerHTML = y[0].innerHTML ;
</script>
결과보기
3.
클래스선택자 (= 클래스명선택자 = 클래스이름선택자)
<p class="site ">홈짱닷컴</p>
<p class="site">Homzzang.com</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName ("site");
document.getElementById("demo").innerHTML = x[0] .innerHTML;
</script>
결과보기
※ getElementsByClassName() 메서드는 IE8 및 그 이하에선 작동 안 함.
4.
CSS선택자 - CSS구문으로 찾기
<p class="site">홈짱닷컴</p>
<p class="site">Homzzang.com</p>
<p>홈페이지 제작관리 + 서버 관리</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.site");
document.getElementById("demo").innerHTML = x[0].innerHTML;
</script>
※ querySelectorAll() 메서드는 IE8 및 그 이하에선 작동 안 함.
5.
폼집합선택자 - HTML객체집합에서 요소찾기 (= 폼태그에서 요소찾기)
<form id="my " action="/update.php">
아이디 : <input type="text" name="site" value="홈짱닷컴"><br>
닉네임: <input type="text" name="host" value="Homzzang.com"><br><br>
<input type="submit" value="확인">
</form>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.forms["my"]; // id='my ' 갖은 form 태그 전체 선택
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
결과보기
※ form 태그 안 요소들의 value 속성값을 모두 출력.
주소 복사
랜덤 이동