JavaScript | DOM API 조작 요소

1. WebAPI 배경 지식

JS는 세 가지 주요 부분으로 나뉩니다.

• ECMAScript: 기본 구문 부분
• DOM API: 페이지 구조 조작
• BOM API: 브라우저 운영

실제 프로그램을 작성하려면 언어를 아는 것만으로는 충분하지 않습니다. 관련 "생태학"도 마스터해야 합니다. 지원 라이브러리/프레임워크. 브라우저에서 JS를 실행하기 위한 가장 핵심 라이브러리는 DOM API입니다
.

JS용 브라우저에서 제공하는 기본 인터페이스로,
이 인터페이스를 기반으로 페이지의 요소에 대한 작업을 수행할 수 있습니다.

DOM => 문서 객체 모델

HTML에서는 각 html 태그를 JS에서 조작할 수 있는 객체로 간주하며, 이 객체를 조작하면 인터페이스 표시에 영향을 미칠 수 있습니다.

JS용 브라우저에서 제공하는 API는 매우 풍부하며
DOM API
BOM APl 그룹이 많이 있습니다.
실제로 다른
웹소켓 APl, 캔버스 APl...
총칭하여 WebAPI라고 하는 몇 가지가 있는데 주로 DOM을 소개합니다.

Native DOM API를 사용할 수는 있지만 불편하기 때문에
Native API 외에도 타사 라이브러리/프레임워크가 많이 존재하는데, 그 중 jquery가 가장 잘 알려진 라이브러리인
Vue 입니다. , React 및 기타 프런트엔드 프레임워크는 기본적으로 DOM을 기반으로 합니다.

jQuery

jQuery는 HTML과 JavaScript 간의 작업을 단순화하는 크로스 브라우저 JavaScript 라이브러리입니다.
가볍고 풍부한 DOM 선택기, 이벤트, 스타일, 애니메이션 지원, Ajax 작업 지원 및 강력한 확장성이 특징입니다.

부트스트랩

Boostrap은 일관성을 추구하는 프레임워크입니다.
크로스 디바이스, 크로스 브라우징, 반응형 레이아웃이 특징이며 HTML5 CSS3를 지원하고 덜 동적인 스타일 확장을 지원합니다.

jQuery UI

jquery ui는 데스크탑에 대한 jquery의 확장이며 시각적 인터페이스를 통해 구성될 수 있습니다.

API：

• API는 더 넓은 개념인 반면 WebAPI는 더 구체적인 개념, 특히 DOM+BOM입니다.

• 소위 API는 본질적으로 프로그래머가 개발을 용이하게 하기 위해 사용할 수 있는 기성 함수/객체입니다.
  도구 상자와 동일하지만 프로그래머가 사용하는 도구 상자는 많고 복잡한 기능을 가지고 있습니다.

DOM：

• DOM은 문서 개체 모델을 나타냅니다.

• W3C 표준은 다음과 같은 작업을 수행할 수 있는 일련의 기능을 제공합니다.

  • 웹 컨텐츠
  • 웹페이지 구조
  • 웹페이지 스타일

DOM 트리:

• 페이지의 구조는 DOM 트리라고 불리는 트리 구조입니다.

중요한 개념:

• 문서: 페이지는 문서로 표현되는 문서입니다.

• 요소: 페이지의 모든 태그를 요소라고 하며 요소로 표시됩니다.

• 노드: 웹 페이지의 모든 콘텐츠는 노드(라벨 노드, 코멘트 노드, 텍스트 노드, 속성 노드 등)라고 부를 수 있으며 노드로 표시됩니다.

이러한 문서와 기타 개념은 JS 코드의 개체에 해당하므로
"문서 개체 모델"이라고 합니다.

---

2. 요소 가져오기

1、쿼리선택기

• 페이지의 요소를 조작하려면 먼저 해당 JS 개체를 가져와야 합니다.
• DOM은 웹페이지의 요소를 얻을 수 있는 API 세트를 제공하며, 가장 중요한 두 가지는 다음과 같습니다
  querySelector.querySelectorAll

실제로 document 와 같은 개체의 속성 페이지
에 있는 전역 개체 입니다. 페이지가 로드되면 문서라는 전역 변수가 자동으로 생성됩니다. 그 안에 몇 가지 속성과 메서드가 있어 이를 조작할 수 있습니다. 페이지의 내용.

