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

文章目录

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 对象开始的;
- 它是DOM的入口点，可以从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

常见的节点类型有如下：

常量	值	描述
Node.ELEMENT_NODE	1	一个元素节点，例如 <p> 和 <div>。
Node.TEXT_NODE	3	Element 或者 Attr 中实际的文字
Node.COMMENT_NODE	8	一个 Comment 节点(注释节点)。
Node.DOCUMENT_NODE	9	一个 Document 节点。
Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如 html> 就是用于 HTML5 的。

其他类型可以查看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的读取

如果我们需要读取样式：

对于内联样式，是可以通过style. 的方式读取到的;*

<div class="box" style="background-color: red;">
  我是box
</div>
<script>
	var div = document.querySelector(".box");
	console.log(div.style.backgroundColor)
</script>

对于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：滚动出去部分的高度

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>