09_超详细的DOM相关的API操作-导航获取节点-获取元素的方法-节点与元素的常见属性-元素操作-DOM练习小案例

女爷i 2023-09-28 08:48 111阅读 0赞

#### 文章目录 ####

*   *  1.认识BOM和DOM
     *  2.深入理解BOM
     *   *  2.1 BOM的基本概念
         *  2.2 DOM Tree的理解
         *  2.3 DOM的学习顺序
     *  3.document对象
     *  4.导航获取元素或节点
     *   *  4.1节点之间的导航
         *  4.2元素之间的\*\*导航\*\*
         *  4.3表格元素的导航
         *  4.4表单元素的导航
     *  5.获取任意元素的方法
     *  6.节点常见的属性
     *   *  6.1 nodeType
         *  6.2 nodeName、tagName
         *  6.3 innerHTML、textContent
         *  6.3 nodeValue、data
         *  6.4 节点的其他属性
     *  7.元素的属性
     *   *  7.1 元素的属性和特性
         *  7.2 attribute的操作
         *  7.3 property的操作
         *  7.4 \*\*JavaScript动态修改样式\*\*
         *   *  7.4.1 动态修改class
             *  7.4.2 动态修改style
             *  7.4.3 style的读取
         *  7.5 data-\*自定义属性
     *  8.元素的操作
     *   *  8.1 创建元素
         *  8.2 插入元素
         *  8.3 移除和克隆元素
         *  8.4 旧的元素操作方法
         *  8.5 获取元素大小、位置信息
         *  8.6 获取window大小、位置信息
     *  9.小案例练习
     *   *  9.1 练习-输入动态的列表
         *  9.2 练习-动态的显示时间
         *  9.3 练习-倒计时的展示

### 1.认识BOM和DOM ###

*  **我们花了很多时间学习JavaScript的基本语法，但是这些基本语法，但是这些语法好像和做网页没有什么关系，和前面学习的HTML、CSS也没有什么关系**
    
     *  这是因为前面学习的部分**属于ECMAScript**，也就是**JavaScript本身的语法部分**
     *  除了语法部分之外，我们还需要学习浏览器提供给我们开发者的**DOM、BOM相关的API才能对页面、浏览器进行操作**
 *  **前面我们学习了一个window的全局对象，window上事实上就包含了这些内容：**
    
     *  我们已经学习了JavaScript语法部分的**Object、Array、Date等**；
     *  另外还有window提供的**DOM、BOM部分；**
 *  **DOM：文档对象模型（Document Object Model）**
    
     *  简称 **DOM**，将**页面所有的内容表示为可以修改的对象**
 *  **BOM：浏览器对象模型（Browser Object Model）**
    
     *  简称 **BOM**，由浏览器提供的**用于处理文档（document）之外的所有内容的其他对象**；
     *  比如**navigator、location、history等对象**

### 2.深入理解BOM ###

#### 2.1 BOM的基本概念 ####

*  浏览器会对我们**编写的HTML、CSS进行渲染**，同时它又要考虑我们**可能会通过JavaScript来对其进行操作**：
    
     *  于是**浏览器将我们编写在HTML中的每一个元素**（Element）**都抽象成了一个个对象**；
     *  所有这些对象都可以**通过JavaScript来对其进行访问**，那么我们**就可以通过JavaScript来操作页面**；
     *  所以，我们将\*\*这个抽象过程称之为 文档对象模型（\*\*Document Object Model）
 *  **整个文档被抽象到 document 对象中：**
    
     *  比如**document.documentElement**对应的是**html元素；**
     *  比如**document.body**对应的是**body元素；**
     *  比如**document.head**对应的是**head元素；**
 *  例如: **通过js将整个页面变成红色**, 示例代码如下:
    
     *      document.body.style.backgroundColor = "red"
 *  所以我们**学习DOM**，就是在**学习如何通过JavaScript对文档进行操作的;**
 *  **DOM相当于是JavaScript和HTML、CSS之间的桥梁**
    
     *  通过浏览器提供给我们的**DOM API**，我们可以**对元素以及其中的内容做任何事情；**

#### 2.2 DOM Tree的理解 ####

*  **一个页面不只是有html、head、body元素，也包括很多的子元素:**
    
     *  在**html结构中**，最终会**形成一个树结构**；
     *  在**抽象成DOM对象的时候**，它们**也会形成一个树结构**，我们**称之为DOM Tree；**

#### 2.3 DOM的学习顺序 ####