<div class="one">
    one
</div>

<div class="two">
    two
</div>

<ul>
    <li>
       three 
    </li>
</ul>

<script>
    // querySelector 参数就是一个 CSS 的选择器
    let div = document.querySelector('.one');
    console.log(div);

    // id 选择器
    let obj = document.querySelector('#two');
    console.log(obj);

    // 复合选择器
    let obj2 = document.querySelector('ul li');
    console.log(obj2); 
</script>

페이지 결과:

하나

둘

• 삼

---

2、쿼리SelectAll

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

<script>
    let obj2 = document.querySelector('ul li');
    console.log(obj2); 
</script>

querySelector 매개변수의 선택자가 여러 요소와 일치하는 경우 이때 반환되는 개체는 일치하는 결과의 첫 번째 요소
입니다 . 이 경우 이 모든 li를 선택querySelectAll 하려면 querySelectAll을 사용해야 합니다. 반환되는 것은 "배열"입니다. "에는 선택한 모든 요소가 포함되어 있습니다.

let obj2 = document.querySelectorAll('ul li');

하지만 정확히 말하면 querySelectorAll반환되는 것은 실제 네이티브 배열이 아닌 객체입니다. 그러나 이 객체는 길이를 가지며 아래 첨자를 통해 내부 요소에 액세스할 수도 있습니다. 이러한
객체는 배열과 매우 유사합니다(정확히 동일합니다). "의사 배열"

---

3. 이벤트

1. 이벤트란 무엇인가요?

• JS로 동적 페이지를 구축하려면 사용자 행동을 감지해야 합니다.
• 페이지에서 사용자의 일부 작업(클릭, 선택, 수정 등)은 JS에서 획득한 이벤트를 브라우저에 생성하여 보다 복잡한 대화형 작업을 허용합니다.
• 브라우저는 적의 상황(사용자 행동)을 감지하는 센트리 역할을 하며, 사용자가 반응하면(특정 동작 트리거) 센트리가 비콘 연기(이벤트)를 켜고, 후방에서는 이 연기를 이용해 적의 다음 전략을 결정할 수 있습니다.

JS의 많은 코드는 "이벤트"를 통해 트리거됩니다.

이벤트는 사용자 작업에 대한 브라우저의 "일반 이름"입니다(정확히 말하면 사용자 작업에 따라 이벤트가 모두 생성되는 것은 아니지만 대부분이 생성됩니다).

예를 들어, 페이지 위에서 마우스가 움직이면 마우스 이동 이벤트가 발생하고,
또 다른 예로, 페이지의 특정 위치에 마우스를 클릭하면 마우스 클릭 이벤트가 발생합니다. 또 다른 예를 들어, 마우스 휠을 사용하여 페이지를 스크롤하면 일련의 스크롤 이벤트가 생성됩니다. 또 다른 예로, 사용자가 키보드의 키를 누르면 키보드 이벤트도 생성됩니다. 또 다른 예로, 사용자가 브라우저 창 크기를 수정하면 창 크기 변경 이벤트도 생성됩니다.

JS의 주요 작업 중 하나는 다양한 이벤트에 대해 다양한 처리를 수행하는 것입니다.

---

2. 이벤트의 3가지 요소

• 이벤트 소스 : 이벤트를 생성한 HTML 요소입니다.
• 이벤트 종류 : 마우스 이동/마우스 클릭/키보드 이벤트/창 크기 변경 이벤트…
• 이벤트 핸들러 : 이벤트가 발생하면 어떤 JS 코드가 실행되고, 이를 추가적으로 어떻게 처리할지가 콜백 함수인 경우가 많습니다.

---

3. 클릭 이벤트

<!-- 事件源：button -->
<button>这是一个按钮</button>

<script>
    let button = document.querySelector('button');
    // 事件类型：onclick   事件处理函数：function
    button.onclick = function() {
    
    
        alert('hello');
    }
</script>

이 함수를 콜백 함수 로 호출 : 이 함수는 즉시 호출되지 않지만 적절한 경우 라이브러리/프레임워크에 의해 자동으로 호출됩니다.

또 다른 작성 방법: 페이지(HTML)를 더 지저분하게 작성하는 방법이므로 구조, 스타일, 동작을 분리할 수 있기를 바랍니다.

<button onclick="f()">这是一个按钮</button>

<script>
    function f() {
    
    
        alert('hello');
    }
