javascript DOM 프로 그래 밍 인 스 턴 스(팟 캐 스 트 학습)

그리고 DOM 을 배 우 는 방법 에 대해 많은 설명 을 해 주 었 습 니 다.정말 많은 것 을 얻 었 다 고 생각 합 니 다.다음은 제 가 생각 하 는 좋 은 예 몇 가 지 를 여러분 과 공유 하 겠 습 니 다.1.2 단 연동 드 롭 다운 메뉴(1 단 계 는 성,2 단 계 는 도시,1 단 계 는 성 을 선택 하고 2 단 계 는 도시 가 나타 나 도록 요구)절차:1)기본 프레임 워 크(HTML):두 개의 체크 상자,두 번 째 체크 상자 안 에는 옵션 이 없어 야 합 니 다.첫 번 째 드 롭 다운 상 자 는 이벤트 소스 가 되 므 로 onchange 방법 을 통 해 자바 스 크 립 트 의 기능 실현 부분 을 자극 합 니 다

 
<xmp> 
<select id="province" onchange="selCity()"> 
<option >--    --</option> 
<option >  </option> 
<option >  </option> 
<option >  </option> 
<option >  </option> 
<option >  </option> 
</select> 
<select id="city"> 
<option>--    --</option> 
</select> 
</xmp> 

2)페이지 장식 은 많이 필요 하지 않 습 니 다.드 롭 다운 메뉴 에 하 나 를 표시 하면 됩 니 다.3)자 바스 크 립 트 를 통 해 기능 을 실현 하려 면 첫 번 째 드 롭 다운 목록 에서 성 을 선택 하고 그 다음 에 그의 도 시 를 직접 표시 할 수 있 습 니 다.이런 다 중 대응 관 계 를 보면 먼저 map 집합 이라는 용 기 를 생각 합 니 다.그러나 자바 스 크 립 트 는 map 집합 이 없습니다.그러면 우 리 는 배열 이라는 용 기 를 생각 하고 마지막 으로 2 차원 배열 로 우리 가 이 기능 을 실현 하 는 것 을 도와 주기 로 결정 했다

 
<script type="text/javascript"> 
function selCity() 
{ 
var arr= [["--    --"],["   ","   ","   ","   ","   "], 
["   ","   ","   ","   ","   "], 
["  ","  ","  ","  ","  "], 
["  ","  ","  ","  ","  "], 
["   ","  ","   ","  ","  "]]; 
var selpNode = document.getElementById("province"); 
var selcNode = document.getElementById("city"); 
var citys = arr[selpNode.selectedIndex]; 
selcNode.options.length = 0; 
for(var x=0; x<citys.length; x++) 
{ 
var optNode = document.createElement("option"); 
optNode.innerText = citys[x]; 
selcNode.appendChild(optNode); 
} 
} 
</script> 

소결:매번 배열 을 비 워 야 한 다 는 것 을 기억 하 세 요.2.메 일 링 리스트 사상:1)먼저 전체적인 프레임 워 크 를 생각하면 표 로 포맷 할 생각 을 하 게 됩 니 다.그 다음 에 표 와 줄,칸 등 노드 를 조작 하여 관련 기능 을 실현 합 니 다.2)css 는 주로 표 와 관련 된 포맷 을 합 니 다.그 다음 에 선택 과 두 줄 이 서로 다른 효 과 를 나타 내 고 className 을 동적 으로 수정 하여 지면 으로 인 한 관 계 를 실현 합 니 다.html 및 css 부분 코드 가 상대 적 으로 간단 하여 추 태 를 보이 지 않 습 니 다.3)JavaScript 는 다양한 기능 을 실현 합 니 다.코드 는 다음 과 같 습 니 다

 
<script> 
var color =""; 
function getStyle() 
{ 
var tableNode =document.getElementsByTagName("table")[0]; 
var arr = tableNode.rows; 
for(var x = 0;x<arr.length;x++) 
{ 
if(x%2) 
arr[x].className = "one"; 
else 
arr[x].className = "two"; 
var tdNode0 = arr[x].cells[0]; 
tdNode0.align = "center"; 
arr[x].onmouseover = function() 
{ 
color = this.className;//       ，               
this.className = "checked"; 
} 
arr[x].onmouseout = function() 
{ 
this.className = color; 
} 
} 
} 
//             ，                 
function allCheck(index) 
{ 
var allNode = document.getElementsByName("all")[index]; 
var checkNodes = document.getElementsByName("mail"); 
for(var x=0;x<checkNodes.length;x++) 
{ 
checkNodes[x].checked = allNode.checked; 
} 
} 
function checkBut(num) 
{ 
var mailNodes = document.getElementsByName("mail"); 
for(var x=0; x<mailNodes.length; x++) 
{ 
if(num>1) 
mailNodes[x].checked = !(mailNodes[x].checked);//                  
else 
mailNodes[x].checked = num; 
} 
} 
function del() 
{ 
var b = window.confirm("          ？"); 
if(!b) 
return ; 
var mailNodes = document.getElementsByName("mail"); 
var arr = new Array(); 
var pos = 0; 
for(var x=0; x<mailNodes.length; x++) 
{ 
if(mailNodes[x].checked) 
{ 
var trNode = mailNodes[x].parentNode.parentNode; 
arr[pos++] = trNode; 
} 
} 
for(var x=0; x<arr.length; x++) 
{ 
arr[x].parentNode.removeChild(arr[x]); 
} 
getStyle(); 
} 
window.onload = getStyle; 
</script>