JS基础知识学习（四）

时间 2019-12-07

原文原文链接

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 获取元素集合
...javascript

getElementByIdcss

此方法的上下文只能是document
一个HTML页面中的id理论上是不能重复的html

一、若是页面中的id重复了，咱们获取的结果是第一个id对应的元素对象java

二、在IE7及更低版本浏览器中，会把表单元素的name值当作id来识别（项目中尽可能不要让表单的name和其余元素的id相同）node

三、若是咱们把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浏览器

上下文是能够本身指定的
获取到的结果是一个元素的集合（类数组集合）app

一、获取的结果是集合，哪怕集合中只有一项，咱们想要操做这一项（元素对象），须要先从集合中获取出来，而后再操做url

二、在指定的上下文中，获取全部子子孙孙元素中标签名叫作这个的（后代筛选）spa
```
<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

上下文能够随意指定
获取的结果也是一个元素集合（类数组集合）

一、真实项目中咱们常常会经过样式类名来获取元素，getElementsByClassName这个方法在IE6~8浏览器中是不兼容的

getElementsByName

经过元素的NAME属性值获取一组元素（类数组：节点集合 NOdeList）
它的上下文也只能是document

一、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"毫秒差