*  **DOM相关的API非常多，我们会通过如下顺序来学习：**
    
    1.  DOM元素之间的关系
    2.  2.获取DOM元素
    3.  DOM节点的type、tag、content
    4.  DOM节点的attributes、properies
    5.  DOM节点的创建、插入、克隆、删除
    6.  DOM节点的样式、类
    7.  DOM元素/window的大小、滚动、坐标
 *  **整体会按照这个顺序来学习，也会额外补充其他的知识**

### 3.document对象 ###

*  **Document节点表示的整个载入的网页，它的实例是全局的document对象：**
    
     *  对DOM的所有操作都是从**document 对象开始的;**
     *  它是D**OM的 入口点**，可以**从document开始去访问任何节点元素**
 *  对于**最顶层的html、head、body元素，我们可以直接在document对象中获取**到：
    
     *  **html元素：**<html> = **document.documentElement**
     *  **body元素：**<body> = **document.body**
     *  **head元素：**<head> = **document.head**
     *  **文档声明：**<!DOCTYPE html> = **document.doctype**
     *      console.log(document.documentElement)
            console.log(document.body)
            console.log(document.head)
            console.log(document.doctype)

### 4.导航获取元素或节点 ###

#### 4.1节点之间的导航 ####

*  网页中所有内容都是节点, **包括文本(空格和换行符也属于文本), 注释**
 *  如果我们获取到**一个节点（Node）后，可以根据这个节点去获取其他的节点**，我们称之为**节点之间的导航。**
 *  节点之间存在如下的关系：
    
     *  父节点：**parentNode**
     *  前兄弟节点：**previousSibling**
     *  后兄弟节点：**nextSibling**
     *  子节点：**childNodes**
        
         *  childNodes**支持索引的方式**获取, 例如: **childNodes\[2\], 获取第三个子节点**
     *  第一个子节点：**firstChild**
     *  最后一个子节点：**lastChild**
 *  **示例代码:** 获取下面结构的节点
    
     *      <body>
            	
            	<div class="box">
            		<h1>我是标题</h1>
            		<p>我是p元素</p>
            	</div>
            	我是文本
            	<script>
            		//获取body节点
            		var bodyEl = document.body;
            		console.log(bodyEl); //<body>...</body>
            
            		// 获取body节点的所有子节点
            		// 由于换行也属于文本节点, 所以会获取
            		console.log(bodyEl.childNodes); // [text, comment, text, div.box, text, script]
            
            		// 获取body的第一个子节点
            		var bodyElFirst = bodyEl.firstChild;
            		console.log(bodyElFirst); //#text
            
            		// 获取body的注释节点
            		console.log(bodyElFirst.nextSibling); //
            
            		// 获取body的父节点
            		console.log(bodyEl.parentNode); // <html lang="en">...</html>
            
            		// 获取div节点
            		var div = bodyEl.childNodes[3];
            		console.log(div); //<div class="box">...</div>
            
            		// 获取div中最后一个节点
            		console.log(div.lastChild); //#text
            	</script>
            </body>

#### 4.2元素之间的**导航** ####

*  **只会获取元素,** 忽略文本, 注释
 *  如果我们**获取到一个元素（Element）后**，可以**根据这个元素去获取其他的元素**，我们**称之为元素之间的导航**。
 *  元素之间存在如下的关系：
    
     *  父元素：**parentElement**
     *  前兄弟元素：**previousElementSibling**
     *  后兄弟元素：**nextElementSibling**
     *  子元素：**children**
        
         *  children**支持索引的方式**获取, 例如**children\[0\], 第一个子元素**
     *  第一个子元素：**firstElementChild**
     *  最后一个子元素：**lastElementChild**
 *  **示例代码:** 获取下面结构的元素
    
     *      <body>
            	
            	<h1>我是标题</h1>
            	<div class="box">
            		<p>我是p元素</p>
            		<span>我是span元素</span>
            	</div>
            	我是文本
            	<script>
            		//获取body元素
            		var bodyEl = document.body;
            		console.log(bodyEl); //<body>...</body>
            
            		// 获取body中的所有子元素
            		console.log(bodyEl.children); // [h1, div.box, script]
            
            		// 获取body中的div.box
            		var div = bodyEl.children[1];
            		console.log(div);
            
            		// 获取body中的最后一个元素
            		console.log(bodyEl.lastElementChild); // <script>...<\/script>
            	</script>
            </body>
 *  开发中, 我们更多时候是**想要获取单纯的元素,** 而**不是节点(因为节点中包含换行符文本, 注释)**

#### 4.3表格元素的导航 ####

