前端点滴（JS基础）（五）----倾尽所有
JavaScript 内置对象（四）
Date 对象
Date 对象用于处理日期与时间。
Date 对象的实例
创建 Date 对象： new Date()
以下四种方法同样可以创建 Date 对象：
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
Date 对象的基本操作
实例一：（跳动时钟效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>date01</title>
<style>
#date{
position: absolute;
font-size: 30px;
font-family: '微软雅黑';
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="date">2020.01.08</div>
<script>
window.onload = function(){
showTime();
}
//checkTime(i)对分钟和秒进行判断，如果小于10，在其前补0.
function checkTime(i){
return i < 10? "0"+i:i;
}
function showTime(){
/* 创建日期对象 */
var time = new Date();
/* 获取年份 */
var year_1 = time.getYear();
/* 获取完整年份 */
var year_2 = time.getFullYear();
/* 获取月份，注意：一月返回0，12月返回11 */
var month = time.getMonth();
/* 获取日期 */
var date = time.getDate();
/* 获取星期数，注意：返回的是0~6 */
var day = time.getDay();
/* 获取小时，注意返回的是0~23 */
var hours = time.getHours();
/* 获取分钟，注意：返回的是0~59 */
var min = time.getMinutes();
/* 获取秒 */
var seconds = time.getSeconds();
min = checkTime(min); // 分钟补 “ 0 ”
seconds = checkTime(seconds); // 秒钟补 “ 0 ”
/* 创建数字 */
var weekday = new Array(7); // 星期补中文
weekday[0] = "星期天";
weekday[1] = "星期一";
weekday[2] = "星期二";
weekday[3] = "星期三";
weekday[4] = "星期四";
weekday[5] = "星期五";
weekday[6] = "星期六";
var str_time = year_2 + "年" + (month+1) + "月" + date + "日" +" "+ weekday[day] +" "+ hours +":" + min +":" + seconds;
document.getElementById('date').innerHTML = str_time;
setTimeout(showTime,500); //每500ms执行一次，实现秒数实时跳动。
}
</script>
</body>
</html>
效果：
实例二：（倒计时）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>date01</title>
<style>
#date{
position: absolute;
font-size: 30px;
font-family: '微软雅黑';
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="date">2020.01.08</div>
<script>
window.onload = function(){
var now = new Date();//获取当前时间
/* 注意定义截止日期时年月日需要用逗号隔开，并且是一字符串 */
var timedate = new Date("2020,01,15");
//getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
//通过相减得到距离截止时间的毫秒数。
var date = timedate.getTime() - now.getTime();
//按照需求
//将“毫秒数”化为“天数” ==> 除以1*24*60*60*1000
//将“毫秒数”化为“小时” ==> 除以60*60*1000
//将“毫秒数”化为“分钟” ==> 除以60*1000
//将“毫秒数”化为“秒” ==> 除以1000
//Math.ceil()取整
var time = Math.ceil(date/(24*60*60*1000));
document.getElementById('date').innerHTML = time;
}
</script>
</body>
</html>
实例三：（跳动的倒计时）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>date01</title>
<style>
#date{
position: absolute;
font-size: 30px;
font-family: '微软雅黑';
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="date">2020.01.08</div>
<script>
window.onload = function(){
showTime();
}
function checkTime(i){
return i < 10? "0"+i:i;
}
function showTime(){
var now = new Date();//获取当前时间
var timedate = new Date("2020/01/24,24:00:00");//截止时间
//getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
var leftTime = (timedate.getTime() - now.getTime())/1000;
var d = checkTime(parseInt(leftTime/(24*60*60)));
var h = checkTime(parseInt(leftTime/(60*60)%24));
var m = checkTime(parseInt(leftTime/60%60));
var s = checkTime(parseInt(leftTime%60));
var time = d + "days" + h + ":" + m + ":" + s ;
document.getElementById('date').innerHTML = time;
setTimeout(showTime,500);
}
</script>
</body>
</html>
效果：
Match 对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。
Match 对象的实例
var x = Math.PI;
console.log(x); //=> 3.141592653589793
var y = Math.sqrt(16);
console.log(y); //=> 4
Match 对象的基本操作
常用的 Match 对象属性
PI
var x = Math.PI;
console.log(x); //=> 3.141592653589793
常用的 Match 对象方法
ceil(x) 对数进行向上取整。
/* 25/7向上取整 */
var date = 25;
var time = Math.ceil(date/7);
console.log(time); //=> 4
向下取整 floor(x)
/* 25/7向下取整 */
var date = 25;
var time = Math.floor(date/7);
console.log(time); //=> 3
max(x,y,z,…,n) 返回 x,y,z,…,n 中的最高值。
/* 15，25，35，45取最高值 */
var time = Math.max(15,25,35,45,'65');
console.log(time); //=> 65
注意： 字符会强制转换。
min(x,y,z,…,n) 返回 x,y,z,…,n中的最低值。
/* 15，25，35，45取最低值 */
var time = Math.min(15,25,35,45,'65');
console.log(time); //=> 15
random() 返回 0 ~ 1 之间的随机数。
/* 取得介于 1 到 10 之间的一个随机数 */
var res = Math.floor((Math.random()*100)+1);
console.log(res); //=> 91
round(x) 四舍五入。
/* 25/7四舍五入*/
var date = 25;
var time = Math.round(date/7);
console.log(time); //=> 4
sqrt(x) 返回数的平方根。
/* 16的平方根 */
var y = Math.sqrt(16);
console.log(y); //=> 4
HTML Dom 对象
HTML DOM 节点与 DOM 模型
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点，整个文档是一个文档节点，用document对象表示，最大的节点。
- 所有的HTML元素都是元素节点，比如html、head、body、a、h1。
- 所有 HTML 属性都是属性节点，比如href 。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
它是JS将HTML按文档结构和内容层次抽象出的模型，使得JavaScript有了访问HTML的能力，能够实现对HTML中内容的操作。DOM存在广泛，PHP以及其他语言也有各自的DOM模型。
DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，节点在dom中就是对象。包含有元素节点（标签）、属性节点、文本节点。dom模型中，每个节点，都是一个JavaScript对象。
节点之间的关系
节点之间的关系犹如人类家族中的族谱。节点之间的关系包括：
- 父子关系（父子、后代、祖先级）
- 兄弟（姐妹）关系
单词：
- parent – 父母
- child – 孩子
- children – 孩子（复数），表示所有孩子
- siblings – 兄弟姐妹、同胞
Document 对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
注意： Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
Document 对象属性和方法（基本操作）
1. 元素（标签）节点查询
（1）根据document对象查询
document是JS内置的一个对象，表示整个HTML文档。根据document查询，意思就是在整个文档范围内查询。
单词：
- get – 获取、得到
- Element – 元素
- Elements – 很多元素
- By… – 根据…./通过….
- Class – 类
- Tag – 标签
- query – 查询
- Selector – 选择器
- All – 全部
| 方法名 | 返回值 | 支持 |
|---|---|---|
| getElementById(元素id) | 一个dom对象 | 所有浏览器 |
| getElementsByTagName(标签名) | 包含dom对象的数组 | 所有浏览器 |
| getElementsByClassName(类名) | 包含dom对象的数组 | IE8+ |
| getElementsByName(元素的name属性) | 包含dom对象的数组 | 所有浏览器 |
| querySelector(css选择器) | 一个dom对象 | IE7+ |
| querySelectorAll(css选择器) | 包含dom对象的数组 | IE7+ |
记住：带有 Elements、All 单词的方法或属性返回的是一个有多个元素组成的数组。
通过查询可以有效地对Dom节点进行操作。
实例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li class="a">李白</li>
<li id="dufu">杜甫</li>
<li class="a">王维</li>
<li>辛弃疾</li>
</ul>
<p class="a">上述内容是诗人。</p>
<br>
请输入更多诗人： <input type="text" name="shiren" />
<script>
/****************** script标签一定要放到ul/p/input标签下面 *******************/
//------------------------根据id查询
var dufu = document.getElementById('dufu');
dufu.style.color = 'red';
//-----------------------根据标签名查询
var lis = document.getElementsByTagName('li'); // 返回数组，数组中包含满足条件的4个li
/* 遍历每一个 li 追加样式 */
for(var i=0; i<lis.length; i++){
lis[i].style.backgroundColor = '#ccffcc';
}
//---------------------根据元素的类名查询
var as = document.getElementsByClassName('a'); // 返回数组，数组中包含类名为a的元素
/* 遍历每一个 a 追加样式 */
for(var i=0; i<as.length; i++){
as[i].style.fontSize = '30px';
}
//---------------------根据元素的name属性查询
var input = document.getElementsByName('shiren'); // 返回数组，数组中包含属性name为shiren的元素
input[0].style.backgroundColor = '#ccc';
//--------------------根据css选择器选择元素
var libai = document.querySelector('.a'); // 返回一个dom对象，class为a的有很多，也只返回第一个
libai.style.border = 'solid 1px pink';
//--------------------根据css选择器选择元素
var all = document.querySelectorAll('p, input'); //返回数组
for(var i in all){
all[i].style.border = 'dashed 1px blue';
}
</script>
</body>
</html>
（2）相互关系查询
相互关系查询可以分为下面三种情况：
- 根据父节点查找子节点
- 根据子节点查父节点
- 查询兄弟节点
实现：先找到父节点（参照对象节点），然后使用方法。
单词：
- child – 孩子
- children – 很多孩子
- Node – 节点
- nodes – 很多节点
- first – 第一个
- last – 最后一个
- Element – 元素
- Sibling – 兄弟，姐妹
- Siblings – 所有的兄弟，姐妹
- previous – 上一个
- next – 下一个
| 方法/属性 | 说明 | 返回 | 支持 |
|---|---|---|---|
| 父节点.children | 查询所有子节点，非w3c标准 | 数组 | 所有浏览器 |
| 父节点.childNodes | 查询所有子节点，包括文本节点 | 数组 | 所有浏览器 |
| 父节点.firstChild | 查询第一个子节点，包括文本节点 | 对象 | 所有浏览器 |
| 父节点.firstElementChild | 查询第一个子节点，不包括文本节点 | 对象 | IE8+ |
| 父节点.lastChild | 查询最后一个子节点，包括文本节点 | 对象 | 所有浏览器 |
| 父节点.lastElementChild | 查询最后一个子节点，不包括文本节点 | 对象 | IE8+ |
| 父节点.getElementBy…() | 节点继续调用getEle…系列方法查询子节点 | 数组/对象 | 所有浏览器 |
| 子节点.parentNode | 查询父节点 | 对象 | 所有浏览器 |
| 兄弟.previousSibling | 查询上一个兄弟，包括文本节点 | 对象 | 所有浏览器 |
| 兄弟.previousElementSibling | 查询上一个兄弟，不包括文本节点 | 对象 | IE8+、 |
| 兄弟.nextSibling | 查询下一个兄弟，包括文本节点 | 对象 | 所有浏览器 |
| 兄弟.nextElementSibling | 查询下一个兄弟，不包括文本节点 | 对象 | IE8+ |
记住：带有 Element 单词的方法与属性不会返回空白节点，即返回的都是带有标签的节点。
实例：
<body>
<ul id="u">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
/******************* 根据父节点查找子节点 ************************/
//先找到父节点
//var ul = document.getElementsByTagName('ul')[0];
//var ul = document.getElementById('u');
// var ul = document.querySelector('#u');
// ------------- 查询所有ul的子节点 --- children
var lis = ul.children; // 返回数组。 查询ul的所有子节点
console.log(lis);
// HTMLCollection(5) [li, li, li, li, li]
// ------------- 查询所有ul的子节点 --- childNodes
var lis = ul.childNodes; // 返回数组。 查询ul中的所有子节点包括空白节点，如果要去除空白节点就将li合并为同一行
console.log(lis);
// HTMLCollection(11) [#text, li, #text, li, #text, li, #text, li, #text, li, #text]
//---------------查询所有ul的子节点 --- 通过标签名getElementsByTagName()
var lis = ul.getElementsByTagName('li'); //在ul中查找所有ul后代中的li
console.log(lis);
// HTMLCollection(5) [li, li, li, li, li]
//---------------查询ul的第一个子节点 --- firstChild
var li1 = ul.firstChild;
console.log(li1); //不好用，会把第一个空白当做第一个子元素，返回一个空白节点
// #text(空白文字节点)
//---------------查询ul的第一个子节点 --- firstElementChild
var li1 = ul.firstElementChild;
console.log(li1); //好用，但是IE8+才支持
// 第一个 li
//---------------查询ul的最后一个子节点 --- lastChild
var li1 = ul.lastChild;
console.log(li1); //不好用，会把最后一个空白文字节点当作最后一个元素,返回一个空白节点
// #text(空白文字节点)
//---------------查询ul的最后一个子节点 --- lastElementChild
var li1 = ul.lastElementChild; //好用，但是IE8+才支持
console.log(li1);
// 最后一个 li
/******************* 根据子点查找父节点 ************************/
//随便找一个子节点
var li = document.getElementsByTagName('li')[1];
var ul2 = li.parentNode;
console.log(ul2);
// 返回父级 ul
/******************* 兄弟关系查询 ************************/
//随便找一个子节点
var li = document.getElementsByTagName('li')[1];
//查询上一个兄弟
var lastLi = mazha.previousSibling;
console.log(lastLi); //不好使，会认为空白是上一个兄弟
var lastLi = mazha.previousElementSibling;
console.log(lastLi); //好使，但是IE8+支持
//查询下一个兄弟 -- nextSibling
//查询下一个兄弟 -- nextElementSibling
//用法相同不做解释
</script>
</body>
（3）遗留 DOM
早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后 称为“0级DOM”。
| 方法/属性 | 说明 | 返回 | 支持 |
|---|---|---|---|
| document.body | 访问body节点 | 返回body节点 | 所有浏览器 |
| document.forms | 访问所有的表单 | 返回数组 | 所有浏览器 |
| document.formName.name | 访问表单项 | 返回单个表单项或数组 | 所有浏览器 |
| document.anchors | 访问所有的锚点 | 返回数组 | 所有浏览器 |
| document.links | 访问所有的链接 | 返回数组 | 所有浏览器 |
| document.images | 访问所有的图片 | 返回数组 | 所有浏览器 |
| document.all | 访问所有的元素 | 返回数组 | 所有浏览器 |
实例：
<form name="f1">
用户名：<input type="text" name="username" value="123"><br>
密码：<input type="password" name="pwd" value="123">
</form>
<form name="f2">
邮箱：<input type="text" name="email" value="123"><br>
电话：<input type="password" name="tel" value="123">
</form>
JS代码：
//获取body节点
var body = document.body;
body.style.backgroundColor = '#ccc';
//获取form
document.forms[1].style.border = 'solid 1px red';
//获取form，通过name值
document.f1.style.border = 'solid 1px blue';
//找表单中各个项
document.f1.username.style.backgroundColor = 'yellow';
效果：
2. 元素（标签）节点增删改操作
（1）创建、增加节点
方法一：父节点.appendChild(子节点);
创建元素节点
语法：document.createElement("标签节点");
实例：
//创建一个 <li>chen</li>
//创建元素类型的节点
var li = document.createElement('li');
创建文本节点
语法：document.createTextNode("文本");
实例：
//创建文本类型的节点
var text = document.createTextNode('chen');
添加节点
语法：父节点.appendChild(子节点);
实例：
//添加节点，将文本节点添加到元素节点中
li.appendChild(text); // 得到<li>chen</li>
//添加节点，将组合好的li，添加到ul中
document.querySelector('ul').appendChild(li);
注意： appendChild() 后新节点会放到最后面。
方法二：父节点.insertBefore(新节点, 参照的节点);
/* 创建元素节点 */
var newLi = document.creatElement('li');
/* 创建文本节点 */
var text = document.creatTextNode('chen');
/* 组合新节点 */
newLi.appendChild(text);
/* 查询参照节点，以及父节点 */
var ul = document.querySelector('ul'); // 父节点
var oldLi = document.getElementsByTagName('li')[1]; // 参照节点
/* 添加节点 */
ul.insertBefore(newLi,oldLi);
注意： 新节点会放在参照节点的前面。
（2）克隆节点
所谓的克隆表示将克隆对象复制粘贴。
语法：克隆对象.cloneNode([true]);
注意： 参数true 表示将其中的内容（样式）原原本本复制克隆。
实例：
<body>
<ul class="a" style="color:red;">
<li>唐僧</li>
<li>悟空</li>
<li>八戒</li>
<li>沙僧</li>
</ul>
<script>
//克隆一份ul，然后放到页面中
//先找到要克隆的ul
var oldUl = document.querySelector('ul');
//克隆一个新的ul
// var newUl = oldUl.cloneNode(); //只克隆ul标签本身，不包含里面的内容
var newUl = oldUl.cloneNode(true); //克隆ul标签并包含里面的内容
//把新的ul放到body中
document.body.appendChild(newUl);
</script>
</body>
效果：
（3）替换节点
语法：父节点.replaceChild(新节点,代替换的节点对象)
实例：
/* 创建元素节点 */
var newLi = document.creatElement('li');
/* 创建文本节点 */
var text = document.creatTextNode('白龙马')
/* 组合新节点 */
newLi.appendChild(text);
/* 查询父节点，以及参照节点 */
var ul = document.querySelector('ul');
var oldLi = document.getElementsByTagName('li')[0];
/* 进行替换节点 */
ul.replaceChild(newLi,oldLi);
（4）删除节点
语法：父节点.removeChild(待删除节点);
实例：
/* 查询父节点以及待删除的节点 */
var ul = document.querySelector('ul');
var li = document.getElementsByTagName('li')[0];
/* 进行删除 */
ul.removeChild(li);
457
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