</script>

---

4. 조작요소

작업 = 가져오기 + 수정

1. 요소 콘텐츠 조작
2. 요소 속성 조작
3. 요소의 스타일 조작

---

1. 요소 콘텐츠 조작

이는 객체의 innerHTML 속성을 통해 달성됩니다(요소에 포함된 HTML 코드는 어떤 모습입니까).

1.1.인쇄 내용

<div id="screen">hello world</div>

<button id="btn">这是一个按钮</button>

<script>
    let btn = document.querySelector('#btn');
    btn.onclick = function() {
    
    
        let screen = document.querySelector('#screen');
        console.log(screen.innerHTML);
    }
</script>

버튼을 여러 번 클릭하면 콘솔에 여러 개의 데이터가 표시되지 않고 숫자가 표시되는 것을 볼 수 있습니다. 콘솔은 기본적으로 동일한 인쇄물을 하나로 병합합니다. 이는 콘솔에서 설정할 수 있습니다. 비슷한 메시지

---

1.2. 콘텐츠 가져오기 버튼

<div id="screen">
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
</div>

<button id="btn">获取内容按钮</button>

---

1.3.콘텐츠 수정 버튼

<div id="screen">
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
</div>

<button id="btn">修改内容按钮</button>

<script>
    let btn = document.querySelector('#btn');
    btn.onclick = function() {
    
    
        let screen = document.querySelector('#screen');
        screen.innerHTML = '<h1>修改后的内容</h1>'
    }
</script>

---

1.4. 추가하려면 클릭하세요.

div에는 정수와 버튼이 표시되며, 버튼을 클릭할 때마다 내부의 정수는 +1이 됩니다.

참고: 여기서 innerHTML은 문자열 유형을 가져옵니다. 숫자를 추가하려면 문자열을 정수로 변환해야 합니다.

let val = screen.innerHTML;
console.log(typeof(val)); // string

val = parseInt(val);

Java의 parslnt는 Integer 클래스의 멤버 메소드입니다. 여기서 JS의 parslnt는 전역 함수와 동일합니다.

JS는 동적 유형이기 때문에 숫자로 변환한 후에도 여전히 valval에 할당될 수 있으므로 문자열 => 숫자 유형에서

<div id="screen">
    0
</div>

<button id="plus">+</button>

<script>
    let plusBtn = document.querySelector('#plus');
    plusBtn.onclick = function() {
    
    
        // 1、获取 screen 的值
        let screen = document.querySelector('#screen');
        let val = screen.innerHTML;
        val = parseInt(val);

        // 2、将这个值 + 1
        val = val + 1;
        
        // 3、把新值写回去
        screen.innerHTML = val;
    }
</script>

---

1.5. 입력을 클릭하여 추가하세요.

<input type="text" id="screen">

단일 태그(단일 개)로서 입력은 innerHTML을 가질 가치가 없으며 여기서 내부 내용은 입력의 value 속성을 통해 얻습니다.

<input type="text" id="screen" value="0">
<button id="plus">+</button>

<script>
    let plusBtn = document.querySelector('#plus');
    plusBtn.onclick = function() {
    
    
        // 1、获取 screen 的值
        let screen = document.querySelector('#screen');
        let val = screen.value;
        val = parseInt(val);

        // 2、将这个值 + 1
        val = val + 1;
        
        // 3、把新值写回去
        screen.value = val;
    }
</script>

---

2. 요소의 속성 조작

2.1. 사진을 전환하려면 클릭하세요.

통과하다dom 객체.속성 이름조작하시면 됩니다

<img src="picture1.jpg" alt="">

<script>
    let img = document.querySelector('img');
    img.onclick = function() {
    
    
        console.log(img.src); // 打印 src 属性的内容
        
        if (img.src.indexOf('picture1.jpg') >= 0) {
    
    
            img.src = 'picture2.jpg';
        } else if (img.src.indexOf('picture2.jpg') >= 0) {
    
    
            img.src = 'picture1.jpg';
        }
    }
</script>

HTML 태그에 어떤 속성을 쓸 수 있는지는 JS의 DOM 객체를 통해서도 얻을 수 있습니다.

console.dir이 메소드를 사용하여 DOM 객체의 모든 속성과 값을 인쇄 할 수 있습니다 .

console.dir(img);

---

3. 양식 요소 속성 가져오기/수정

