문서 객체의 일반적인 방법_기본 지식

1.getElementById(id)
요소의 ID를 통해 요소에 액세스합니다. 이는 DOM에서 페이지 요소에 액세스하는 기본 방법입니다.
예를 들어, 다음 예에서는 DOM 레이어를 거치지 않고도 DIV의 ID로 빠르게 액세스할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

h

테스트용입니다.

테스트용
<script> .getElementById('divid'); <BR>alert(div.nodeName); <BR></script>


이 기능을 사용할 때 요소의 ID가 고유하지 않은 경우 첫 번째 A 한정 요소입니다.
IE6에서는 input, checkbox, radio. 및 기타 요소 이름이 지정된 ID와 일치하면

에도 액세스됩니다. 예를 들어 다음 예에서는

코드 복사 코드는 다음과 같습니다.

테스트용
<script> =document.getElementById('divid' ); <BR>alert(div.nodeName) <BR></script>



2. getElementsByName(name)

IE6에서 요소 ID가 이 이름과 일치하면 이 요소도 포함되며 getElementsByName()은 다음과 같은 요소 개체에만 사용됩니다. 입력, 라디오, 체크박스 등
아래 예시처럼 george 배열의 길이는 0이 되어야 합니다.

코드 복사

코드는 다음과 같습니다. div name= "george">f

f

3 . getElementsByTagName( tagname)

getElementByTagName은 DOCUMENT 또는 요소에 사용할 수 있습니다. getElementsByTagName은 지정된 태그 이름을 가진 하위 요소의 목록(배열)을 반환합니다. 이 배열을 반복하여 각 개별 하위 요소를 얻을 수 있습니다. 매우 큰 DOM 구조를 처리할 때 이 접근 방식을 사용하면 전체 구조의 범위를 쉽게 좁힐 수 있습니다.

코드 복사
코드는 다음과 같습니다.

head> <script> <U>function start() { // tagName이 body인 모든 요소 가져오기(물론 페이지당 하나만) </script>myDocumentElements =document.getElementsByTagName("body"); myBody=myDocumentElements.item(0);

// 본문 하위 요소의 모든 P 요소 가져오기

myBodyElements=myBody.getElementsByTagName("p ");
//두 번째 P 요소 가져오기
myP=myBodyElements.item(1);
//이 요소의 텍스트 표시
alert(myP.firstChild.nodeValue);
}

안녕하세요

p>hello< ;/p>


DOM 요소 공통 메소드

1. )
현재 노드 객체에 노드를 추가합니다. 페이지에 콘텐츠를 동적으로 추가하는 데 자주 사용됩니다.
예를 들어 다음과 같이 div에 텍스트 노드를 추가합니다.




코드를 복사합니다.


코드는 다음과 같습니다.

var newdiv=document.createElement("div ")
var newtext= document.createTextNode("새 div")
newdiv.appendChild(newtext)
document.getElementById("test").appendChild(newdiv)
> ;

위의 예에서 newdiv.innerHTML="A new div"를 사용하여 DIV에 텍스트를 추가할 수도 있습니다.
그러나 innerHTML은
removeChild(childreference)에 속하지 않습니다. 🎜>현재 노드를 제거합니다. 의 하위 노드는 제거된 노드를 반환합니다. 제거된 노드는 문서 트리의 다른 곳에 삽입할 수 있습니다

코드 복사 코드는 다음과 같습니다.

자녀

3 , cloneNode(deepBoolean)

현재 노드의 복사된 노드를 복사하여 반환합니다. 복사된 노드는 격리된 노드이며 문서 트리에 없습니다. ID 속성을 포함하여 원래 노드의 속성 값을 복사하므로 이 새 노드를 문서에 추가하기 전에 ID 속성을 고유하게 수정해야 합니다. 물론, ID의 고유성이 중요하지 않다면 처리할 필요가 없습니다.
이 메서드는 부울 매개변수를 지원합니다. deepBoolean이 true로 설정되면 노드 내의 텍스트를 포함하여 현재 노드의 모든 하위 노드가 복사됩니다.

코드 복사 코드는 다음과 같습니다.

p=document.getElementById("mypara")
pclone = p.cloneNode(true)
p.parentNode.appendChild(pclone)
4 , replacementChild(newChild, oldChild)
현재 노드의 하위 노드를 다른 노드로 교체
예:

코드 복사

코드는 다음과 같습니다.

span

> ;

var oldel=document.getElementById("innerspan")

var newel=document.createElement("p"); text=document.createTextNode( "ppppp");
newel.appendChild(text)
document.getElementById("adiv").replaceChild(newel, oldel)


5.insertBefore(newElement, targetElement)
현재 노드에 새 노드를 삽입합니다. targetElement가 null로 설정된 경우 새 노드가 마지막 하위 노드로 삽입됩니다. targetElement Location 앞에 가장 가까운 하위 노드로 삽입되어야 합니다.

코드 복사

코드는 다음과 같습니다. span id= "lovespan">원하는 것은 무엇이든 원합니다!

var newspanref=document.body.insertBefore(newspan, lovespan)

