JS基础知识
DOM基础精讲
DOM：document.object model 文档对象模型，提供一些属性和方法可以让我们去操作DOM元素。
获取DOM元素的方法
- document.getElementById 一个元素
- [context].getElementsByTagName 元素集合
- [context].getElementsByClassName 元素集合
- document.getElementsByName 节点集合
- document.documentElement 获取整个HTML对象
- document.body 获取整个BODY对象
- document.head 获取整个HEAD对象
- [context].querySelector 一个元素对象
- [context].querySelectorAll 获取元素集合
-
...
getElementById此方法的上下文只能是document
一个HTML页面中的id理论上是不能重复的
1、如果页面中的id重复了，我们获取的结果是第一个id对应的元素对象
2、在IE7及更低版本浏览器中，会把表单元素的name值当做id来识别（项目中尽量不要让表单的name和其他元素的id相同）
3、如果我们把JS放在结构的下面，我们可以直接使用ID值来获取这个元素（不需要通过getElementById获取）,而且这种方式会把页面中所有ID是他的元素都获取到（元素对象/元素集合）=>不规范 不推荐
//=>获取页面中ID值为#box1的所有元素标签 var allList=document.getElementsByTagName("*"), result=[]; for(var i=0;i<allList.length;i++){ var item=allList[i]; item.id==="box1"?result.push(item):null; } console.log(result);getElementByTagName上下文是可以自己指定的
获取到的结果是一个元素的集合（类数组集合）
1、获取的结果是集合，哪怕集合中只有一项，我们想要操作这一项（元素对象），需要先从集合中获取出来，然后再操作
2、在指定的上下文中，获取所有子子孙孙元素中标签名叫做这个的（后代筛选）
<body> <div></div> <div></div> <div></div> </body> <script> var bodyBox=document.getElementsByTagName("body"); //bodyBox.getElementsByTagName("div"); /*=>UNcaught TypeError: bodyBox.getElementsByTagName is not a function 此时的bodyBox是一个类数组集合，我们需要使用的是其中的第一项 而不是整个集合 */ bodyBox[0].getElementsByTagName("div"); </script>getElementsByClassName上下文可以随意指定
获取的结果也是一个元素集合（类数组集合）
1、真实项目中我们经常会通过样式类名来获取元素，getElementsByClassName这个方法在IE6~8浏览器中是不兼容的
getElementsByName通过元素的NAME属性值获取一组元素（类数组：节点集合 NOdeList）
它的上下文也只能是document
1、IE浏览器只能识别表单元素的那么属性值，所以我们这个方法一般都是用来操作表单元素的
document.documentElement/document.body获取HTML或者BODY（一个元素对象）
//=>获取当前浏览器窗口可视区域的宽度（当前页面一屏的宽度） document.documentElement.clientWidth||document.body.clientWidth //=>clientHeight 获取高度querySelector/querySelectorAll在IE6~8下不兼容，而且也没什么特别好办法处理它的兼容，所以这两个方法一般多用于移动端开发使用
querySlector：获取一个元素对象
querySlectorAll：获取的是一个元素的集合
只要是css支持的选择器，这里大部分都支持
DOM的节点
node：节点，浏览器认为在一个HTML页面中所有内容都是节点（包括标签，注释，文字文本等）
- 元素节点 ：HTML标签
- 文本节点 ：文字内容（高版本浏览器会把空格和换行也当作文本节点）
- 注释节点：注释内容
- document文档节点
- ...
元素节点
nodeType：1；
nodeName：大写标签名（在部分浏览器的怪异模式下，我们写的标签名是小写，它获取的就是小写...）
nodeValue：null
[curEle].tagName:获取当前元素的标签名（获取的标签名一般都是大写）
文本节点
nodeType：3
nodeName：#text
nodeValue：文本内容
注释节点
nodeType：8
nodeName：#comment
nodeValue：注释内容
文档节点
nodeType：9
nodeName :#document
nodeValue：null
节点是用来描述页面中每一部分之间关系的，只要可以获取页面中的一个节点，那么就可以通过相关的属性和方法获取页面中的所有节点
childNodes
获取当前元素所有的子节点（节点集合：类数组）注：不仅仅是元素节点，文本、注释等都会包含在内；子节点说明只是在儿子辈分中查找；
children
获取所有的元素子节点（元素集合）在IE6~8下获取的结果和标准浏览器中有区别（IE6~8中会把注释节点当做元素节点获取到）
parentNode
获取当前元素的父节点（元素对象）
previousSibling && nextSibling
previousSibling：获取当前节点的上一个哥哥节点（不一定是元素节点也可以能是文本和注释）nextSibling：获取当前节点的下一个弟弟节点
previousElementSibling && nextElementSibling
previousElementSibling：获取当前节点的上一个哥哥元素节点nextElementSibling：获取当前节点下一个弟弟元素节点
IE6~8下不兼容
firstChild && lastChild
fristChild：当前元素所有子节点中的第一个（也不一定时元素节点，可能是文本和注释）lastChild：当前元素所有子节点中的最后一个
fristElementChild && lastElementChild （IE6~8 兼容）
DOM的增删改
真实项目中，我们偶尔会在JS中动态创建一些HTML标签，然后把其增加到页面中
document.createElement
在JS中动态创建一个HTML标签
appendChild
容器.appendChild(新元素)把当前创建的新元素添加到容器的末尾位置
insertBefore
容器.insertBefore(新元素，老元素)在当前容器中，把新创建的元素增加到老元素之前
//=>真实项目中很多需求都是通过动态创建元素来完成的，其中有一个需求:解析一个URL地址每一部分的信息（包含问号传递的参数值）
//->1.纯字符串拆分
//->2.编写强大的正则，捕获到需要的结果
//->3.通过动态创建一个A标签，利用A标签的一些内置属性来分别获取每一个部分的内容
//->...
/***
var link=document.createElement("a");
link.href="http://www.andy.com/stu/?name=andy&age=30&sex=0#teacher";//->此处地址就是我们需要解析的URL
//->hash:存储了哈希值 "#teacher"
//->hostname: 存储的是域名 "http//www.andy.com"
//->pathname: 存储的是请求资源的路径 "/stu/"
//->protocol: 协议 "http:"
//->search: 存储的是问号传递参数值，没有传递是字符串 "?name=andy&age=30&sex=0"
***/
function queryURLParameter(url){
var link=document.createElement("a");
link.href="url";
var search=link.search,
obj={};
if(search.length===0) return;
search=search.substr(1).split(/&|=/g);
for(var i=0;i<search.length;i+=2){
var key=search[1],
value=search[i+1];
obj[key]=value;
}
link=null;
return obj;
}removeChild
容器.removeChild(元素)在当前容器中把某一个元素移除掉
replaceChild
容器.replaceChild(新元素，老元素)在当前容器中，拿新元素替换老元素
cloneNode
元素.cloneNode(false/true)把原有的元素克隆一份一模一样的，false：只克隆当前的元素本身，true：深度克隆，把当前元素本身以及元素的所有后代都进行克隆
[set/get/remove]Attribute
给当前元素设置/获取/移除 属性的（一般操作的都是他的自定义属性）box.setAttribute("myIndex",0)
box.getAttribute("myIndex")
box.removeAttribute("myIndex")
使用xxx.index和xxx.setAttribute("index",0)这两种设置自定义属性的区别
xxx.index：是把当前操作的元素当做一个普通对象，为其设置一个属性名（和页面中的HTML标签没关系）
xxx.setAttribute：把元素当做特殊的元素对象来处理，设置的自定义属性是和页面结构中的DOM元素映射在一起的
JS中获取的元素对象，我们可以把它理解为两种角色：
- 与页面HTML结构无关的普通对象
- 与页面HTML结构存在映射关系的元素对象
元素对象中的内置属性，大部分都和页面的标签存再映射关系：
xxx.style.backgroundColor="xxx" 此时不仅把JS中对象对应的属性值改变了，而且也会映射到页面的HTML标签上（标签中有一个style行内样式，元素的样式改变了）
xxx.className="xxx" 此时不仅是把JS对象中的属性值改了，而且页面中的标签增加了class样式类（可以看见的）
//获取上一个哥哥元素节点
//=>获取当前元素的上一个节点
//=>循环判断：当上一个节点存在，并且上一个节点类型不为1时，持续循环，知道节点类型为1
function prevSibling(curELe){
var p=curEle.previousSibling;
while(p && typeof!==1){
p=p.perviousSibling;
}
return p;
}Date日期操作基础讲解
Date 是日期类，通过他可以对时间进行处理
var time=new Date();//获取当前客户端本机时间（当前获取的时间不能作为重要的参考依据）
//=>获取的结果是一个日期格式的对象：Mon Jul 02 2018 14:00:14 GMT+0800 (中国标准时间)
typeof new Date()->"object"
//=>time.getFullYear()获取四位整数年
//=>time.getMonth() 获取月0~11, 代表1~12月
//=>time.getDate() 获取日
//=>time.getDay() 获取星期（0~6）代表周日~周六
//=>time.getHours() 获取小时
//=>time.getMinutes() 获取分钟
//=>time.getSeconds() 获取秒
//=>time.getMilliseconds() 获取毫秒
//=>time.getTime() 获取当前日期距离"1970-01-01 00:00:00"毫秒差var time=new Date("2017-10-22");//=>当new Date中传递一个时间格式的字符串，相当于把这个字符串转换为标准的时间对象格式（转换完成后，就可以调取上面我们讲的那些方法了）
//=>时间格式的字符串
//"2017-10-22"(IE下识别不了)
//"2017/10/22"
//"2017/10/22 16:15:34"
//1530511656252(如果传递的是距离1970年的那个毫秒差，但是只能是数字)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。