양식의 다음 속성(주로 입력 태그)은 DOM을 통해 수정할 수 있습니다.

• value: 입력값입니다.
• disabled: 장애를 입히다
• checked: 체크박스는 다음을 사용합니다.
• selected: 드롭다운 상자는 다음을 사용합니다.
• type: 입력 유형(텍스트, 비밀번호, 버튼, 파일 등)

이러한 속성은 모두 양식 요소에만 적용되는 속성입니다.

---

3.1 클릭수 계산

입력창을 이용하여 초기값(정수)을 입력하고, 버튼을 클릭할 때마다 값 + 1

<input type="text" id="text" value="0">
<input type="button" id="btn" value='点我+1'>

    <script>
		var text = document.querySelector('#text');
		var btn = document.querySelector('#btn');
		
		btn.onclick = function () {
    
    
			var num = +text.value;
			console.log(num);
			num++;
			text.value = num;
		}
	</script>

• 입력에는 양식 요소의 내용을 결정하는 중요한 속성 값이 있습니다.
• 입력 상자인 경우 값은 입력 상자의 내용을 나타냅니다. 이 값을 수정하면 인터페이스 명시성에 영향을 미치며, 인터페이스에서 이 값을 수정하면 코드의 속성에도 영향을 줍니다.
• 버튼인 경우 value는 버튼의 내용을 나타내며, 이를 사용하여 버튼의 텍스트를 바꿀 수 있습니다.

---

3.2. 스위치 버튼 텍스트

이것이 "재생"과 "일시 정지" 사이를 전환하는 재생 버튼이라고 가정합니다.

<input type="button" value="播放">

<script>
    let input = document.querySelector('input');
    input.onclick = function() {
    
    
        if (input.value == '播放') {
    
    
            input.value = '暂停';
        } else if (input.value == '暂停') {
    
    
            input.value = '播放';
        }
    }
</script>

---

3.3.전체 선택/전체 선택 취소 버튼

All-Select 효과를 내기 위해서는 주로 입력의 Checked 속성을 사용합니다.

1. 모든 옵션을 선택 하려면 모두 선택 버튼을 클릭하세요.
2. 옵션을 취소 하면 전체 선택 버튼 의 체크상태가 자동으로 취소됩니다.

<input type="checkbox" id="all"> 全选 <br>
<input type="checkbox" class="girl"> 薛宝钗 <br>
<input type="checkbox" class="girl"> 林黛玉 <br>
<input type="checkbox" class="girl"> 王熙凤 <br>
<input type="checkbox" class="girl"> 贾探春 <br>

<script>
    // 1、获取元素
    let all = document.querySelector('#all');
    let girls = document.querySelectorAll('.girl'); // 

    // 2、给 all 注册点击事件
    all.onclick = function() {
    
    
        for (let i = 0; i < girls.length; i++) {
    
    
            // all.checked 就是 all 这个复选框的选中状态
            girls[i].checked = all.checked;
        }
    }

    // 3、针对每个 girl 注册点击事件，实现对于 all 的取消操作
    for (let i = 0; i < girls.length; i++) {
    
    
        girls[i].onclick = function() {
    
    
            all.checked = checkGirls(girls);
        }
    }

    function checkGirls(girls) {
    
    
        // 判断是不是所有的 girl 都被选中了
        for (let i = 0; i < girls.length; i++) {
    
    
            if (!girls[i].checked) {
    
    
                // 只要有一个是未选中，all 就是未选中状态
                return '';
            }
        }
        // 遍历完，所有都是选中状态，就让 all 也是选中状态
        return 'checked';
    }
</script>

---

4. 요소 스타일 조작

기본적으로 요소 속성에서도 작동합니다.

1. style인라인 스타일에 해당(스타일을 스타일에 직접 작성)
2. className/ classList내부 스타일 / 외부 스타일에 대응하여 / CSS 클래스 이름 집합이 적용됩니다.

---

4.1. 글꼴 크기를 늘리려면 클릭하세요.

let div = document.querySelector('div');
div.onclick = function() {
    
    
    // 1、获取当前的字体大小
    console.log(div.style.fontSize);   
}

알아채다:

1. CSS는 대소문자를 구분하지 않으며 일반적으로 카멜 케이스를 사용하지 않습니다. JS에서는 변수명으로 척추를 지원하지 않아 –사용할 수 없습니다. 모든 CSS 속성은 동일한 규칙에 따라 매핑됩니다.

