APl DOM 문서 객체 모델

1. DOM 소개

1. DOM이란?

Document Object Model (DOM)은 확장 가능한 마크 업 언어를 처리하기 위해 W3C 조직에서 권장하는 표준 프로그래밍 인터페이스 입니다. W3C는 웹 페이지의 콘텐츠 및 구조 스타일을 변경할 수있는 일련의 DOM 인터페이스를 정의했습니다.

2. DOM 트리

여기에 사진 설명 삽입

문서 : 페이지는 DOM에서 문서로 표시되는 문서입니다.
요소 : 페이지의 모든 태그는 DOM의 요소로 표시되는 요소입니다.
노드 : 웹 페이지의 모든 콘텐츠는 노드 (라벨, 속성, 텍스트, 댓글 등)입니다. DOM 에서 노드의 사용은 DOM을 나타냅니다
. 위의 콘텐츠는 객체로 간주됩니다.

2. 요소를 얻는 방법

1. 페이지의 요소를 가져 오는 방법에는 여러 가지가 있습니다.

ID로 받기
태그 이름에 따라 가져 오기
HTML5의 새로운 방법으로 획득
특수 요소 획득

1. ID로 획득

getElementByld () 메서드를 사용하여 ID가있는 요소 개체를 가져옵니다.

코드 데모

<body>
    <div id="time">2020-11-26</div>
    <script>
        // 1.因为我们文档页面从上往下加载，所以先得有标签 所以我们的script写在标签下面
        // 2.    document文档    get 获得 element 元素 by 通过 驼峰命名法
        // 3.参数 id是大小写敏感的字符串
        // 4.返回的是一个对象
        var timer = document.getElementById('time');
        console.log(timer);
        // 5.console.dir 打印我们返回得的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

2. 태그 이름에 따라 획득

getElementsByTagName () 메서드를 사용하여 지정된 태그 이름을 가진 객체 컬렉션을 반환합니다.
구문은 다음과 같습니다.

document.getElementsByTagName('标签名')

노트:

1. 우리가 얻는 것은 객체의 집합이기 때문에 우리가 조작하려는 요소를 사용하기 위해 트래버스해야합니다.
동적 요소 개체 가져 오기

코드 데모

<body>
    <ul>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
        <li>我们的征程是星辰大海</li>
    </ul>
    <ul id="nav">
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
        <li>心存感恩，所遇皆美好~</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li')
        console.log(lis);
        // 2.如果想要依次打印里面的元素对象我们可以采取遍历方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3.这里可以是可以获取标签的.getElementsByTagName()可以得到这个元素里面的某些标签
        var nav1 = document.getElementById('nav') //这个获取nav元素
        var navli = nav.getElementsByTagName('li') //这里是获取nav 里面的li标签  要先获取 nav元素在获取里面的li
        console.log(navli);
    </script>
</body>

3. HTML5의 새로운 방법을 통해 획득 (호환성 참고)

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

3. document.querySelectorAll('选择器'); // 根据指定选择器返回

참고 : querySelector 및 querySelectorAll의 선택기는 다음과 같은 기호 를 추가 해야합니다 . document.querySelector ( '# nav');

코드 데모

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        // 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>

4. 특별한 요소 (본문, html) 얻기

본문 요소 가져 오기

 - doucumnet.body // 返回body元素对象

HTML 요소 가져 오기

. document.documentElement // 返回html元素对象

코드 데모

<body>
    <script>
        // 获取bdoy元素
        var bodyEle = document.body
        console.log(bodyEle); //返回body元素
        // 获取html元素
        var htmlEle = document.documentElement
        console.log(htmlEle); //返回html元素
    </script>
</body>

3. 이벤트 기준

1. 이벤트 개요

JavaScript를 사용하면 동적 페이지를 만들 수 있으며 이벤트는 JavaScript에서 감지 할 수있는 동작입니다.
간단한 이해 : 트리거-응답 메커니즘.
웹 페이지의 모든 요소는 자바 스크립트를 트리거 할 수있는 특정 이벤트를 생성 할 수 있습니다. 예를 들어 사용자가 버튼을 클릭 할 때
이벤트를 생성 한 다음 특정 작업을 수행 할 수 있습니다.

코드 데모

