JS基础知识学习（四）

摘要：基础知识基础精讲文档对象模型，提供一些属性和方法可以让我们去操作元素。

DOM：document.object model 文档对象模型，提供一些属性和方法可以让我们去操作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
getElementByTagName
上下文是可以自己指定的
获取到的结果是一个元素的集合（类数组集合）
1、获取的结果是集合，哪怕集合中只有一项，我们想要操作这一项（元素对象），需要先从集合中获取出来，然后再操作
2、在指定的上下文中，获取所有子子孙孙元素中标签名叫做这个的（后代筛选）


    

    

    



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
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年的那个毫秒差，但是只能是数字)