2. 현재 여기서 구한 FontSize 는 string 인데 , 추가하려면 정수
'20px' => parselnt => 20
parslnt 로 변환해야 합니다. 변환 시 처음부터 끝까지 변환됩니다. , 숫자가 아닌 문자 'px'가 발견됩니다. , 변환이 중지됩니다.

3. CSS 속성 값 수정 시 단위에 꼭 주의하세요!! 해당 단위가 부적절하거나 누락된 경우 무효 처리됩니다.

<div style="font-size: 20px;">这是一个文本</div>

<script>
    let div = document.querySelector('div');
    div.onclick = function() {
    
    
        // 1、获取当前的字体大小
        console.log(parseInt(div.style.fontSize));
        let fontSize = parseInt(div.style.fontSize);

        // 2、在当前字体大小的基础上，多增加 5px
        fontSize += 5;
        div.style.fontSize = fontSize + 'px';
    }
</script>

HTML에서 클래스 이름을 나타내는 속성은 class입니다.

하지만 JS에서는 속성 이름이 className/ 가 되는데, 이 이름을 직접 classList사용하면 어떨까요 ?class

classJS의 키워드이기도 합니다. (JS ES6 버전 이상에서도 클래스 개념이 도입되었습니다.)

수정해야 할 스타일이 많을 경우 스타일을 통해 수정하는 것은 번거로우나 CSS 클래스의 도움을 받아 직접 수정할 수 있습니다.

---

4.2. 야간 모드

<style>
    .light {
    
    
        background-color: #fff;
        color: #000;
    }

    .dark {
    
    
        background-color: #000;
        color: #fff;
    }
</style>


<div class="light" style="height: 300px;">这是一段话</div>
<button>关灯</button>


<script>
    let div = document.querySelector('div');
    let button = document.querySelector('button');
    button.onclick = function() {
    
    
        if (div.className == 'light') {
    
    
            div.className = 'dark';
            button.innnerHTML = '开灯';
        } else if (div.className == 'dark') {
    
    
            div.className = 'light';
            button.innerHTML = '关灯';
        }
     }
</script>

---

4.4. 색상 전환

tomcat\webapps\ROOT에 배포

    <style>
        div {
      
      
            width: 500px;
            height: 300px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            line-height: 300px;
            
            background-image: url(f:/Photos/520.png);
            background-size: 100%, 100%;
        }

        .one {
      
      
            color: orange;
        }

        .two {
      
      
            color: green;
        }

        button {
      
      
            width: 150px;
            height: 50px;
            background-color: rgb(0, 128, 128);
            border-radius: 10px;
            border: none;
            outline: none;
        }

        button:active {
      
      
            background-color: #666;
        }
    </style>

    <div class="one">have a good day!</div><br>
    <button style="font-size: 17px;">orange</button>

    <script>
        let div = document.querySelector('div');
        let button = document.querySelector('button');
        button.onclick = function() {
      
      
            if (div.className == 'one') {
      
      
                div.className = 'two';
                button.innerHTML = 'green';
            } else if (div.className == 'two') {
      
      
                div.className = 'one';
                button.innerHTML = 'orange';
            }
        }
    </script>

---

5. 운영 노드

요소 조작 의 경우 실제로는 요소의 속성을 조작하는 것입니다 . (요소 자체는 변경되지 않았습니다.) 노드
조작 의 경우 실제로 노드를 추가/삭제하는 것입니다 .

5.1 새 노드 추가

두 단계로 나누어집니다:

1. 요소 노드 생성

2. DOM 트리에 요소 노드 삽입

1단계는 아기를 낳는 것과 같고, 2단계는 아기를 위한 세대 등록과 같습니다.

새 노드를 만듭니다.

메소드를 사용하여 createElement요소를 생성하십시오. options 매개변수는 아직 고려되지 않습니다.

<script>
    let newDiv = document.createElement('div'); // 创建标签
    newDiv.id = 'newDiv';
    newDiv.className = 'one';
    newDiv.innerHTML = 'hello';
    console.log(newDiv);
</script>

여기서 생성된 노드는 DOM 트리에 매달리지 않아 브라우저 페이지에 표시될 수 없습니다.

위 소개에서는 요소 노드만 생성하며 다음을 사용할 수도 있습니다.

• createTextNode는 텍스트 노드를 생성합니다.