*  <table> 元素支持 (除了上面给出的，之外) 以下这些属性：
    
     *  **table.rows: <tr> 元素的集合；**
        
         *  支持索引的方式, **table.row\[0\], 拿到第一行**
     *  **table.caption/tHead/tFoot: 引用元素 <caption>，<thead>，<tfoot>；**
     *  **table.tBodies: <tbody> 元素的集合；**
 *  <tr>：
    
     *  **tr.cells**: 在给定 <tr> 中的 <td> 和 <th> 单元格的集合；
        
         *  支持索引的方式, **tr.cells\[0\]: 获取第一个单元格**
     *  **tr.sectionRowIndex**: 给定的 <tr> 在封闭的 <thead>/<tbody>/<tfoot> 中的位置（索引）；
     *  **tr.rowIndex:** 在整个表格中 <tr> 的编号（包括表格的所有行）；
 *  <td> 和 <th>：
    
     *  **td.cellIndex**: 在封闭的 <tr> 中单元格的编号

#### 4.4表单元素的导航 ####

*  **<form> 元素可以直接通过document来获取：document.forms**
    
     *      var formEl = doucument.forms[0]
 *  **<form> 元素中的内容可以通过elements来获取：form.elements**
    
     *      var elements = formEl.elements
 *  **我们可以设置表单子元素的name来获取它们**
    
     *      <form action=">
            	< input name="account" type= "text”" >
            	< input name="password" type=" pas sword">
            	< input name="sex" type=" checkbox" checked>
            	<select name="fruits" id="fruits">
            		<option value="apple"> 苹果< /option>
            		<option value="orange">橘子</option>
            	</select>
            </form>
     *      var formEl = document.forms0]
            var.elements，= formEl.elements
            
            window.addEventL istener("click", function() {
                    
            	console.log( elements.account.value )
            	console.1og( elements.fruits.value )
            })

### 5.获取任意元素的方法 ###

*  当元素彼此靠近或者相邻时，**DOM 导航属性（navigation property）非常有用。**
    
     *  但是，在实际开发中，我们**希望可以任意的获取到某一个元素应该如何操作呢？**
 *  **DOM为我们提供了获取元素的方法：**
    
     *  **getElementById**: 通过id获取元素
        
         *      var activeEl = document.getElementById("active")
     *  **getElementsByClassName**: 通过className获取元素
        
         *      var divEl = document.getElementsByClassName("box")
     *  **getElementsByName**: 通过name属性获取元素(了解)
     *  **getElementsByTagName**: 通过标签名获取元素(了解)
     *  **querySelector**: 通过选择器查询, 获取**满足条件的第一个元素**
        
         *      var activeEl = document.querySelector(".box")
                var divEl = document.querySelector("#active")
     *  **querySelectorAll**: 通过选择器查询, 获取**满足条件的所有元素**
        
         *      var activeEl = document.querySelector(".box")
 *  开发中如何选择呢？
    
     *  目前最**常用的是querySelector和querySelectAll；**
     *  **getElementById偶尔也会使用或者在适配一些低版本浏览器时**

### 6.节点常见的属性 ###

*  **目前，我们已经可以获取到节点了，接下来我们来看一下节点中有哪些常见的属性：**
    
     *  当然，**不同的节点类型有可能有不同的属性**；
     *  这里我们主要讨论**节点共有的属性**；

#### 6.1 nodeType ####

*  **nodeType属性：**
    
     *  nodeType 属性提供了一种**获取节点类型的方法；**
     *  它有一个**数值型值**（numeric value）；
 *  **示例代码:**
    
     *  HTML结构
     *      
            我是文本
            <div class="box">
            	<h2>我是标题</h2>
            	<p>我是内容, 哈哈哈哈</p>
            </div>
     *  演示
     *      var bodyChildNodes = document.body.childNodes
            var commentNode = bodyChildNodes[1] //获取注释节点
            var textNode = bodyChildNodes[2] //获取文本节点
            var divNode = bodyChildNodes[3] //获取元素节点
            
            //打印获取节点的类型
            console.log(commentNode.nodeType, textNode.nodeType, divNode.nodeType) // 8 3 1
 *  **常见的节点类型有如下：**
    
     *  <table> 
         <thead> 
          <tr> 
           <th>常量</th> 
           <th>值</th> 
           <th>描述</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr> 
           <td>Node.ELEMENT_NODE</td> 
           <td>1</td> 
           <td>一个 元素 节点，例如 &lt;p&gt; 和 &lt;div&gt;。</td> 
          </tr> 
          <tr> 
           <td>Node.TEXT_NODE</td> 
           <td>3</td> 
           <td>Element 或者 Attr 中实际的 文字</td> 
          </tr> 
          <tr> 
           <td>Node.COMMENT_NODE</td> 
           <td>8</td> 
           <td>一个 Comment 节点(注释节点)。</td> 
          </tr> 
          <tr> 
           <td>Node.DOCUMENT_NODE</td> 
           <td>9</td> 
           <td>一个 Document 节点。</td> 
          </tr> 
          <tr> 
           <td>Node.DOCUMENT_TYPE_NODE</td> 
           <td>10</td> 
           <td>描述文档类型的 DocumentType 节点。例如 html&gt; 就是用于 HTML5 的。</td> 
          </tr> 
         </tbody> 
        </table>
 *  其他类型可以查看MDN文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