newspanref.innerHTML="鱼与"
< ;/script>


6. click()
은 스크립트를 통해 onClick 기능을 실행하는 데 사용할 수 있는 요소를 클릭합니다.




코드 복사

코드는 다음과 같습니다.

<script> <a style="CURSOR: pointer" data="18433" class="copybut" id="copybut18433" onclick="doCopy('code18433')">function wow() { <U>alert( "마우스를 클릭하지 않은 것 같습니다." ); } </script>

hhh div>

🎜>

DOM 요소 속성: (다음은 일반적으로 사용됩니다. IE5.0 이상은 mozllia에서 지원됩니다.)
1. childeNodes는 모든 하위 노드 개체를 반환합니다.
예:




코드 복사

코드는 다음과 같습니다.

스님이 마실 물이 있습니다.

두 명의 승려가 마실 물을 나르고 있습니다.

세 스님들은 마실 물이 없었습니다.

<script> <BR>var msg=”” <BR>var mylist=document.getElementById("mylist") for (i=0; i<mylist.childNodes.length; i ){ <BR>var tr=mylist.childNodes[i] <BR>for(j=0;j<tr.childNodes[j].length; j ) { <BR>var td=tr.childNodes[j]; <BR>msg =td.innerText; <BR>} <BR>} <BR>alert(msg); 🎜><BR> <BR>2.innerHTML <BR>이것은 사실상의 표준이며 w3c DOM에 속하지 않지만 DOM을 지원하는 거의 모든 브라우저가 이 속성을 지원합니다. 이 속성을 통해 요소의 HTML을 쉽게 수정할 수 있습니다. </script>

코드 복사 코드는 다음과 같습니다.

New 인간, 뭐? !

return a 각 개별 스타일을 얻고 수정할 수 있는 요소의 스타일 개체에 대한 참조입니다.
예를 들어 다음 스크립트는 요소의 배경색을 수정할 수 있습니다.

document.getElementById("test").style.BackgroundColor="yellow"
firstChild는 첫 번째 하위 노드를 반환합니다
5. lastChild는 마지막 하위 노드를 반환합니다
6. parentNode는 상위 노드의 객체를 반환합니다.
7. nextSibling은 다음 형제 노드의 객체를 반환합니다.
8. PreviousSibling은 이전 형제 노드의 객체를 반환합니다.
9. nodeName은 영어 대문자를 사용하여 노드의 HTML 태그 이름을 반환합니다. P, FONT
예를 들어




코드 복사

코드는 다음과 같습니다. < ;div id='test'> ;ddd

<script> </script>

if (document.getElementById("test").nodeName=="DIV")

alert("이것은 a DIV");



첫 번째 예:
DOM1.0 자바스크립트를 사용하여 HTML 테이블을 동적으로 생성합니다.

코드 복사

코드는 다음과 같습니다. title>샘플 코드 <script> </script>

function start() {

//body 참조 가져오기
var mybody=document.getElementsByTagName("body").item (0);// 요소 생성
mytable = document.createElement("TABLE")
//> ; element
mytablebody = document.createElement("TBODY");
//행 및 열 생성
for(j=0;j//mycurrent_row=document.createElement("TR")
for(i=0;i// 요소
mycurrent_cell=document.createElement("TD");
//텍스트 요소 생성
currenttext=document.createTextNode("cell은 행 " j ", 열 " i); 🎜>//Put 새 텍스트 요소가 셀 TD에 추가됩니다.
mycurrent_cell.appendChild(currenttext)
// TR 행에 셀 TD를 추가합니다.
//TR 행에 셀 TD를 추가합니다.
mycurrent_row.appendChild(mycurrent_cell)
}
//TBODY에 행 추가
mytablebody.appendChild(mycurrent_row)
}
//TABLE에 TBODY 추가
mytable.appendChild(mytablebody);
// BODY에 TABLE 추가
mybody.appendChild(mytable);
// mytable의 테두리 속성을 2로 설정
mytable.setAttribute("border", " 2")

>


먼저 테이블 요소를 생성합니다.
다음으로, TABLE 요소의 하위 요소인 TBODY 요소를 생성합니다.
그러나 이제 둘 사이에는 연결이 없습니다.
다음으로 루프를 사용하여 TBODY 요소의 하위 요소인 TR 요소를 만듭니다.
각 TR에 대해 루프를 사용하여 TR의 하위 요소인 TD 요소를 생성합니다.
각 TD에 대해 텍스트 노드 요소를 생성합니다.
이제 이러한 TABLE, TBODY, TR, TD 및 텍스트 요소를 생성했지만 이들 간의 계층적
관계는 설정되지 않았습니다. 그런 다음 각 객체를 역순으로 상위 노드에 추가합니다.
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
mytablebody.appendChild(mycurrent_row);
mytable.appendChild(mytablebody)
이제 DOM 계층은 다음과 같습니다. :
BODY

TABLE

TBODY

TR------TR---- --- -----------TR

TD------TD-----TD TD------TD-----TD TD-- --- TD-----TD