• createComment는 주석 노드를 생성합니다.

• createAttribute는 속성 노드를 생성합니다.

주로 createElement를 사용할 수 있습니다.

DOM 트리에 노드를 걸어 놓습니다.

appendChild지정된 노드의 마지막 하위 노드 뒤의 노드에 노드를 삽입하는 데 사용됩니다 .

<div class="container"></div>

<script>
    let newDiv = document.createElement('div'); // 创建标签
    newDiv.id = 'newDiv';
    newDiv.className = 'one';
    newDiv.innerHTML = 'hello';
    console.log(newDiv);

    let container = document.querySelector('.container');
    container.appendChild(newDiv);
</script>

insertBefore를 사용하여 지정된 노드 앞에 노드를 삽입할 수도 있습니다.

• var insertNode = parentNode.insertBefore(newNode, referenceNode);

• insertNode 삽입된 노드(newNode)
• parentNode 새로 삽입된 노드의 상위 노드입니다.
• newNode는 삽입에 사용되는 노드입니다.
• referenceNode newNode가 이 노드 앞에 삽입됩니다.

referenceNode가 null이면 newNode가 하위 노드 끝에 삽입됩니다.

참고: referenceNode 참조 노드는 선택적 매개변수가 아닙니다.

<div class="container">
	<div>11</div>
	<div>22</div>
	<div>33</div>
	<div>44</div>
</div>

<script>
	var newDiv = document.createElement('div');
	newDiv.innerHTML = '我是新的节点';
	
	var container = document.querySelector('.container');
	console.log(container.children);
	container.insertBefore(newDiv, container.children[0]);
</script>

참고 1: 노드를 두 번 삽입하면 마지막 노드만 적용됩니다. (요소를 이동하는 것과 동일)

<div class="container">
	<div>11</div>
	<div>22</div>
	<div>33</div>
	<div>44</div>
</div>

<script>
	var newDiv = document.createElement('div');
	newDiv.innerHTML = '我是新的节点';

	var container = document.querySelector('.container');
	console.log(container.children);
	// 此处的 children 里有 4 个元素
	container.insertBefore(newDiv, container.children[0]);
	// 此处的 children 里有 5 个元素(上面新插了一个), 0 号元素是 新节点,
	// 1 号元素是 11, 2号节点是 22, 所以是插入到 22 之前.
	container.insertBefore(newDiv, container.children[2]);
</script>

참고 2: 노드가 삽입되면 노드 개체에 대한 수정 사항이 DOM 트리의 콘텐츠에 동기적으로 영향을 미칠 수 있습니다.

<div class="container">
	<div>11</div>
	<div>22</div>
	<div>33</div>
	<div>44</div>
</div>

<script>
	var newDiv = document.createElement('div');
	newDiv.innerHTML = '我是新的节点';
	var container = document.querySelector('.container');
	console.log(container.children);
	container.insertBefore(newDiv, container.children[0]);
	// 插入完毕后再次修改 newDiv 的内容
	newDiv.innerHTML = '我是新节点2';
</script>

---

5.2 노드 삭제

노드를 삭제하려면 먼저 상위 노드를 가져온 다음 삭제할 하위 노드를removeChild 가져와야 하며 다음을 통해 삭제할 수 있습니다.
removeChild

• oldChild = element.removeChild(자식);
• child는 삭제할 노드입니다.
• 요소는 자식의 상위 노드입니다.
• 반환 값은 삭제된 노드입니다.
• 삭제된 노드는 DOM 트리에서만 삭제되지만 여전히 메모리에 남아 있으며 언제든지 DOM 트리의 다른 위치에 추가될 수 있습니다.
• 위 예제의 하위 노드가 요소 노드의 하위 노드가 아닌 경우 이 메서드는 예외를 발생시킵니다.

<div class="container"></div>

<button>删除 div</button>

<script>
    let newDiv = document.createElement('div'); // 创建标签
    newDiv.id = 'newDiv';
    newDiv.className = 'one';
    newDiv.innerHTML = 'hello';
    console.log(newDiv);

    let container = document.querySelector('.container');
    container.appendChild(newDiv);

    let button = document.querySelector('button');
    button.onclick = function() {
    
    
        container.removeChild(newDiv); // 前面已经获取了
    }
</script>

---

5. 코드 케이스

1. 숫자를 맞춰보세요