#### 6.2 nodeName、tagName ####

*  **nodeName：获取node节点的名字；**
 *  **tagName：获取元素的标签名词；**
 *  **示例代码:**
    
     *  HTML结构
     *      
            我是文本
            <div class="box">
            	<h2>我是标题</h2>
            	<p>我是内容, 哈哈哈哈</p>
            </div>
     *  演示
     *      var bodyChildNodes = document.body.childNodes
            var commentNode = bodyChildNodes[1] //获取注释节点
            var textNode = bodyChildNodes[2] //获取文本节点
            var divNode = bodyChildNodes[3] //获取元素节点
            
            //打印获取节点的名称
            console.log(commentNode.nodeName, textNode.nodeName, divNode.nodeName) //#comment #text DIV
            //打印获取元素的名称(针对于元素)
            console.log(commentNode.tagName, divNode.tagName) //undefined 'DIV'
 *  **tagName 和 nodeName 之间有什么不同呢？**
    
     *  **tagName** 属性**仅适用于 Element 节点**；
     *  **nodeName** 是**为任意 Node 定义的：**
        
         *  **对于元素，它的意义与 tagName 相同**，所以使用哪一个都是可以的；
         *  **对于其他节点类型（text，comment 等），它拥有一个对应节点类型的字符串；**

#### 6.3 innerHTML、textContent ####

*  **innerHTML 属性**
    
     *  会将元素中的 HTML 获取为字符串形式, 针对元素获取数据；
     *  设置元素中的内容包含元素标签时, **浏览器会解析对应的标签；**
 *  **textContent 属性**
    
     *  仅仅获取元素中的文本内容；
     *  设置元素中的内容包含元素标签时, 浏览器**会将对应的标签当做文本的一部分；**
 *  **innerHTML和textContent的区别：**
    
     *  使用 innerHTML，**我们将其“作为 HTML”插入，带有所有 HTML 标签**。
     *  使用 textContent，**我们将其“作为文本”插入，所有符号（symbol）均按字面意义处理。**
 *  **示例代码**
    
     *      <div class="box">
            	<h2>我是h2标题</h2>
            </div>
            
            <script>
            	var bodyChildNodes = document.body.childNodes
            	var divNode = bodyChildNodes[1]
              
              //innerHTML和textContent获取数据的区别
            	console.log(divNode.innerHTML); //<h2>我是h2标题</h2>
            	console.log(divNode.textContent); //我是h2标题
            	//innerHTML和textContent设置数据的区别
            	divNode.innerHTML = "<h3>我是h2标题</h3>" //浏览器会将设置内容中的元素解析
            	divNode.textContent = "<h3>我是h2标题</h3>" //浏览器会将设置内容中的元素当做文本的一部分
            </script>
     *  
 *  **outerHTML 属性**
    
     *  **包含了元素的完整 HTML**
     *  **innerHTML 再加上元素本身**一样；
     *      <div class="box">
            	<h2>我是h2标题</h2>
            </div>
            <script>
            	var bodyChildNodes = document.body.childNodes
            	var divNode = bodyChildNodes[1]
              console.log(divNode.outerHTML) //会将整个div结构获取下来
            </script>

#### 6.3 nodeValue、data ####

*  **nodeValue/data**
    
     *  **nodeValue/data**效果是一样的
     *  用于获取**非元素节点的文本内容(数据)**
 *  **示例代码**
    
     *      我是文本
            
            
            <script>
            	var bodyChildNodes = document.body.childNodes
            	var textNode = bodyChildNodes[0]
            	var commentNode = bodyChildNodes[1]
              
            	console.log(textNode.data, commentNode.data); //我是文本  注释内容 
            	console.log(textNode.nodeValue, commentNode.nodeValue); //我是文本  注释内容 
            </script>

