WebAPI之DOM操作总结

亦凉 2023-02-12 05:48 15阅读 0赞

### WebAPI之DOM操作总结 ###

*  WebAPI之DOM节点操作总结
 *   *  \*API、WebAPI、DOM、DOM树介绍
     *  1.获取元素
     *   *  1.1 根据ID获取
         *  1.2 根据标签名获取元素
         *  1.3 H5新增获取元素方式
         *  1.4 获取特殊元素（body，html）
     *  2. 节点操作
     *   *  2.1 节点层级介绍
         *   *  2.1.1 父级节点
             *  2.1.2 子节点
             *  2.1.3兄弟节点
         *  2.2 创建与添加节点
         *  2.3 删除节点
         *  2.4 复制（克隆）节点
     *  3. 操作元素
     *   *  3.1 改变元素内容（获取或设置）
         *  3.2 常用元素的属性操作
         *  3.3 表单元素的属性操作
         *  3.4 自定义属性操作
     *  4. 有关重点知识介绍
     *  4.1 排他操作
     *   *  4.2 创建元素的三种方式
         *  4.3 innerTHML和createElement效率对比

# WebAPI之DOM节点操作总结 #

## \*API、WebAPI、DOM、DOM树介绍 ##

**1.API与Web API：**  
API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。  
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。  
**2.DOM介绍：**  
通过这些 DOM 接口可以改变网页的内容、结构和样式。  
**DOM树：**

*  文档：一个页面就是一个文档，DOM中使用document表示
 *  节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
 *  标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

## 1.获取元素 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]

### 1.1 根据ID获取 ###

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

### 1.2 根据标签名获取元素 ###

### 1.3 H5新增获取元素方式 ###

### 1.4 获取特殊元素（body，html） ###

## 2. 节点操作 ##

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。  
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

### 2.1 节点层级介绍 ###

#### 2.1.1 父级节点 ####

<div class="demo">
            <div class="box">
                <span class="erweima">×</span>
            </div>
        </div>
    
        <script> // 1. 父节点 parentNode var erweima = document.querySelector('.erweima'); // var box = document.querySelector('.box'); // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null console.log(erweima.parentNode); </script>

#### 2.1.2 子节点 ####

1.子节点使用方法：

<ul>
            <li>我是li</li>
            <li>我是li</li>
            <li>我是li</li>
            <li>我是li</li>
    </ul>
    <script> // DOM 提供的方法（API）获取 var ul = document.querySelector('ul'); var lis = ul.querySelectorAll('li'); // 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等 console.log(ul.childNodes); console.log(ul.childNodes[0].nodeType); console.log(ul.childNodes[1].nodeType); // 2. children 获取所有的子元素节点 也是我们实际开发常用的 console.log(ul.children); </script>

2.子节点中关于第一个子节点、最后一个子节点、第一个子元素节点和最后一个子元素节点：

<ol>
            <li>我是li1</li>
            <li>我是li2</li>
            <li>我是li3</li>
            <li>我是li4</li>
            <li>我是li5</li>
        </ol>
        <script> var ol = document.querySelector('ol'); // 1. firstChild 第一个子节点 不管是文本节点还是元素节点 console.log(ol.firstChild); console.log(ol.lastChild); // 2. firstElementChild 返回第一个子元素节点 ie9才支持 console.log(ol.firstElementChild); console.log(ol.lastElementChild); // 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素 console.log(ol.children[0]); console.log(ol.children[ol.children.length - 1]); </script>

#### 2.1.3兄弟节点 ####

<div>我是div</div>
        <span>我是span</span>
        <script> var div = document.querySelector('div'); // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等 console.log(div.nextSibling); console.log(div.previousSibling); // 2. nextElementSibling 得到下一个兄弟元素节点 console.log(div.nextElementSibling); console.log(div.previousElementSibling); </script>

### 2.2 创建与添加节点 ###