Math.random에서 얻은 임의의 십진수 [0, 1)에서 1 - 100을 생성하는 방법은 무엇입니까 ?
먼저 *100, [0, 100) 사이의 소수점을 구합니다. 그런 다음 반올림합니다 Math.floor. 즉, 소수 부분을 직접 버립니다.

<button id="resetBtn">重新开始一局游戏</button> <br>
<span>要猜的数字：</span>
<input type="text">
<button id="guessBtn">猜</button> <br>
<span>结果：</span> <span id="result"></span> <br>
<span>已经猜的次数：</span> <span id="guessCount">0</span>
    
<script>
    // 1、需要用到的元素
    let resetBtn = document.querySelector('#resetBtn');
    let input = document.querySelector('input');
    let guessBtn = document.querySelector('#guessBtn');
    let resultSpan = document.querySelector('#result');
    let guessCountSpan = document.querySelector('#guessCount');
    
    // 2、生成一个 1 - 100 的随机数
    let toGuess = Math.floor(Math.random() * 100) + 1;
    console.log(toGuess);

    // 3、实现点击 猜 按钮的逻辑
    guessBtn.onclick = function() {
    
    
        // 1) 读取 input 输入的内容，转成整数
        if (input.value == '') {
    
    
            return;
        }
        let curNum = parseInt(input.value);
        // 2) 判断大小 给出提示
        if (curNum < toGuess) {
    
    
            resultSpan.innerHTML = '低了';
            resultSpan.style.color = 'red';
        } else if (curNum > toGuess) {
    
    
            resultSpan.innerHTML = '高了';
            resultSpan.style.color = 'red';
        } else {
    
    
            resultSpan.innerHTML = '猜对了';
            resultSpan.style.color = 'green'               ;
        }
        // 3) 更新猜的次数
        let guessCount = parseInt(guessCountSpan.innerHTML);
        guessCountSpan.innerHTML = guessCount + 1;
    }

    // 4、实现 reset 操作，开始游戏
    resetBtn.onclick = function() {
    
    
        // 让页面刷新即可
        // location 是和 document 并列关系的对象，用来控制页面的链接/地址，通过 reload 操作就可以刷新页面
        location.reload();
    }
</script>

---

2. 고백의 벽

<style>
    * {
      
      
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
      
      
        width: 100%;
    }

    h3 {
      
      
        text-align: center;
        padding: 30px 0; /* 上下内边距 20，左右为 0 */
        font-size: 24px;
    }

    p {
      
      
        text-align: center;
        color: #999;
        padding: 10px 0;
    }

    .row {
      
      
        width: 400px;
        height: 50px;
        margin: 0 auto;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .row span {
      
      
        width: 60px;
        font-size: 20px;
    }

    .row input {
      
      
        width: 300px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        text-indent: 0.5em;
        /* 去掉输入框的轮廓线 */
        outline: none;
    }

    .row #submit {
      
      
        width: 200px;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        margin: 0 auto;
        color: white;
        background-color: orange;
        /* 去掉边框 */
        border: none;
        border-radius: 10px;
    }

    /* 按下的效果 */
    .row #submit:active {
      
      
        background-color: grey;
    }
</style>

<div class="container">
    <h3>表白墙</h3>
    <p>输入后点击提示，会将信息显示在表格中</p>
    <div class="row">
        <span>谁：</span>
        <input type="text">
    </div>
    <div class="row">
        <span>对谁：</span>
        <input type="text">
    </div>
    <div class="row">
        <span>说：</span>
        <input type="text">
    </div>
    <div class="row">
        <button id="submit">提交</button>        
    </div>
</div>

<script>
    // 当用户点击 submit，就会获取 input 中的内容，把内容构造成一个 div，插入页面末尾
    let submitBtn = document.querySelector('#submit');
    submitBtn.onclick = function() {
      
      
        // 1、获取 2 个 input
        let inputs = document.querySelectorAll('input');
        let from = inputs[0].value;
        let to = inputs[1].value;
        let msg = inputs[2].value;
        if (from == '' || to == '' || msg == '') {
      
       // 用户还未填写完毕
            return;
        }
        // 2、生成一个新的 div，内容就是 input 中的内容，新的 div 加到页面中
        let div = document.createElement('div');
        div.innerHTML = from + ' 对 ' + to + ' 说 ' + msg;
        div.className = 'row'; // 应用 row 的样式
        let container = document.querySelector('.container');
        container.appendChild(div);
        // 3、清空之前输入框的内容
        for (let i = 0; i < inputs.length; i++) {
      
      
            inputs[i].value = '';
        }
    }