<body>
    <button id="btn">浩哥</button>
    <script>
        // 点击一个按钮，弹出一个对话框
        // 1.事件是有三部分组成的 1.事件源 2.事件类型 3.事件处理程序 也称为事件三要素
        // (1).事件源 事件被触发的对象  
        var but = document.getElementById('btn')
            // (2).事件类型   如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过还是？？？？
            // (3).事件处理程序 通过一个函数赋值的方式 完成  因为函数就是实现某种功能的
        but.onclick = function() {
            alert('浩哥爱编程')
        }
    </script>
</body>

여기에 사진 설명 삽입

2. 이벤트 실행 단계

1. 이벤트 소스 가져 오기 (요소를 가져 오려는 의미)
2. 이벤트 등록 (이벤트 바인딩은 마우스 전달 또는 마우스 클릭 등과 같은 동작 처리 방법을 의미합니다.)
3. 이벤트 핸들러 추가 (사용 기능 할당 양식은 원하는 것을 의미합니다)

코드 데모

<body>
    <div>123</div>
    <script>
        // 事件执行步骤   点击div 控制台输出我被选中了
        // 1.获取事件源
        var div = document.querySelector('div')
            // 2.绑定事件 注册事件
            // div.onclick
            // 3.添加事件处理程序
        div.onclick = function() {
            console.log('我被点击了');
        }
    </script>
</body>

여기에 사진 설명 삽입

3. 일반적인 마우스 이벤트

여기에 사진 설명 삽입
마우스가 계속 움직입니다. 마우스 이동 이벤트를 사용하십시오. mousemove

4. 작동 요소

JS의 DOM 작업은 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있으며 DOM 작업 요소를 사용하여 요소의 콘텐츠 및 속성을 변경할 수 있습니다. 다음은 모두 속성입니다.

1. 작업 요소 내용 (요소 내용 변경)

elemeny.innerText

시작 위치에서 끝 위치까지의 내용이지만 html 태그를 제거하고 공백과 줄 바꿈도 제거합니다.

elemernt.innerHTML

공백과 줄 바꿈을 유지하면서 시작 위치에서 끝 위치까지의 모든 콘텐츠 (html 태그 포함)

코드 데모

  <title>Document</title>
    <style>
        div,
        p {
            height: 30px;
            width: 300px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>123</p>
    <script>
        // 当我们点击了按钮，div里面的文字会发生变化
        // 1.获取元素  注意这里的按钮 和div都要获取到 因为 点击按钮div里面要发生变化所以都要获取
        var but = document.querySelector('button');
        var div = document.querySelector('div');
        // 2.绑定事件
        // but.onclick
        // 3.程序处理
        but.onclick = function() {
        // 改变元素内容 element(元素).innerText
        div.innerText = '2020-11-27'
        }
        // 4.我们元素可以不用添加事件，就可以直接显示日期
        var p = document.querySelector('p');
        p.innerText = '2020-11-27';
    </script>

여기에 사진 설명 삽입

elemeny.innerText와 elemeny.innerHTML
코드 데모 의 차이점

<body>
    <div></div>
    <p></p>
    <ul>
        <li> 文字</li>
        <li>123</li>
    </ul>
    <script>
        // innertText 和 innertHTML 的区别
        // 1. innerText 不识别html标签 非标准 去除空格和换行
        var div = document.querySelector('div');
        div.innerText = '<strong>今天是:</strong> 2020';

        // 2.innertHTML 识别html标签 W3C标准 保留空格和换行的   推荐尽量使用这个 因为这个是标准
        var p = document.querySelector('p')
        p.innerHTML = '<strong>今天是:</strong> 2020';

        // 3.这俩个属性是可读写的 意思是 除了改变内容还可以获得元素里面的内容的
        var ul = document.querySelector('ul')
        console.log(ul.innerText);
        console.log(ul.innerHTML);
    </script>
</body>

여기에 사진 설명 삽입

2. 공통 요소 속성 조작

innerText, innerHTML 변경 요소 내용
src 、 href
id 、 alt 、 title

코드 데모

<body>
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button><br>
    <img src="./images/ldh.jpg" alt="" width="200px" height="200px" title="刘德华" id="img">
    <script>
        // 修改属性 src
        // 我们可以操作元素得方法 来修改元素得属性 就是 元素的是什么属性 在重新给值就可以完成相应的赋值操作了
        // 1.获取元素
        var ldh = document.getElementById('ldh')
        var zxy = document.getElementById('zxy')
        var img = document.getElementById('img')
            // 2.注册事件 程序处理
        zxy.onclick = function() {
            // 当我们点击了图片的时候图片路径就发生变化   这里的.表示 的 得意思
            img.src = './images/zxy.jpg';
            // 当我们变换图片得同时里面得title也要跟着变 所以前面要加上img.
            img.title = '张学友';
        }
        ldh.onclick = function() {
            img.src = './images/ldh.jpg';
            img.title = '刘德华';
        }
    </script>

여기에 사진 설명 삽입

3. 양식 요소 속성 조작

DOM을 사용하여 다음 양식 요소의 속성을 조작하십시오.

type、value、checked、selected、disabled

코드 데모 :

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 我想把value里面的输入内容改变为 被点击了
        // 1.获取元素
        var but = document.querySelector('button')
        var input = document.querySelector('input')
            // 2.注册事件 处理程序
        but.onclick = function() {
            // input.innerHTML = '被点击了'; 这个是 普通盒子 比如 div 标签里面的内容
            // 表单里面的值 文字内容是通过value来修改的
            input.value = '被点击了'
                // 如果需要某个表单被禁用 不能再点击了使用 disabled  我们想要这个按钮 button禁用
                // but.disabled = true
                // 还有一种写法
                // this指向的是事件函数的调用者 谁调用就指向谁 这里调用者是btn
            this.disabled = true
        }
    </script>
</body>

여기에 사진 설명 삽입

4. 요소 스타일 속성 조작

JS를 통해 요소의 크기, 색상, 위치 및 기타 스타일을 수정할 수 있습니다.

 1.element.style 行内样式操作

노트:

JS의 스타일은 fontSize, backgroundColor와 같은 카멜 케이스 명명법을 채택합니다.
JS는 스타일 작업을 수정하여 인라인 스타일을 생성하므로 인라인 스타일이 인라인 스타일보다 높습니다.

코드 데모

   <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 要求点击div变成粉色 height变为250px
        // 1.获取元素
        var div = document.querySelector('div');
        // 2.注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取的是驼峰命名法
            // this等于div this调用者 谁调用谁执行
            this.style.backgroundColor = 'pink'
            this.style.height = '250px'
        }
    </script>