#### 6.4 节点的其他属性 ####

*  hidden属性：也是一个**全局属性**，可以用于**设置元素隐藏**, 只要是一个元素就可以设置
    
     *      <div class="box">哈哈哈哈</div>
            <script>
            	var box = document.querySelector(".box")
            	box.hidden = true //隐藏
            </script>
 *  **DOM 元素还有其他属性：**(要是元素才可以)
    
     *  \*\*value属性: \*\*
        
         *  <input>，<select> 和 <textarea> （HTMLInputElement，HTMLSelectElement……）的 value
     *  **href属性:**
        
         *  <a href=“…”>（HTMLAnchorElement）的 href。
     *  **id属性:**
        
         *  **所有元素**（HTMLElement）的 “id” 特性（attribute）的值。

### 7.元素的属性 ###

#### 7.1 元素的属性和特性 ####

*  **前面我们已经学习了如何获取节点，以及节点通常所包含的属性，接下来我们来仔细研究元素Element。**
 *  我们知道，一个元素除了有**开始标签、结束标签、内容之外，还有很多的属性（attribute）**
 *  浏览器在解析HTML元素时，会将**对应的attribute**也创建出来放到**对应的元素对象上。**
    
     *  比如**id、class就是全局的attribute**，会有对应的**id、class属性；**
     *  比如**href属性是针对a元素的**，**type、value属性是针对input元素**的；
 *  接下来我们学习一下如何获取和设置这些属性。
 *  **属性attribute的分类：**
    
     *  \*\*标准的attribute：\*\*某些attribute属性是标准的，比如id、class、href、type、value等；
     *  **非标准的attribute：某些attribute属性是自定义的**，比如abc、age、height等；

#### 7.2 attribute的操作 ####

*  **对于所有的attribute访问都支持如下的方法：**
    
     *  **elem.hasAttribute(name)**: 检查特性是否存在。
     *  **elem.getAttribute(name):** 获取这个特性值。
     *  **elem.setAttribute(name, value):** 设置这个特性值。
     *  **elem.removeAttribute(name):** 移除这个特性。
     *  \*\*attributes：\*\*attr对象的集合，具有name、value属性；
 *  **示例代码:**
    
     *      <div class="box" id="abc" title="box"
            		 age="18" height="1.88">
              我是box
            </div>
            <script>
            	var div = document.querySelector("#abc");
            
            	//检查某个特性(属性)是否存在, 存在true 不存在false
            	console.log(div.hasAttribute("age")) //true
            	console.log(div.hasAttribute("accc")) //false
            
            	//获取某个特性的值, 不存在返回null
            	console.log(div.getAttribute("age")) //18
            	console.log(div.hasAttribute("accc")) //null
            
            	//设置某个特性的值
            	div.setAttribute("id", "bbc") //将id修改为bbc
            
            	//移除某个特性
            	div.removeAttribute("age") //将age属性移除
            
            	//获取所有的特性对象的集合
            	var boxAttr = div.attributes
            	//得到所有特性的集合 进行遍历
              for (var attr of boxAttr) {
                    
            		console.log(attr.name) //打印特性的名称
                console.log(attr.value) //打印特性的值
              }
            </script>
 *  attribute具备以下特征：
    
     *  它们的**名字是大小写不敏感的**（id 与 ID 相同）。
     *  它们的**值总是字符串类型**的。

#### 7.3 property的操作 ####

*  可以理解为**元素中的属性称之为attribute**, **对象中的属性称之为property**
 *  对于**标准的attribute**，会在DOM对象上创建**与其对应的property属性：**
    
     *      <div class="box" id="abc" title="box"
            		 age="18" height="1.88">
              我是box
            </div>
            <script>
            	var div = document.querySelector("#abc");
            
            	//标准的attribute属性拥有对应的property属性
            	console.log(div.className, div.id, div.title) //box abc box
            
            	//标准的attribute属性则没有对应的property属性
            	console.log(div.age, div.height) //undefined undefined
            </script>
 *  **在大多数情况下，它们是相互作用影响的**
    
     *  **改变property**，**通过attribute获取的值**，**会随着改变；**
     *  **通过attribute操作修改，property的值会随着改变**；
        
         *  **注意: input的value修改只能通过attribute的方法；**
 *  除非特别情况，大多数情况下，设置、获取attribute，**推荐使用property的方式**：  
     这是因为它**默认情况下是有类型的**；

#### 7.4 **JavaScript动态修改样式** ####

