javascript dom 연산 js Enhancement_javascript 스킬에 대한 자세한 설명

1. 문서의 각 노드에는 nodeName, nodeValue, nodeType
nodeName 속성이 있습니다. 텍스트 노드의 노드 이름은 #text입니다. nodeName은
nodeValue 속성입니다. 3. 텍스트 노드는 읽기 전용입니다.
nodeType 속성은 요소 노드에 사용할 수 없으며 null
2를 반환하고, getElementsByTagName은 노드 컬렉션
3, firstChild, lastChild 첫 번째 요소 노드, 마지막 요소 노드를 반환합니다.
4, childNodes는 모든 자식 노드 List를 반환합니다.
5, PreviousSibling, 이전 형제 노드, nextSibling, 다음 형제 노드, parentNode는 부모 노드를 반환합니다.
6, hasChildNodes, 텍스트 노드를 자식으로 사용할 수 있습니다. 요소 노드, 텍스트 노드 및 속성 노드의 노드는 더 이상 하위 노드를 포함할 수 없습니다.
7,appendChild(node)는 노드를 추가합니다
8,removeChild()는 노드를 제거합니다
하위 노드를 빌려서 가져올 수 있습니다. 상위 노드를 제거한 다음 하위 노드를 제거합니다.
9.replaceChild() 대체 메소드에는 두 개의 매개변수가 있습니다.
두 매개변수가 모두 DOM에 존재하는 경우 첫 번째 매개변수가 DOM에 나타납니다. 두 위치가 사라지고 두 번째 위치는 사라집니다.
10. insertBefore(newnode,refnode) refnode 앞에 newnode 삽입
11. 노드 생성
setAttribute() 요소 노드에 속성 추가
createElement() 요소 노드 생성
createTextNode( ) 텍스트 노드 만들기
이 세 가지 방법을 사용하여 노드를 추가하세요.
12.innerHTML 내부의 html을 얻거나 설정할 수 있습니다.
다음은 현과 시의 연계 선택 예시이며, 현과 시 정보는 xml에 있습니다
13. ,
node.onclick = xxx(); 함수의 반환 값을 가져옵니다. 즉, 함수를 실행합니다.
2,
node.onclick = function(){
xxx(); 🎜>}
함수에 대한 참조를 가져와 이벤트가 트리거될 때만 실행합니다.
14. 동적 배열 삭제: 즉, 배열의 요소가 삭제된 후 다음 요소가 자동으로 한 칸 앞으로 이동합니다.
["Shandong", "Shanxi", "Guangdong", "Guangxi", "Sichuan", "Henan", "Hebei"]
for(int i = 0;i["Shanxi", "Guangdong", "Guangxi", "Sichuan", "Henan", "Hebei"]
["Shanxi", "Guangxi", "Sichuan", "입니다. Henan" ", "Hebei"]
["Shanxi", "Guangxi", "Henan", "Hebei"]
["Shanxi", "Guangxi", "Henan"]
Array out of 경계
결론: 동적 배열은 뒤에서 앞으로 삭제해야 합니다
For(int i = xx.length; i>0; i--)
링크 선택 예시 기록

지방을 선택하면 해당 도시가 다른 선택 항목에 나타납니다.

City.html

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

;제목 없는 문서< ;/title>

🎜>< ;select id="province">
선택하세요...

<옵션 값="랴오닝성">
<옵션 값="산둥성">

선택하세요...



cities.js

코드 복사

코드는 다음과 같습니다. 다음:

window.onload = function(){
// XML 문서를 구문 분석하고 xml 문서의 중국 루트 노드를 가져옵니다.
var xmlDocument =parseXml("cities.xml")
var chinaNode = xmlDocument.childNodes[1];
// 선택한 지방의 값을 가져오기 위해 id="province"인 선택 노드에 대한 onchange 이벤트를 추가합니다.
var ProvinceNode = document.getElementById("province" );
ProvinceNode.onchange = function(){
// ** 프로비저닝 노드 삭제 **
var cityNode = document.getElementById("city");
// cityNodeOptionNodes 배열이 활성화되어 있으므로 뒤에서 앞으로 지워야 합니다.
var cityNodeOptionNodes = cityNode.getElementsByTagName("option ");
var length = cityNodeOptionNodes.length;
for(var i = length - 1; i > 0; i--){
cityNode.removeChild(cityNodeOptionNodes[i]);
}
var ProvinceValue = this.value;
// xml 문서에서 해당 지방 노드를 가져오려면 ProvinceValue를 사용하십시오.
var ProvinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" ProvinceValue "']")
// 3개의 모든 도시 하위 노드의 텍스트 값을 가져옵니다. 0; i < cityNodesInXmlFile.length; i ) {
var cityNodesInXmlFile[i];
var cityValue = cityNodeInXmlFile.firstChild.nodeValue// 옵션 노드를 생성합니다. : cityValue
var optionNode = document.createElement("option")
optionNode.setAttribute("value", cityValue)
var optionNodeTextNode = document.createTextNode(cityValue);
optionNode.appendChild(optionNodeTextNode);
// id="city"인 선택 노드에 생성된 옵션 노드를 추가합니다.
cityNode.appendChild(optionNode); >}
};
// xml 파일을 구문 분석하는 함수
function parseXml(fileName){
//IE 코어 브라우저
if (window.ActiveXObject) {
//Create DOM 파서
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
// XML 문서 로드 및 XML 문서 개체 가져오기
doc.load (fileName);
return doc;
}
//Mozilla 브라우저
else
if (window.DOMParser) {
// DOM 파서 생성
var p = new DOMParser();// DOM 파서 생성
return p.parseFromString(fileName, "text/xml")
}
else {
return false; >}
}


cities.xml




코드 복사

코드는 다음과 같습니다.

< ?xml version="1.0" 인코딩="GB2312"?> <지방 이름="허베이성"> 한단시> 장자커우

<성 이름="랴오닝성">

심양
<시> /city>
<시>
<시>
< ;성 이름=" 산둥성">



지방>