여기에 사진 설명 삽입

 2.element.className 类名样式操作

노트:

스타일 변경이 많은 경우 클래스 이름을 조작하여 요소 스타일을 변경할 수 있습니다.
class는 예약어이므로 className을 사용하여 요소 클래스 이름 속성을 조작하십시오.
className은 요소의 클래스 이름을 직접 변경하고 원래 클래스 이름을 덮어 씁니다.

코드 데모

  <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>


<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况 如果想继续添加样式即在change添加即可
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>

여기에 사진 설명 삽입

5. 사용자 지정 속성 작업

1. 속성 값 얻기

요소 속성은 속성 값을 가져옵니다.
element.getAttribute ( '속성');

차이점:

요소 속성은 기본 제공 속성 (요소 자체와 함께 제공되는 속성)의 값을 가져옵니다.
element.getAttribute ( 'attribute'); 주로 사용자 정의 속성 (표준)을 사용자 정의 속성 가져옵니다.

2. 속성 값 설정

element.attribute = 'value'내장 속성의 값을 설정합니다.
element.setAttribute ( 'attribute', 'value')

차이점:

요소 속성은 기본 제공 속성 값을 설정합니다.
element.setAttribute ( 'attribute'); 주로 맞춤 속성 설정 (표준)

3. 속성 제거

element.removeAttribute ( 'attribute');

코드 데모

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1.获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        // (2) element.getAttribute('属性') get获取得到 attribute属性的意思 我们自己添加的属性称之为自定义属性
        console.log(div.getAttribute('id')); //demo
        console.log(div.getAttribute('index')); // 1
        // 2.修改元素的属性值
        // (1) element.属性 = '值' 
        div.id = 'test'
        div.className = 'navs'
            // (2) element.setAttribute('属性','值')
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer') //这里就是class 不是className 比较特殊
            // 3.移除属性 removeAttribute(属性)
        div.removeAttribute('index');
    </script>
</body>

사용자 지정 속성 인 한 element.setAttribute ( 'attribute', 'value')를 사용하여 설정하는 것이 가장 좋습니다. 자체 포함 속성 인 경우 element.attribute를 사용하여 설정합니다.