*  有时候我们**会通过JavaScript来动态修改样式**，这个时候我们有两个选择：
    
     *  选择一：在CSS中编写好对应的样式，**动态的添加class；**  
        选择二：**动态的修改style属性**；
 *  **开发中如何选择呢？**
    
     *  在大多数情况下，**如果可以动态修改class完成某个功能**，**更推荐使用动态class；**
     *  如果对于**某些情况**，**无法通过动态修改class**（**比如精准修改某个css属性的值**），那么**就可以修改style属性**；
     *  接下来，我们对于两种方式分别来进行学习。

##### 7.4.1 动态修改class #####

*  **元素class的 attribute**，对应的property并非叫class，**而是className：**
    
     *  这是因为**JavaScript早期是不允许使用class这种关键字**来作为对象的属性，所以**DOM规范使用了className；**
     *  虽然**现在JavaScript已经没有这样的限制**，但是**并不推荐**，并且**依然在使用className这个名称；**
 *  **我们可以对className进行赋值，它会替换整个类中的字符串。**
    
     *      <div class="box">
              我是box
            </div>
            <script>
            	var div = document.querySelector(".box");
            
            	div.className = "aaa" //会将原来的class覆盖
            </script>
 *  **如果我们需要添加或者移除单个的class，那么可以使用classList属性。**
 *  **elem.classList 是一个特殊的对象：**
    
     *  **elem.classList.add (class)** ：添加一个类
     *  **elem.classList.remove(class)**：添加/移除类。
     *  **elem.classList.toggle(class)** ：如果类不存在就添加类，存在就移除它。
     *  **elem.classList.contains(class)**：判断类是否存在，返回 true/false。
     *      <div class="box">
              我是box
            </div>
            <script>
            	var div = document.querySelector(".box");
            
            	//添加一个类 不会覆盖
            	div.classList.add("aaa")
            	//移除一个类
            	div.classList.remove("aaa")
            	//如果类不存在就添加类，存在就移除它
            	div.classList.toggle("bbb")
            	//判断类是否存在
            	div.classList.contains("bbb") //true
            </script>
 *  **classList是可迭代对象**，可以通过**for of进行遍历**。

##### 7.4.2 动态修改style #####

*  **如果需要单独修改某一个CSS属性，那么可以通过style来操作：**
    
     *  对于**多词（multi-word）属性**，**使用驼峰式** camelCase
     *      boxEl.style.width = "100px"
            boxEl.style.height = "100px"
            boxEl.style.backgroundColor = "red	"
 *  **如果我们将值设置为空字符串，那么会使用CSS的默认样式：**
    
     *      boxEl.style.display = ""
 *  **多个样式的写法，我们需要使用cssText属性：**
    
     *  但是不推荐这种用法，因为它会替换整个字符串；
     *      boxEl.style.cssText = `
            					width = 100px;
            					height = 100px;
            					background-color = red;`

##### 7.4.3 style的读取 #####

*  **如果我们需要读取样式：**
    
    1.  *对于内联样式，是可以通过style. 的方式读取到的;*\*
        
         *      <div class="box" style="background-color: red;">
                  我是box
                </div>
                <script>
                	var div = document.querySelector(".box");
                	console.log(div.style.backgroundColor)
                </script>
    2.  **对于style、css文件中的样式，是读取不到的；**
        
         *  这个时候，我们可以**通过getComputedStyle的全局函数**来实现：
         *      console.log(getComputedStyle(boxEl).width)
                console.log(getComputedStyle(boxEl).height)
                console.log(getComputedStyle(boxEl).backgroundColor)

#### 7.5 data-\*自定义属性 ####

*  通过*data-设置的自定义属性, 那么它们可以**在dataset属性中获取到自定义属性*\*
 *      //通过data-*设置的自定义属性
        <div class="box" data-name="why" data-age="18"></div>
        <script>
        	var div = document.querySelector(".box");
        	//在dataset属性中获取到自定义属性
        	console.log(div.dataset.name)
        	console.log(div.dataset.age)
        </script>

### 8.元素的操作 ###

#### 8.1 创建元素 ####

*  **前面我们使用过 document.write 方法写入一个元素：**
    
     *  这种方式写起来非常便捷，但是**对于复杂的内容、元素关系拼接并不方便**；
     *  它是在**早期没有DOM的时候使用的方案**，目前**依然被保留了下来；**
 *  那么目前我们想要**插入一个元素**，通常会按照如下步骤：
    
     *  **步骤一**：创建一个元素；
     *  **步骤二**：插入元素到DOM的某一个位置；
 *  **创建元素**： **document.createElement(tag)**
    
     *      //创建一个h2元素 
            var h2El = document.createElement("h2");
            //为h2元素添加文本内容
            h2El.innerHTML = "我是标题"
            //为h2元素添加类名
            h2El.classList.add("title")

