JavaScript DOM 프로그래밍 예제(Zhi Podcast 학습)_javascript 기술

그는 또한 우리에게 DOM을 배우는 방법에 대한 많은 방법을 설명했는데 정말 유익했다고 생각합니다.
다음은 여러분과 공유하는 것이 더 좋다고 생각하는 몇 가지 예입니다.
1. 2차 연계 드롭다운 메뉴(1차 수준은 시, 2차는 도시, 1차에서는 지방을 선택해야 하며 그에 따라 2차 도시가 나타남)
단계: 1) 기본 프레임워크(HTML): 두 개의 복잡한 확인란, 두 번째 확인란에는 옵션이 없어야 합니다. 첫 번째 드롭다운 상자는 이벤트 소스로 사용되고 함수 구현 부분은 JavaScript는 onchange 메소드를 통해 활성화됩니다.

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

id= "province" onchange="selCity()"> <br><option>--지방 선택--</option> <br><option>Beijing</option> <br>후베이옵션> <br>산둥옵션> <br><br> <br><select id="city"> <br><option>--도시 선택--</option> ;/xmp> <br><br> <br>2) 페이지 수정은 크게 필요하지 않고 드롭다운 메뉴에 하나만 표시되도록 하세요<br>3) JavaScript를 통해 기능을 구현하려고 합니다. 먼저 드롭다운 목록에서 지방을 선택하면 해당 도시가 나중에 직접 표시될 수 있습니다. 이 일대다 대응을 보고 처음에는 컨테이너 지도 컬렉션을 생각했지만 JavaScript에는 지도 컬렉션이 없기 때문에 생각했습니다. 배열과 같은 컨테이너에 대해 고민하고 최종적으로 이 기능을 구현하는 데 2차원 배열을 사용하기로 결정했습니다. <br></select>

코드 복사

코드는 다음과 같습니다. function selCity()

{

var arr= [["--도시 선택--"],["Haidian District","Chaoyang District","Dongcheng District","Xicheng District", "Xuanwu District"],
["Heping District", "Hebei District", "Hedong District", "Hexi District", "Nankai District"],
["Wuhan", "Yichang" , "Xiaogan","Xiangfan","Jingzhou"],
["Jinan","Qingdao","Yantai","Weihai","Rizhao"],
["Shijiazhuang","Baoding" ,"장자커우","랑팡","한단"]];
var selpNode = document.getElementById("province");
var selcNode = document.getElementById("city")
var 도시 = arr[ selpNode.selectedIndex];
selcNode.options.length = 0;
for(var x=0; x{
var optNode = document.createElement ("옵션");
optNode.innerText = 도시[x];
selcNode.appendChild(optNode)
}
}

요약: 매번 배열을 삭제하는 것을 잊지 마세요.
2. 메일링 리스트
생각: 1) 우선 전체적인 프레임워크를 생각해보면 반드시 테이블을 사용하여 서식을 지정하고 행과 같은 테이블과 노드를 조작하여 관련 기능을 구현하는 것을 생각하게 됩니다. cells
2) css 가장 중요한 것은 테이블의 형식을 지정하는 것이고, 두 번째는 className을 동적으로 수정하여 두 행에 서로 다른 효과를 선택하고 표시하는 것입니다.
길이 때문에 html. 그리고 코드의 CSS 부분은 비교적 간단해서 당황스럽지 않을 것입니다.

3) JavaScript로 다양한 기능을 구현하는 코드는 다음과 같습니다.




코드를 복사합니다

코드는 다음과 같습니다.

<script> <BR>var color =""; <BR>function getStyle() <BR>{ <BR>var tableNode =document.getElementsByTagName("table")[0]; >var arr = tableNode.rows; <BR>for(var x = 0;x<arr.length;x ) <BR>{ <BR>if(x%2) <BR>arr[x].className = " one"; <BR>else <BR>arr[x].className = "two"; <BR>var tdNode0 = arr[x].cells[0]; <BR>tdNode0.align = "center"; <BR>arr[x].onmouseover = function() <BR>{ <BR>color = this.className;//원래 값을 기록하고, 마우스를 한 번 움직이면 원래 색상으로 돌아옵니다. <BR>this.className = "체크됨"; <BR>} <BR>arr[x].onmouseout = function() <BR>{ <BR>this.className = <BR>} <BR>} <BR>} <BR> / /동일한 기능을 달성하려면 모두 선택해야 하므로 어떤 노드인지 구별하기 위해 값을 전달합니다. <BR>function allCheck(index) <BR>{ <BR>var allNode = document.getElementsByName("all") [index]; <BR>var checkNodes = document.getElementsByName("mail"); <BR>for(var x=0;x<checkNodes.length;x ) <BR>{ <BR>checkNodes[x].checked = allNode.checked ; <BR>} <BR>} <BR>function checkBut(num) <BR>{ <BR>var mailNodes = document.getElementsByName("mail") <BR>for(var x=0; x<mailNodes.length; <BR>else <BR>mailNodes[x].checked = num <BR>} <BR>} <BR>function del() <BR>{ <BR>var b = window.confirm ("이메일 선택을 모두 삭제하시겠습니까? "); <BR>if(!b) <BR>return ; <BR>var mailNodes = document.getElementsByName("mail"); <BR>var arr = new Array(); <BR>var pos = 0; <BR>for(var x=0; x<mailNodes.length; .parentNode; <BR>arr[pos ] = trNode; <BR>} <BR>} <BR>for(var x=0; x<arr .length; x ) <BR>{ <BR>arr[x] .parentNode.removeChild(arr[x]) <BR>} <BR>getStyle() <BR>} <BR>window.onload = getStyle ; <BR></스크립트></script>