6. H5 사용자 정의 속성

사용자 지정 속성의 목적 : 첫째, 속성 저장 및 둘째, 데이터 사용 . 일부 데이터는 데이터베이스에 저장하지 않고 페이지에 저장할 수 있습니다.
사용자 정의 속성의 getAttribute ( '속성')를 통해 얻을 수있다,
하지만 일부 사용자 지정 특성이 원인 모호성에 쉽게, 그리고 그것이 요소 또는 사용자 정의 속성이 있는지 여부를 확인하는 것은 쉽지 않다.
H5는 추가 사용자 정의 속성을 우리에게 :
1. 설정 H5를 사용자 정의 속성

H5는 사용자 정의 속성 데이터가 속성 이름으로 시작하고 <div data-index : "1">과 같은 값을 할당한다고 규정합니다.
또는 JS를 사용하여 element.setAttribute ( 'deta-index', 2)

2. H5 사용자 정의 속성 가져 오기

호환성 Get element.getAttribute ( 'data-index')는 이 개발을 사용하도록 권장됩니다.
H5 추가 element.dataset.index 또는 element.datase [ 'index'] 즉 11 이상 만 지원됩니다.

코드 데모

<body>
    <div getTime="10" data-index="20" data-name-list="40"></div>
    <script>
        // 获取元素
        var div = document.querySelector('div');

        console.log(div.geTime); //undefined  getTime是自定义属性不能直接通过元素的属性来获取 而是用自定义属性来获取的getAttribute(‘属性’)

        console.log(div.getAttribute('getTime')); //10
        // H5添加自定义属性的写法以data-开头
        div.setAttribute('data-time', 30)
            // 1.兼容性获取H5自定义属性
        console.log(div.getAttribute('data-time')); // 30
        // 2.H5新增的获取自定义属性的方法  它只能获取data-开头的
        // dataset 是一个集合的意思存放了所有以data开头的自定义属性  如果你想取其中的某一个只需要在dataset.的后面加上自定义属性名即可
        console.log(div.dataset);
        console.log(div.dataset.time); // 30
        // 还有一种方法dataset['属性']
        console.log(div.dataset['time']); // 30
        // 如果自定义属性里面有多个-链接的单词 我们获取的时候采取驼峰命名法 不用要-了
        console.log(div.dataset.nameList); // 40
        console.log(div.dataset['nameList']); // 40
    </script>
</body>

5. 노드 운영

1. 노드 운영을 배우는 이유

일반적으로 요소를 얻는 방법은 두 가지가 있습니다.
(1) DOM에서 제공하는 방법을 사용하여 요소를 얻지 만 논리가 강력하고 번거롭지는 않습니다.
(2) 노드 계층 관계를 사용하여 부모-자식, 형제 관계와 같은 요소를 얻습니다. 논리이지만 호환성이 좋지 않습니다.

2. 노드 개요

웹 페이지의 모든 컨텐츠는 노드 (라벨, 속성, 텍스트, 주석 등)이며 DOM에서 노드는 노드로 표시됩니다. HTML DOM
트리의 모든 노드는 자바 스크립트를 통해 액세스 할 수 있으며 모든 HTML 요소 (노드)를 수정하고 생성하거나 삭제할 수도 있습니다.
여기에 사진 설명 삽입 일반적으로 노드에는 최소한 nade 유형 (노드 유형), 노드 이름 (노드 이름) 및 nodeValue (노드 값)이 세 가지 기본 속성

요소 노드 nodeType은 1입니다.
속성 노드의 nodeType은 2입니다.
텍스트 노드의 nodeType은 3입니다 (텍스트 노드에는 텍스트, 공백, 줄 바꿈 등이 포함됨).

실제 개발에서 노드 운영은 주로 요소 노드를 운영합니다.

3. 노드 수준

DOM 트리를 사용하여 노드를 서로 다른 계층 적 관계로 나눌 수 있습니다. 일반적으로 아버지-아들-형제 계층 적 관계입니다.

1. 부모 노드

1.node.parentNode

parenNode 속성은 노드의 부모 노드를 반환 할 수 있으므로 가장 가까운 부모 노드에주의하십시오! ! !
지정된 노드에 부모 노드가 없으면 null을 반환합니다.