#### 8.2 插入元素 ####

*  **插入元素的方式如下(均支持多个参数)：**
    
     *  **node.append(…nodes or strings)**: 在 node 子元素的末尾 插入节点或字符串，
     *  **node.prepend(…nodes or strings)**: 在 node 子元素的开头插入节点或字符串，
     *  **node.before(…nodes or strings)**: 在 node 前面插入节点或字符串，
     *  **node.after(…nodes or strings)**: 在 node 后面插入节点或字符串，
     *  **node.replaceWith(…nodes or strings**): 将 node 替换为给定的节点或字符串。
 *  **示例代码:**
    
     *      <div class="box">
              <p>我是p元素呵呵呵呵</p>
            </div>
            <script>
              var boxEl = document.querySelector(".box")
            	//创建一个h2元素 
            	var h2El = document.createElement("h2");
            	h2El.innerHTML = "我是标题"
            	
            	boxEl.append(h2El) //插入到boxEl内部的末尾
            	boxEl.prepend(h2El) //插入到boxEl内部的开头
            	boxEl.before(h2El) //插入到boxEl的前面
            	boxEl.after(h2El) //插入到boxEl的后面
            	boxEl.replaceWith(h2El) //将boxEl替换为h2El
            </script>

#### 8.3 移除和克隆元素 ####

*  **移除元素我们可以调用元素本身的remove方法：**
    
     *  **移除元素的子元素同样会被移除**
     *      <div class="box">
              <p>我是p元素呵呵呵呵</p>
            </div>
            <script>
              var boxEl = document.querySelector(".box")
            	boxEl.remove()
            </script>
 *  **如果我们想要复制一个现有的元素，可以通过cloneNode方法：**
    
     *  可以传入一个**Boolean类型的值**，来决定**是否是深度克隆**；
     *  **深度克隆会克隆对应元素的子元素**，否则不会；
     *      <div class="box">
              <p>我是p元素呵呵呵呵</p>
            </div>
            <script>
              var boxEl = document.querySelector(".box")
            
            	//深拷贝 复制对应元素的子元素
            	var newNode1 = boxEl.cloneNode(true)
            	//浅拷贝 只复制元素本身, 忽略子元素
            	var newNode2 = boxEl.cloneNode(false)
              boxEl.after(newNode1)
              boxEl.after(newNode2)
            </script>

#### 8.4 旧的元素操作方法 ####

*  **在很多地方我们也会看到一些旧的操作方法(了解)：**
    
     *  **parentElem.appendChild(node)：**
        
         *  在parentElem的父元素最后位置添加一个子元素
     *  **parentElem.insertBefore(node, nextSibling)：**
        
         *  在parentElem的nextSibling前面插入一个子元素；
     *  **parentElem.replaceChild(node, oldChild)：**
        
         *  在parentElem中，新元素替换之前的oldChild元素；
     *  **parentElem.removeChild(node)：**
        
         *  在parentElem中，移除某一个元素；

#### 8.5 获取元素大小、位置信息 ####

*  **clientWidth**：内容的宽度+padding(不含滚动条)
 *  **clientHeight**：内容的高度+padding(不含滚动条)
 *  **clientTop**：border-top的宽度
 *  **clientLeft**：border-left的宽度
 *  **offsetWidth**：元素完整的宽度(全部包含在内)
 *  **offsetHeight**：元素完整的高度(全部包含在内)
 *  **offsetLeft**：距离父元素的x
 *  **offsetHeight**：距离父元素的y
 *  **scrollHeight**：整个可滚动的区域高度
 *  **scrollTop**：滚动出去部分的高度

![在这里插入图片描述][1a752dfabc6644fa84a655a9eb37b578.png_pic_center]

#### 8.6 获取window大小、位置信息 ####

*  **window的width和height**
    
     *  **innerWidth、innerHeight**：获取window窗口内容区域的宽度和高度（包含滚动条）
     *  **outerWidth、outerHeight**：获取window窗口的整个区域宽度和高度（包括调试工具、工具栏）
     *  **documentElement.clientHeight、documentElement.clientWidth**：获取html的宽度和高度（不包含滚动条）
 *  **window的滚动位置：**
    
     *  **scrollX**：X轴滚动的位置（别名pageXOffset）
     *  **scrollY**：Y轴滚动的位置（别名pageYOffset）
 *  **也有提供对应的滚动方法：**
    
     *  方法 scrollBy(x,y) ：**将页面滚动至相对于当前位置的 (x, y) 位置**；
     *  方法 scrollTo(pageX,pageY): **将页面滚动绝对坐标；**

