집 > 기사 > 웹 프론트엔드 > 웹 페이지의 추가, 삭제, 수정, 확인을 위한 JavaScript 사용 예시 node_javascript 기술

웹 페이지의 추가, 삭제, 수정, 확인을 위한 JavaScript 사용 예시 node_javascript 기술

WBOY원래의: 2016-05-16 16:16:181561검색

이 기사의 예에서는 웹 페이지 노드를 추가, 삭제, 수정 및 확인하기 위해 JavaScript를 사용하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. 기본 개념

이 부분이 소위 "HTML DOM"입니다. 소위 HTML DOM은 웹 페이지 구성의 기본 공식인 규칙입니다.

즉, 모든 웹페이지는 ... 규칙에 따라 작성되어야 하며 해당 규칙에 따라 로드되어야 합니다.

일명 "웹 페이지 노드"는 "DOM 노드"에 대한 유명한 설명이라고도 합니다. 예를 들어 html 노드 아래의 콘텐츠는 사이의 모든 콘텐츠입니다. 본문 노드 아래의 콘텐츠는 사이의 모든 내용입니다.

HTML DOM은 다음과 같이 규정됩니다. 1. 전체 문서는 문서 노드입니다. 2. 각 HTML 태그(단순한 태그가 아니라

와 같은 html 태그를 의미함) 요소 노드 3. HTML 요소에 포함된 텍스트는 텍스트 노드입니다. 4. 각 HTML 속성은 속성 노드입니다. 예를 들어 다음 DOM 노드 트리로 페이지를 그릴 수 있습니다.

HTML DOM의 공식적인 정의는 다음과 같습니다. HTML DOM은 HTML Document Object Model의 약어이며, HTML DOM은 HTML/XHTML에 특별히 적용되는 문서 객체 모델입니다. 소프트웨어 개발에 익숙한 사람들은 HTML DOM을 웹 페이지의 API로 이해할 수 있습니다. 웹 페이지의 각 요소를 객체로 취급하므로 웹 페이지의 요소를 컴퓨터 언어로 얻거나 편집할 수도 있습니다. 예를 들어, Javascript는 HTML DOM을 사용하여 웹 페이지를 동적으로 수정할 수 있습니다.

JavaScript를 사용하면 이러한 DOM 노드에서 웹 페이지 노드의 추가, 삭제, 수정 및 확인을 쉽게 제어할 수 있습니다.

2. 기본 목표

웹페이지에서 노드를 추가, 삭제, 수정, 확인하려면 JavaScript를 사용하세요. 웹페이지에는 다음이 있습니다:

1. "노드 추가" 버튼. 노드를 추가하는 동안 이 버튼은 "교체 버튼"과 관련된 드롭다운 메뉴에 노드 옵션도 추가합니다. 웹 페이지에 9개의 노드가 있으면 추가되지 않고 경고가 나타납니다.

2. "마지막 노드 삭제" 버튼. 이 버튼은 "교체 버튼"과 관련된 드롭다운 메뉴에서 노드 옵션을 줄이는 동시에 노드를 줄입니다.

3. "노드 컨텐츠 교체" 버튼을 먼저 작동시켜야 할 노드를 선택한 후 교체할 컨텐츠를 입력하면 해당 노드가 교체됩니다.

4. 웹페이지에 노드가 없으면 삭제 및 교체가 허용되지 않으며 경고창이 뜹니다.

3. 제작과정

어떤 환경도 구성할 필요가 없으며, 웹 페이지에서 직접 다음 코드를 작성하면 됩니다. 구체적인 코드는 다음과 같으며, 아래에서 부분적으로 설명하겠습니다.

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

    <머리>

        jsdivnode
<스크립트 유형="텍스트/자바스크립트">
var 나는 = 0;

함수 createnode() {
    if (i < 9) {
        나 ;
        var option = document.createElement("option");
        옵션.값 = i;
        option.innerHTML = "노드" i.toString();
        document.getElementById("number").appendChild(option);

        var p = document.createElement("p");
        p.innerHTML = "노드" i.toString();
        document.getElementById("d").appendChild(p);
    } 그 외
        Alert("爷行行好了, 多多节点, 臣妾做不到啊~");
}

함수 제거 노드() {
    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]); */
}

함수 교체 노드() {
    if (i > 0) {
        var d = document.getElementById("d");
        var p = document.createElement("p");
        p.innerHTML = document.getElementById("text").value;
        var ps = d.getElementsByTagName("p")
        d.replaceChild(p, ps[document.getElementById("number").value - 1]);
    } 그 외
        Alert("没有节点，替换个毛线啊~");
}



    <본문>

성명：

이전 기사：웹 페이지 배경 및 글꼴 color_javascript 기술을 변경하는 JavaScript 방법다음 기사：웹 페이지 배경 및 글꼴 color_javascript 기술을 변경하는 JavaScript 방법

웹 페이지의 추가, 삭제, 수정, 확인을 위한 JavaScript 사용 예시 node_javascript 기술

관련 기사