코드 데모

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
    <script>
        var box1 = document.querySelector('.box1')
            // 得到的是离元素最近的父节点(亲爸爸) 得不到就返回得是null
        console.log(box1.parentNode); // parentNode 翻译过来就是父亲的节点
    </script>
</body>

2. 자식 노드 운영

1.parentNode.children（非标准）

parentNode.children은 모든 자식 요소 노드 를 반환 하는 읽기 전용 속성 입니다 . 자식 요소 노드 만 반환하고 나머지 노드는 반환하지 않습니다 (주로 이것을 기억 하고 나중에 사용할
것입니다 ) 자식은 비표준이지만 다양한 브라우저에서 지원되지만 대담하게 사용할 수 있습니다! ! !

코드 데모

<body>
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    <script>
        //   DOM 提供的方法（APL）获取 这样获取比较麻烦
        var ul = document.querySelector('ul')
        var lis = ul.querySelectorAll('li')
         // children子节点获取  ul里面所有的小li 放心使用没有限制兼容性 实际开发中经常使用的
        console.log(ul.children);
    </script>

첫 번째와 마지막 자식 노드를 반환하는 방법은 무엇입니까?

2.parentNode.firstElementChild

firstElementChild 는 첫 번째 자식 요소 노드를 반환합니다. 찾을 수없는 경우 unll을 반환합니다.

3.parentNode.lastElementChild

lastElementChild 는 마지막 자식 요소 노드를 반환 하거나 찾을 수없는 경우 null을 반환합니다.

참고 :이 두 가지 방법은 호환성 문제가 있습니다. IE9 이상 만주의해서 사용할 수
있지만 해결책이 있습니다.

如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 
如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

코드 데모

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
            // 1.firstElementChild 返回第一个子元素节点 ie9 以上才支持注意兼容
        console.log(ul.firstElementChild);
        // 2.lastElementChild返回最后一个子元素节点
        console.log(ul.lastElementChild);
        // 3.实际开发中用到的既没有兼容性问题又可以返回子节点的第一个和最后一个
        console.log(ul.children[0]);
        console.log(ul.children[ul.children.length - 1]); //ul.children.length - 1获取的永远是子节点最后一个
    </script>
</body>

3. 형제 자매

1.node.nextSibling

nextSibling은 현재 요소의 다음 형제 노드를 반환 하거나 찾을 수없는 경우 null을 반환합니다. 모든 노드가 포함되어 있습니다.

2.node.previousSibling

previousSibling은 현재 요소의 이전 형제 노드를 반환 하거나 찾을 수없는 경우 null을 반환합니다. 모든 노드가 포함되어 있습니다.

코드 데모

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div')
            // 返回当前元素的下一个兄弟节点nextSibling，找不到返回null。注意包含元素节点或者文本节点等等
        console.log(div.nextSibling); //这里返回的是#text 因为它的下一个兄弟节点是换行
        // 返回的是当前元素的上一个节点previousSibling，找不到返回null。注意包含元素节点或者文本节点等等
        console.log(div.previousSibling); //这里返回的是#text 因为它的上一个兄弟节点是换行
    </script>
</body>

3.node.nexElementSibling

nexElementSibling은 현재 요소의 다음 형제 요소 노드를 반환하고 찾을 수없는 경우 null을 반환합니다.

4.node.previousElementSibling

previousElementSibling은 현재 요소의 이전 형제 노드를 반환하고 찾을 수없는 경우 null을 반환합니다.

참고 :이 두 가지 방법은 호환성 문제가 있으며 IE9 이상에서만 지원됩니다.

코드 데모

<body>
    <div>我是div</div>
    <span>我是span</span>
    <script>
        var div = document.querySelector('div')
        // nextElementSiblingd得到下一个兄弟元素节点
        console.log(div.nextElementSibling); // span  
        // previousElementSibling  得到的是上一个兄弟元素节点
        console.log(div.previousElementSibling); // null 因为它上面没有兄弟元素了返回空的
    </script>
</body>

호환성 문제를 해결하는 방법은 무엇입니까?
호환성 기능을 캡슐화 할 수 있습니다 (실제 개발에서 간단한 이해를 사용할 수 있음)

function getNextElementSibling(element) {
 var el = element;
 while (el = el.nextSibling) {
 if (el.nodeType === 1) {
 return el;
     }
  }
 return null;
 }

4. 노드 생성

1.document.createElement('tagName')