### 9.小案例练习 ###

#### 9.1 练习-输入动态的列表 ####

*  通过prompt接收用户的输入，根据输入创建一个列表
 *  **示例代码:**
 *      <h3>动态创建列表</h3>
        <ul class="list"></ul>
        
        <script>
          //获取ul列表
        	var ulEl = document.querySelector(".list");
        
        	//定义变量控制循环
        	var isFlag = true;
        	while (isFlag) {
              
          //获取用户输入信息
        	var message = prompt("请输入列表");
        	//当message为空时 取反为true 退出循环  
        	if (!message) {
              
        		isFlag = false;
        	} else {
              
            //创建一个li元素
        		var liEl = document.createElement("li");
            //将输入信息赋值给li
        		liEl.textContent = message;
            //将li追加到ul的最后一个
        		ulEl.append(liEl);
        	}
        }
        </script>

#### 9.2 练习-动态的显示时间 ####

*  **示例代码:**
 *      <h3 class="time"></h3>
        
        <script>
        	// 简单封装一个格式化时间的工具函数, 后续会细讲格式化时间的封装过程
        	function padLeft(content, count, padStr) {
              
        		count = count || 2;
        		padStr = padStr || "0";
        		content = String(content);
        		return content.padStart(count, padStr);
        	}
        
        	// 1.获取时间要显示的元素
        	var timeEl = document.querySelector(".time");
        
        	// 4.每过一秒获取一次时间
        	setInterval(function () {
              
        		// 2.对时间进行格式化
        		var date = new Date();
        		var year = padLeft(date.getFullYear(), 4, "0");
        		var month = padLeft(date.getMonth() + 1);
        		var day = padLeft(date.getUTCDate());
        		var hour = padLeft(date.getHours());
        		var minute = padLeft(date.getMinutes());
        		var second = padLeft(date.getSeconds());
        
        		// 3.将格式化的时间拼接到要显示的地方
        		timeEl.innerHTML = `${
                year}-${
                month}-${
                day} ${
                hour}:${
                minute}:${
                second}`;
        	}, 1000);
        </script>

#### 9.3 练习-倒计时的展示 ####

*  **CSS代码**
 *      <style>
        	.countdown {
              
        		color: #f00;
        		font-size: 20px;
        	}
        
        	.countdown .time {
              
        		background-color: #f00;
        		color: #fff;
        		display: inline-block;
        		padding: 5px;
        		border-radius: 3px;
        	}
        </style>
 *  HEML和JS代码
 *      <div class="countdown">
          <span class="time hour">00</span>
          <span class="split">:</span>
          <span class="time minute">00</span>
          <span class="split">:</span>
          <span class="time second">00</span>
        </div>
        
        <script>
          // 简单封装一个格式化时间的工具函数, 后续会细讲格式化时间的封装过程
          function padLeft(content, count, padStr) {
              
            count = count || 2;
            padStr = padStr || "0";
            content = String(content);
            return content.padStart(count, padStr);
          }
        
          // 1.获取元素
          var hourEl = document.querySelector(".hour");
          var minuteEl = document.querySelector(".minute");
          var secondEl = document.querySelector(".second");
        
          var endDate = new Date();
          // 设置endDate为当天的24:00:00:00
          endDate.setHours(24);
          endDate.setMinutes(0);
          endDate.setSeconds(0);
          endDate.setMilliseconds(0);
        
        	// 4.实现自动倒计时
          setInterval(function () {
              
            // 2.获取倒计时的小时-分钟-秒
            var nowDate = new Date();
            // 获取倒计时相差的秒钟
            var intervalTime = Math.floor(
              (endDate.getTime() - nowDate.getTime()) / 1000
            );
            // 将相差的秒钟分别转成对应小时-分钟-秒
            var hour = padLeft(Math.floor(intervalTime / 3600));
            var minute = padLeft(Math.floor(intervalTime / 60) % 60);
            var second = padLeft(intervalTime % 60);
            
            // 3.向元素中添加倒计时内容
            hourEl.textContent = hour;
            minuteEl.textContent = minute;
            secondEl.textContent = second;
          }, 1000);
        </script>

[1a752dfabc6644fa84a655a9eb37b578.png_pic_center]: https://img-blog.csdnimg.cn/1a752dfabc6644fa84a655a9eb37b578.png#pic_center