다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<제목></제목>
<스크립트>
/*
문서 노드 객체를 얻는 방법:
*/
//첫 번째는 id로 얻습니다.
함수 문서데모(){
var tableNode = document.getElementById("tab_id");
tableNode.style.border = "5px 솔리드 #00ff00";
}
//둘째, name 속성을 통해
함수 documentDemo2(){
var inputNode = document.getElementsByName("txt");
경고(inputNode.length);
경고(inputNode[0].value);
}
//태그 이름을 통한 세 번째 유형
함수 documentDemo3(){
var tdNode = document.getElementsByTagName("td");
경고(tdNode.length);
for(var x = 0; x < tdNode.length;x++){
경고(tdNode[x].innerText);
}
}
</script>
<스타일 유형="텍스트/css">
.onediv{
너비:200px;
높이:100px;
테두리:1px 솔리드 #f00;
여백 상단:20px;
}
테이블,td{
테두리:1px 솔리드 #00f;
너비:200px;
여백 상단:20px;
텍스트 정렬:가운데;
}
</style>
</head>
<본문>
<input type="button" value="document object Demonstration" onclick="documentDemo3()"><br/>
<div>
div에 있는 내용입니다.
</div>
<입력 유형="txt" 이름="txt" >
<입력 유형="txt" 이름="txt" >
<테이블 셀 간격="0" id="tab_id">
<tr>
<td>자바</td>
<td>php</td>
</tr>
<tr>
<td>.net</td>
<td>iOS</td>
</tr>
</table>
<span>범위 영역입니다</span> <br/>
<a href="#">하이퍼링크입니다</a>
<본문>
</html>