이 기사에서는 웹 페이지 노드에 JavaScript 사용에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
1. 기본 개념
이 부분을 "Html dom"이라고합니다. 소위 HTML DOM은 웹 페이지로드 규칙이며, 이는 웹 페이지의 기본 공식입니다.
즉, 모든 웹 페이지는 다음과 같은 규칙에 따라 작성되어야합니다.
소위 "웹 페이지 노드"는 "Dom Node"에 대한 인기있는 설명입니다. 예를 들어, HTML 노드의 내용은 <html> </html> 사이의 모든 내용이며, 본체 노드의 내용은 <body> </body> 사이의 모든 내용입니다.
HTML DOM은 다음과 같이 규정합니다. 1. 전체 문서는 문서 노드입니다. 2. 간단한 <html> 태그가 아닌 각 HTML 태그 (의미 <body> <table> 및 기타 HTML 태그)는 요소 노드입니다. 3. HTML 요소에 포함 된 텍스트는 텍스트 노드입니다. 4. 각 HTML 속성은 속성 노드입니다
예를 들어, 다음 DOM 노드 트리에 페이지를 그릴 수 있습니다.
HTML DOM의 공식 정의는 다음과 같습니다. HTML DOM은 HTML 문서 개체 모델의 약어이며 HTML DOM은 HTML/XHTML에 특별히 적용되는 문서 개체 모델입니다. 소프트웨어 개발에 익숙한 사람들은 HTML DOM을 웹 페이지 API로 이해할 수 있습니다. 웹 페이지의 각 요소를 객체로 취급하므로 웹 페이지의 요소를 컴퓨터 언어로도 얻거나 편집 할 수 있습니다. 예를 들어 JavaScript는 HTML DOM을 사용하여 웹 페이지를 동적으로 수정할 수 있습니다.
JavaScript를 사용하면 이러한 DOM 노드에 대한 웹 페이지 노드의 추가, 삭제, 수정 및 검색을 쉽게 제어 할 수 있습니다.
2. 기본 목표
JavaScript를 사용하여 웹 페이지의 노드를 추가, 삭제, 수정 및 확인하십시오. 웹 페이지에서 :
1. "Node 추가"버튼, "교체 버튼"과 관련된 드롭 다운 메뉴에서 노드 옵션을 추가하면서. 웹 페이지에 9 개의 노드가있는 경우 추가 및 팝업 경고가 허용되지 않습니다.
2. "마지막 노드 삭제"버튼을 "교체 버튼"과 관련된 드롭 다운 메뉴에서 노드 옵션을 줄입니다.
3. "노드 컨텐츠 교체"버튼 버튼을 먼저 작동 할 노드를 선택한 다음 교체 할 컨텐츠를 입력하면 해당 노드가 교체됩니다.
4. 웹 페이지에 노드가 없으면 삭제 또는 교체가 허용되지 않으며 팝업 경고가 제공됩니다.
3. 생산 과정
환경을 구성하지 않고 웹 페이지에 다음 코드를 작성하십시오. 특정 코드는 다음과 같습니다. 다음은 부분적으로 설명됩니다.
코드 코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javaScript">
var i = 0;
함수 createNode () {
if (i <9) {
i ++;
var 옵션 = document.createelement ( "옵션");
옵션 .value = i;
옵션 .innerhtml = "노드" + i.toString ();
document.getElementById ( "number"). AppendChild (옵션);
var p = document.createelement ( "p");
p.innerhtml = "노드" + i.toString ();
document.getElementById ( "d"). AppendChild (P);
} 또 다른
Alert ( "괜찮아, 노드가 너무 많아서 할 수 없어 ~");
}
함수 removenode () {
if (i> 0) {
나--;
var s = document.getElementById ( "number");
S.RemoveChild (S.LastChild);
var d = document.getElementById ( "d");
D.RemoveChild (D.LastChild);
} 또 다른
Alert ( "노드 없음, 원사 삭제 ~");
/*var ps = d.getElementsByTagName ( "P");*/
/* document.getElementById("d").removechild(ps=9]); */
}
함수 replacenode () {
if (i> 0) {
var d = document.getElementById ( "d");
var p = document.createelement ( "p");
p.innerhtml = document.getElementById ( "text"). 값;
var ps = d.getElementsByTagName ( "P")
D.replacechild (p, ps [document.getElementById ( "숫자"). 값 -1]);
} 또 다른
Alert ( "노드 없음, 원사 ~");
}
</스크립트>
</head>
<body>
<input type = "button"value = "create node"onclick = "createNode ()" />
<입력 유형 = "버튼"value = "마지막 노드 삭제"onclick = "removenode ()" />
<id = "number"> </select>를 선택하십시오
<입력 유형 = "텍스트"id = "텍스트" />
<input type = "button"value = "replaceNode content"onclick = "replaceNode ()" />
<div id = "d">
</div>
</body>
</html>
1. <body> 노드
다음과 같이 코드를 복사하십시오. <body>
<!-버튼 X2, 두 버튼 모두 해당 함수를 가리키는 동작을 클릭합니다.
<input type = "button"value = "create node"onclick = "createNode ()" />
<입력 유형 = "버튼"value = "마지막 노드 삭제"onclick = "removenode ()" />
<!-<sollite> 하위 노드가없는 드롭 다운 메뉴는 CreateNode () 노드에 의해 동시에 추가됩니다. ->
<id = "number"> </select>를 선택하십시오
<!-입력 상자 x1,이 텍스트 상자의 값을 얻으려면 id, relfacenode () 설정에주의를 기울이십시오->
<입력 유형 = "텍스트"id = "텍스트" />
<!-버튼 X1, 버튼 X2->와 동일합니다
<input type = "button"value = "replaceNode content"onclick = "replaceNode ()" />
<!-<p>의 상위 노드가없는 빈 레이어,이 <div> 노드의 모든 어린이가 추가됩니다.
<div id = "d">
</div>
</body>
2. <head> 노드
다음과 같이 코드를 복사하십시오. <head>
<!-웹 페이지에서 사용하는 인코딩 및 제목은 중요하지 않으며 키는 다음 JS 스크립트 파트입니다->
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> jsdivnode </title>
<script type = "text/javaScript">
/*현재 웹 페이지에 몇 개의 노드 수에 대한 전역 변수를 기록합니다*/
var i = 0;
/*아래에는 3 가지 기능이 있습니다. 버튼을 클릭하면*/
함수 createNode () {
/*웹 페이지에 9 개 미만의 노드가 있으면 작동합니다. 그렇지 않으면 팝업 창*/
if (i <9) {
/*각 레코드에 대해 하나 이상의 노드 추가 글로벌 변수 i+1*/
i ++;
/*옵션 노드를 만들면 포인터 이름도 옵션입니다*/
var 옵션 = document.createelement ( "옵션");
/*생성 된 옵션 노드의 값 속성이 i의 현재 값, 즉 i = 1 인 경우 <옵션 값 = 1> </옵션>과 같은 하위 노드가 있습니다. */
/*일부 웹 페이지는 setAttribute () 메소드를 사용하여 속성을 설정하지만 개인적으로 연습하는 것은 사용하기 쉽지 않습니다*/
옵션 .value = i;
/*옵션 노드 아래에 텍스트를 설정합니다. 이 명령문 후, 하위 노드는 <옵션 값 = 1> node1 </옵션>*/가됩니다.
옵션 .innerhtml = "노드" + i.toString ();
/*<select> 상위 노드의 ID는 숫자입니다. 이 명령문은 <select> </select>의 <옵션 값 = 1> node1 </옵션>*/가 상위 노드에 추가되어야합니다.
document.getElementById ( "number"). AppendChild (옵션);
/*원리는 위와 동일합니다. <div> 부모 노드 아래에 <p> 하위 노드를 추가하면 <p> 하위 노드의 텍스트 값은 Node1*/입니다.
var p = document.createelement ( "p");
p.innerhtml = "노드" + i.toString ();
document.getElementById ( "d"). AppendChild (P);
} 또 다른
Alert ( "괜찮아, 노드가 너무 많아서 할 수 없어 ~");
}
함수 removenode () {
/*웹 페이지에 0 개 이상의 노드가있는 경우, 즉 노드가 있고 팝업 창만이 있습니다.
if (i> 0) {
/*모든 노드 축소에 대해 현재 웹 페이지의 글로벌 변수 I-1이 기록됩니다.
나--;
/*<select>*/의 상위 노드에 대한 포인터 정의
var s = document.getElementById ( "number");
/*<select>의 상위 노드에서 마지막 자식 노드를 삭제합니다. 첫 번째를 삭제하려면 매개 변수가 S.FirstChild*/가됩니다.
S.RemoveChild (S.LastChild);
/*위와 동일한 원칙, <div> 레이어*/에서 마지막 자식 노드를 삭제하십시오.
var d = document.getElementById ( "d");
D.RemoveChild (D.LastChild);
/*<div>에서 8th <p>를 삭제하려면 다음과 같이하십시오*/
/*ps는 <p> child 노드 세트*/에 대한 포인터입니다.
/*var ps = d.getElementsByTagName ( "P");*/
/* document.getElementById("d").removechild(ps=9]); */
} 또 다른
Alert ( "노드 없음, 원사 삭제 ~");
}
함수 replacenode () {
/*웹 페이지에 0 개 이상의 노드가있는 경우, 즉 노드가 있고 팝업 창만이 있습니다.
if (i> 0) {
/*부모 노드 D*/에 대한 포인터 정의
var d = document.getElementById ( "d");
/*<p> </p> 노드 생성*/
var p = document.createelement ( "p");
/*텍스트 상자에 입력 한 내용을 가져 와서 <p> </p> 노드*/에 넣습니다.
p.innerhtml = document.getElementById ( "text"). 값;
/*ps는 <div> 부모 노드*/의 <p> hild 노드 세트 및 하위 노드 그룹에 대한 포인터입니다.
var ps = d.getElementsByTagName ( "P")
/*방금 만든 노드가 <div> 아래에 nth <p> 하위 노드를 교체하도록하십시오. 여기서 n은 드롭 다운 목록에서 선택한 값 -1입니다. -1의 이유는 어린이 노드 세트의 수와 어린이 그룹이 0부터 시작하고 인간 수는 1부터 시작하기 때문입니다. */
D.replacechild (p, ps [document.getElementById ( "숫자"). 값 -1]);
} 또 다른
Alert ( "노드 없음, 원사 ~");
}
</스크립트>
</head>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.