</script>

우리가 방금 작성한 고백벽 프로그램은 우리가 제출한 메시지를 저장하기 위해 div.rows를 사용합니다. 이 div.rows는 DOM 트리에 걸려 있고 메모리에 있습니다. 페이지를 새로 고치거나 닫으면 쉽게 손실됩니다. ,
이때 , 이전에 메모리에 저장된 데이터는 사라집니다.

위의 쉬운 데이터 손실 문제를 해결하기 위해 다음과 같은 솔루션이 있습니다.

1. 제출된 데이터는 브라우저에 로컬로 저장할 수 있습니다.(브라우저는 로컬 저장소를 실현할 수 있는 localStorage/indexDB와 같은 메커니즘을 제공합니다.) 기본적으로 저장하려는 데이터는 브라우저를 통해 현재 컴퓨터의 디스크에 저장됩니다. 질문
   : 내 컴퓨터에서는 나만 볼 수 있고 다른 사람은 볼 수 없습니다.

2. 제출된 데이터는 네트워크 통신을 통해 서버로 전송되어 서버에 저장될 수 있습니다.

   • 서버는 메모리에 보관됩니다.
   • 파일에 저장된 서버
   • 서버는 이를 데이터베이스에 저장합니다.

---

3. 할 일 항목

<style>
    * {
      
      
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container {
      
      
        width: 800px;
        margin: 0 auto;
        display: flex;
    }
    .todo,
    .done {
      
      
        width: 50%;
        height: 100%;
    }
    .container h3 {
      
      
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: #333;
        color: #fff;
    }
    .nav {
      
      
        width: 800px;
        height: 100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }
    .nav input {
      
      
        width: 600px;
        height: 50px;
    }
    .nav button {
      
      
        width: 200px;
        height: 50px;
        border: none;
        background-color: orange;
        color: #fff;
    }
    .row {
      
      
        height: 50px;
        display: flex;
        align-items: center;
    }
    .row input {
      
      
        margin: 0 10px;
    }
    .row span {
      
      
        width: 300px;
    }
    .row button {
      
      
        width: 50px;
        height: 40px;
    }
</style>

<div class="nav">
    <input type="text">
    <button>新建任务</button>
</div>
<div class="container">
    <div class="todo">
        <h3>未完成</h3>
        <div class="row">
            <input type="checkbox">
            <span>任务</span>
            <button>删除</button>
        </div>
    </div>
    <div class="done">
        <h3>已完成</h3>
    </div>
</div>

<script>
    // 一、实现新增任务
    let addTaskButton = document.querySelector('.nav button');
    addTaskButton.onclick = function () {
      
      
        // 1. 获取到任务内容的输入框
        let input = document.querySelector('.nav input');
        // 2. 获取到输入框内容
        let taskContent = input.value;
        // 3. 根据内容新建一个元素节点
        let row = document.createElement('div');
        row.className = 'row';
        let checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        let span = document.createElement('span');
        span.innerHTML = taskContent;
        let button = document.createElement('button');
        button.innerHTML = '删除';
        row.appendChild(checkbox);
        row.appendChild(span);
        row.appendChild(button);
        // 4. 把新节点插入到 todo 中
        let todo = document.querySelector('.todo');
        todo.appendChild(row);

        // 二、点击复选框后将元素放到 "已完成"
        //    在事件回调函数中使用 this 能够获取到当前处理事件的元素.
        //    通过 this.parentNode 属性能够获取到当前元素的父元素.
        //    点击 checkbox 时, 会先修改 value , 再触发点击事件
        
        // 修改 addTaskButton.onclick
        // 5. 给 checkbox 注册点击事件
        checkbox.onclick = function () {
      
      
            //
            var row = this.parentNode;
            // 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数
            if (this.checked) {
      
      
                var target = document.querySelector('.done');
            } else {
      
      
                var target = document.querySelector('.todo');
            }
            target.appendChild(row);
        }

        // 三、点击删除按钮删除该任务
        // 6. 给删除按钮注册点击事件
        button.onclick = function () {
      
      
            let row = this.parentNode;
            let grandParent = row.parentNode;
            grandParent.removeChild(row);
        }
    }
</script>

---