<ul>
            <li>123</li>
        </ul>
        <script>
            // 1. 创建节点元素节点
            var li = document.createElement('li');
            // 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素
            var ul = document.querySelector('ul');
            ul.appendChild(li);
            // 3. 添加节点 node.insertBefore(child, 指定元素);
            var lili = document.createElement('li');
            ul.insertBefore(lili, ul.children[0]);
            // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素

### 2.3 删除节点 ###

node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。

<button>删除</button>
        <ul>
            <li>熊大</li>
            <li>熊二</li>
            <li>光头强</li>
        </ul>
        <script> // 1.获取元素 var ul = document.querySelector('ul'); var btn = document.querySelector('button'); // 2. 删除元素 node.removeChild(child) // ul.removeChild(ul.children[0]); // 3. 点击按钮依次删除里面的孩子 btn.onclick = function() { if (ul.children.length == 0) { this.disabled = true; } else { ul.removeChild(ul.children[0]); } } </script>

### 2.4 复制（克隆）节点 ###

<ul>
            <li>1111</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script> var ul = document.querySelector('ul'); // 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容 // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容 var lili = ul.children[0].cloneNode(true); ul.appendChild(lili); </script>

## 3. 操作元素 ##

### 3.1 改变元素内容（获取或设置） ###

<button>显示当前系统时间</button>
        <div>某个时间</div>
        <p>1123</p>
        <script> // 当我们点击了按钮， div里面的文字会发生变化 // 1. 获取元素 var btn = document.querySelector('button'); var div = document.querySelector('div'); // 2.注册事件 btn.onclick = function() { // div.innerText = '2019-6-6'; div.innerHTML = getDate(); } function getDate() { var date = new Date(); // 我们写一个 2019年 5月 1日 星期三 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]; } // 我们元素可以不用添加事件 var p = document.querySelector('p'); p.innerHTML = getDate(); </script>

**innerText和innerHTML的区别：**

*  1.获取内容时的区别：  
     innerText会去除空格和换行，而innerHTML会保留空格和换行
 *  2.设置内容时的区别：  
     innerText不会识别html，而innerHTML会识别

### 3.2 常用元素的属性操作 ###

<button id="ldh">刘德华</button>
        <button id="zxy">张学友</button> <br>
        <img src="images/ldh.jpg" alt="" title="刘德华">
    
        <script> // 修改元素属性 src // 1. 获取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy'); var img = document.querySelector('img'); // 2. 注册事件 处理程序 zxy.onclick = function() { img.src = 'images/zxy.jpg'; img.title = '张学友思密达'; } ldh.onclick = function() { img.src = 'images/ldh.jpg'; img.title = '刘德华'; } </script>

### 3.3 表单元素的属性操作 ###

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

### 3.4 自定义属性操作 ###

<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 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index console.log(div.getAttribute('id')); console.log(div.getAttribute('index')); // 2. 设置元素属性值 // (1) element.属性= '值' div.id = 'test'; div.className = 'navs'; // (2) element.setAttribute('属性', '值'); 主要针对于自定义属性 div.setAttribute('index', 2); div.setAttribute('class', 'footer'); // class 特殊 这里面写的就是class 不是className // 3 移除属性 removeAttribute(属性) div.removeAttribute('index'); </script>

**H5自定义属性：**  
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。  
自定义属性获取是通过getAttribute(‘属性’) 获取。  
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

## 4. 有关重点知识介绍 ##

## 4.1 排他操作 ##

如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：

1.  所有元素全部清除样式（干掉其他人）
2.  给当前元素设置样式 （留下我自己）
3.  注意顺序不能颠倒，首先干掉其他人，再设置自己

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <script> // 1. 获取所有按钮元素 var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素 btns[i] for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人 for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } // (2) 然后才让当前的元素背景颜色为pink 留下我自己 this.style.backgroundColor = 'pink'; } } //2. 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想 </script>
    </body>
    </html>

### 4.2 创建元素的三种方式 ###

### 4.3 innerTHML和createElement效率对比 ###

**innerHTML字符串拼接方式（效率低）**

**createElement方式（效率一般）**

**innerHTML数组方式（效率高）**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200525155545170.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center