document.createElement () 메서드는 tagName으로 지정된 HTML 요소를 만듭니다. 이전에 존재하지 않았던 이러한 요소는 우리의 필요에 따라 동적으로 생성되기 때문에 동적으로 요소 노드 생성 이라고도합니다.

노드 추가라는 노드에 추가 할 노드를 만들었습니다.

1.node.appendChild（child）

node.appendChild () 메서드는 지정된 부모 노드의 자식 노드 목록 끝에 노드를 추가합니다.

2.node.insertBefore(child，指定元素)

node.insertBefore () 메서드는 부모 노드의 지정된 자식 노드 앞에 노드를 추가합니다.

코드 데모

<body>
    <ul>
        <li>1</li>
    </ul>
    <script>
        // 1.创建节点 createElement
        var li = document.createElement('li')
            // 2.添加节点 创建了节点要添加到某一个元素身上去 叫添加节点 node.appendChild(child) done 父级 child 子级 如果前面有元素了则在后面追加元素类似数组中的push依次追加
        var ul = document.querySelector('ul')
        ul.appendChild(li)
            // 3.添加节点 node.insertBefore(child，指定元素) 在子节点前面添加子节点 child子级你要添加的元素
        var lili = document.createElement('li')
        ul.insertBefore(lili, ul.children[0]) //ul.children 这句话的意思是添加到ul父亲的子节点第一个
            // 总结 如果想在页面中添加元素分为俩步骤1.创建元素 2.添加元素
    </script>
</body>

여기에 사진 설명 삽입
5. 노드 삭제

node.removeChild(child)

node.removeChlid () 메서드는 DOM에서 자식 노드를 삭제하고 삭제 된 노드를 반환합니다. 간단한 요점은 부모 요소에서 자식을 삭제하는 것입니다. 노드는 아버지이고 자식은 자식입니다.

코드 데모

<body>
    <button>按钮</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>熊三</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul')
        var but = document.querySelector('button');
        // 2.删除元素
        // but.onclick = function() {
        //     ul.removeChild(ul.children[0])
        // }
        // 3.点击按钮键依次删除，最后没有删除内容了 就禁用按钮 disabled = true 禁用按钮语法
        but.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true
            } else {
                ul.removeChild(ul.children[0])
            }
        }
    </script>
</body>

여기에 사진 설명 삽입
6. 중복 노드 (클론 노드)

node.cloneNode()

node.dloneNode () 메서드는 메서드를 호출 한 노드의 복사본 (복제 노드 / 복사 노드라고도 함)을 반환합니다.

참고
1. 괄호 매개 변수가 비어 있거나 거짓이면 얕은 복사이고 내부 레이블 만 복사되고 내용은 복사되지 않습니다
. 2. 괄호 매개 변수가 참이면 전체 복사입니다. 노드 자체와 내부의 모든 내용

코드 데모

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        // 1.获取元素
        var ul = document.querySelector('ul');
        // 2.复制元素 node.cloneNode()   如果参数括号为空或者false则只会复制元素不会复制内容，如果待有参数true则内容和元素都会被复制
        var lis = ul.children[0].cloneNode(true);
        // 3.获取元素
        ul.appendChild(lis)
    </script>
</body>

여기에 사진 설명 삽입
7. 동적으로 생성 된 세 요소의 차이점

document.write ()
element.innerHTML
document.createElement ()

차이점

document.write ()는 페이지에 콘텐츠를 직접 쓰는 콘텐츠 스트림이지만 문서 스트림이 실행 된 후 페이지가 다시 그려집니다.
element.innerHTML은 콘텐츠를 DOM 노드에 쓰는 것이므로 모든 페이지가 다시 그려지지는 않습니다.
element.innerHTML은 여러 요소를 만드는 데 더 효율적이며 (문자열을 연결하지 말고 배열 연결을 사용) 결과가 약간 복잡합니다.
createElement ()는 여러 요소를 만드는 데 약간 덜 효율적이지만 결과는 더 명확합니다.

요약 : 다른 브라우저에서 innerHTML은 createElement ()보다 효율적입니다.

코드 데모

<body>
    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <script>
        // window.onload = function() {
        //         document.write('<div>123</div>');

        //     }
        // 三种创建元素方式区别 
        // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
        // var btn = document.querySelector('button');
        // btn.onclick = function() {
        //     document.write('<div>123</div>');
        // }

        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // for (var i = 0; i <= 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>
</body>