728x90

자바스크립트에서 사용되는 API 이다.


함수

설 명

 getElementById( )

 특정 id 속성값에 해당하는 요소를 반환
<div id ="idname">
getElementById("idname");

 getElementsByName( )

 특정 name 속성값에 해당하는 요소를 반환
<input type="text" name="name">
getElementsByName("name");

 getElementsByTagName( )

 특정 태그 이름과 일치하는 모든 요소를 반환
<input type="text">
getElementsByTagName("input");

 getElementsByTagNameNS()

 태그의 name 속성의 값과 일치하는 모든 요소를 반환
<input type="text" name="emai");
getElementsByTagNameNS("email");

 querySelector()

 페이지내에서 특정 선택자 규칙과 일치하는 첫 번째 요소를 반환
<input class="error">
querySelector("input.error");

 querySelectorAll()

 특정 선택자 규칙 또는 여러 규칙과 일치하는 모든 요소를 반환
<div id="rest"><table><tr><td>…
querySelectorAll("#rest td")


Selector API를 이용해 DOM 트리로부터 HTML DOM 객체를 가져오기 위해서는 자바스크립트 코드 실행이 HTML  문서가 파싱된 다음 실행되어야 함
HTML 문서가 파싱되기 전에 자바스크립트 코드가 실행되면 Selector API로 HTML DOM 객체를 DOM Tree 에서 찾지 못함

자바스크립트 코드가 HTML 파싱이 완료된 다음 실행되게 하기 위해서는 ....
1. 자바스크립트 코드를 외부 파일로 작성했을 경우 defer 속성을 부여함
   <script src="xxx.js" defer></script>
2. HTML 문서 본문의 맨 아래 <script>코드를 이용하여 자바스크립트 코드를 작성함
3. <script>요소를 이용해 자바스크립트 코드를 <head>요소에 포함시킬 수 있는데
   onload 이벤트를 이용하여 페이지가 로드된 다음 자바스크립트 코드가 실행되도록 함

728x90
블로그 이미지

Link2Me

,