JS基础第三节

一、DOM

什么是DOM？Document Object Model(文档对象模型)。DOM是针对HTML和XML文档的一个API(Application Programming Interface应用程序编程接口)。DOM描绘了 一个层次化的节点树,允许开发人员添加、移除和修改页面的 某一部分。

childNodes 子节点集合（包含文本节点、注释节点、标签节点）

children子节点集合，但是只包含标签节点

firstChild 子节点集合中的第一个节点，任意类型

firstElementChild 子节点集合中的第一个标签节点

lastChild 子节点集合中的最后一个节点，任意类型

lastElementChild 子节点集合中的最后一个标签节点

nextSibling 同级以下相邻的第一个节点，任意类型

nextElementSibling 同级以下第一个节点标签节点

previousSibling同级以上相邻的第一个节点，任意类型

previousElementSibling同级以上第一个节点标签节点

nodeName节点名称

nodeType节点类型 （1元素节点，3文本节点，8注释节点，10doctype节点）

parentNode父节点，肯定是标签节点

parentElement 父节点，肯定是标签节点

1.节点操作

使用DOM创建p标签，一定要注意创建者为document

createElement("标签名"): 创建新元素

createTextNode(""): 创建文本节点

appendChild(node): 向childNodes末尾插入一个节点node

insertBefore(newElement, targetElement): 向targetNode之前插入 节点node

replaceChild(newNode, oldNode): newNode替换节点oldNode

removeChild(node): 移除父节点的某个子节点

remove()，直接删除

插入、 替换、 移除方法:document.body.insertBefore(node, targetNode)

appendChild，在父节点的childNodes数组的末尾添加一个新的节点

var   p=document.createElement("p");

p.innerHTML="我是新加的段落";

div.appendChild(p);

var   p=document.createElement("p");

//创建一个文本节点

var   t=document.createTextNode("我是文本添加的");

p.appendChild(t);

div.appendChild(p);

insertBefore，在父节点p节点的前面添加一个h3节点

var    h3=document.createElement("h3");

h3.innerHTML="我是后来的三级标题";

div.insertBefore(h3, p);

将h3换成一个h1，replaceChild,将父节点中的h3用h1替换，h3和h1是单个变量

var   h1=document.createElement("h1");

h1.innerHTML="我是h1";

div.replaceChild(h1, h3);

移除父节点中的某一个子节点，删除：第一种方法把父节点中的某一个节点删除，第二种方法直接删除自身

div.removeChild(p);

p.remove();

通过遍历删除第一个p标签

var    childs=div.children;

for(vari=0; i

if(childs[i].nodeName=="P") {//这里的P一定要是大写的额，否则没有效果额

childs[i].remove();

break;

}

}

获取到第一个h3，删除h3的nextElementSibling

var newH3=div.firstElementChild;

var removeP=newH3.nextElementSibling;

removeP.remove();

2. 节点复制

cloneNode(boolean) 节点复制

true 深复制，复制节点本身以及子节点树

false浅复制，只复制节点本身

cloneNode 方法复制不会将原有元素中添加的js属性复制过去，但是css属性可以复制过去,通过js添加的css属性也可以复制过去

var   div=document.getElementsByTagName("div")[0];

var   newDiv=div.cloneNode(true);

3.属性常见的操作方法

不管是设置，获取，修改属性，都是针对元素的行间属性（常用的有：class   id   title    style       target   href）

设置

a.setAttribute("title","popo");

a.setAttribute("class","haha");

a.setAttribute("style","background-color: green;")

删除

a.removeAttribute("title");

获取

console.log(a.getAttribute("href"));

4.js获取非行间样式

ie所支持的获取非行间样式的方法：currentStyle

用法: 对象.currentStyle.样式名，例: oDiv.currentStyle.width

非ie所支持的获取非行间样式的方法：getComputedStyle

用法: getComputedStyle(对象, 伪类).样式名

例: getComputedStyle(oDiv, null).color

getComputedStyle是一个函数，想获取哪个的样式就把哪个当参数传进去

console.log(getComputedStyle(div).width);

---

二、事件对象

document.onclick=function(event) {

//event     火狐，需要传参数

//window.event     chrome

var    ev=event||window.event;

//window.event获取事件对象

console.log(ev);

//网页标题

document.title=ev.clientX;

//clientX clientY 获取的值是鼠标距离可视化窗口的左右的偏移距离

}

1.鼠标移入移出事件

onmouseover、onmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件

onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件

div.onmouseover=function(){

console.log("移入");

}

div.onmouseout=function(){

console.log("移出");

}

div.onmouseenter=function(){

console.log("移入");

}

div.onmouseleave=function(){

console.log("移出");

}

2.鼠标按下、抬起、点击、双击事件

//鼠标按下就会触发

btn.onmousedown=function() {

console.log("onmousedown");

}

//鼠标抬起时触发

btn.onmouseup=function() {

console.log("onmouseup");

}

//鼠标点击触发

btn.onclick=function(){

console.log("onclick");

}

//鼠标双击事件

div.ondblclick=function(){

console.log("ondblclick");

}

3.键盘事件

//键盘按下事件

document.onkeydown=function(event) {

console.log("onkeydown");

var    ev=event||window.event;

console.log(ev);

console.log(ev.key);

console.log(ev.code);

console.log(ev.keyCode);

//空格32

//0~948~57

//左上右下 37，38，39，40

}

//键盘控制元素移动

//实现点上下左右键，box移动

var    box=document.getElementById("box");

document.onkeydown=function(event) {

var    ev=event||window.event;

switch(ev.keyCode) {

case37:

box.style.left=box.offsetLeft-100+"px";

break;

case38:

box.style.top=box.offsetTop-100+"px";

break;

case39:

box.style.left=box.offsetLeft+100+"px";

break;

case40:

box.style.top=box.offsetTop+100+"px";

break;

default:

alert("你个菜鸡");

break;

}

}

//键盘的抬起事件

document.onkeyup=function() {

console.log("onkeyup");

}

//键盘长按事件

//onkeypress

4.表单事件

onchange 当表单元素的值发生变化时触发

var   Form=document.getElementById("form");

Form.onchange=function() {

console.log("onchange");

}

//聚焦与失焦事件 onfocus onblur

var   Txt=document.getElementById("txt");

Txt.onfocus=function() {

this.value="onfocus";

}

Txt.onblur=function() {

this.value="onblur";

}

//表单提交事件onsubmit

Form.onsubmit=function(event) {

varev=event||window.event;

//如果内容是空，阻止表单提交事件

if(Txt.value=="") {

//阻止默认操作,全兼容

//return false;

//阻止默认操作,推荐使用的

ev.preventDefault();//不兼容IE6~8

}

}

5.绑定事件

addEventListener(事件名称 , 函数,捕获 )方法绑定事件

removeEventListener(事件名称 , 函数,捕获 )解除绑定

解除绑定时，为了方便操作，最好把绑定的事件，加上函数名

第一个参数，事件名称，不要带on，带引号

第二个参数，为监听者，就是具体的功能代码

第三个参数，为true或者false，false冒泡如果是冒泡，事件从响应元素逐渐往上传递；true下沉如果是下沉，事件是从下级逐级往下沉，一直到响应元素

如果是直接绑定事件默认是冒泡

window.addEventListener("load",function() {

alert("a");

},false)

IE下使用attachEvent(事件名称，函数)方法绑定事件

detachEvent(事件名称，函数)解除绑定

第一个参数为事件类型，要带on，带引号

第二个参数，为监听者，就是具体的功能代码

window.attachEvent("onload", function() {

alert("a");

})

6.事件捕获和事件冒泡

事件捕获：当你使用事件捕获时，父级元素先触发，子级元素后触发。

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

事件冒泡：当你使用事件冒泡时，子级元素先触发，父级元素后触发。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

阻止冒泡   ev.cancelBubble = true;

7.自定义右键菜单

//右键菜单

//document.oncontextmenu

document.addEventListener("contextmenu",function(event) {

var    ev=event||window.event;

alert("oncontextmenu");

//阻止默认的事件

//阻止右键菜单ev.preventDefault();

//return false虽然全兼容，但是不能阻止使用add绑定的额事件

//这里用return false不行

//return false;

//preventDefault()都可以阻挡

ev.preventDefault();

},false)

把默认的右键菜单阻止之后，再重新定义

menu.addEventListener("contextmenu",function(event) {

varev=event||window.event;

ev.cancelBubble=true;

varLeft=ev.clientX+(menu.offsetWidth-(ev.clientX-menu.offsetLeft));

menu2.style.left=Left+"px";

menu2.style.top=ev.clientY+"px";

menu2.style.display="block";

ev.preventDefault();

},false)

8.函数回调

函数回调就是函数的参数为函数

函数回调一般用在，当在一个函数内部特定条件下需要触发另一个事件，

此时可以将函数作为一个参数传进来

function   sum1(a,b) {

return   a+b;

}

function    getValue(a,b,fn) {

return    fn(a, b);

}

console.log(getValue(10,20, sum1));

9.滚轮事件

火狐浏览器与其他浏览器滚轮事件不一样

火狐浏览器与其他浏览器滚轮触发的方向不一样，方向是反的

浏览器嗅探

var    FF=navigator.userAgent.indexOf("Firefox"); 

//绑定事件wheel，注意兼容

if(FF!= -1) {

box.addEventListener("DOMMouseScroll", wheel,false)

}else{

box.onmousewheel=wheel;

}

function   wheel(event) {

var   ev=event||window.event;

//捕捉到滚动的方向

//console.log(ev);

//谷歌

//console.log(ev.wheelDelta);

//火狐

//console.log(ev.detail);

if(ev.detail) {

if(ev.detail>0) {

console.log("往下滑")

}else{

console.log("往上滑")

}

}else{

if(ev.wheelDelta>0) {

console.log("往上滑")

}else{

console.log("往下滑")

}

}

}

滚轮事件封装的函数

function   mouseWheel(obj,fn) {

//嗅探

var   ff=navigator.userAgent.indexOf("Firefox");

if(ff!= -1) {

obj.addEventListener("DOMMouseScroll", wheel,false);

}else{

obj.onmousewheel=wheel;

}

function   wheel(event) {

var    ev=event||window.event;

//滚轮往下滚是true

var   down=true;

if(ev.detail) {

down=ev.detail>0

}else{

down=ev.wheelDelta<0;

}

//通过down来执行相应的代码

//让fn执行，并且让ev和down作为参数传进去

fn(ev, down);//函数调用

}

}

//保存box原有的宽高

var  boxW=box.clientWidth;

var   boxH=box.clientHeight;

//函数回调

mouseWheel(box, scaleSize);

function    scaleSize(event,down) {

if(down) {

if(boxW>=500&&boxH>=500) {

boxW=500

boxH=500

}

boxW+=10;

boxH+=10;

box.style.width=boxW+"px";

box.style.height=boxH+"px";

}else{

if(boxW<=150&&boxH<=150) {

boxW=150

boxH=150

}

boxW-=10;

boxH-=10;

box.style.width=boxW+"px";

box.style.height=boxH+"px";

}

}

---

三、cookie

cookie用来存储数据（保存在浏览器里面），cookie储存的数据类型为数字或者字符串，cookie存储的数据容量为5KB，1KB为1024个字节，1个字节8个二进制。

Firefox每个域名cookie限制为50个。

Opera每个域名cookie限制为30个。

Safari/WebKit貌似没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。

当Cookie已达到限额，自动踢除最老的Cookie，以使给最新的Cookie一些空间。Internet Explorer和Opera使用此方法。

Firefox很独特：虽然最后的设置的Cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在Firefox中不要超过Cookie限制）。

不同浏览器间cookie总大小也不同：

Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。

Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。

Internet Explorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

注：多字节字符计算为两个字节。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

储存cookie

document.cookie="user=coco";

document.cookie="password=12345";

//创建日期

var   nowDate= new   Date();

var   days=nowDate.getDate();

//往后推迟三天

nowDate.setDate(days+3);

//cookie设置时不能直接设置中文，需要先对中文进行编码，显示时再进行解码

document.cookie="hobby=popo;expires="+nowDate;

如果设置了中文转码需要加上decodeURI();当获取到内容的时候，一定要进行编码，否则会出现中文乱码问题。decodeURI

封装的关于cookie的函数：

获取cookie的函数

function    getCookie(name) {

//获取cookie

var   cookie=document.cookie;

//将cookie按照; 进行分割得到一个数组

var   arr1=cookie.split("; ");

for(var  i=0; i

//将数组里的每一项按照等号再次进行分割

var     arr2=arr1[i].split("=");

if(name==arr2[0]) {

return    arr2[1];

}}}

//console.log(getCookie("hobby"));

封装设置cookie的函数

function    setCookie(name,value,day) {

var  now= new   Date();

var   days=now.getDate();

now.setDate(days+day);

document.cookie=name+"="+value+";expires="+now;}

//setCookie("wakaka", "doudou", 3)

封装一个删除cookie的函数

function    removeCookie(name) {

setCookie(name,"",-10);

}

//removeCookie("hobby");

//console.log(document.cookie);

---

四、正则表达式

正则，是一种高准确性匹配 字符串 的方式

元字符 既定格式 [] 量值

将以下字符串中的数字提取出来[123, 45, 45];

var   str="123fajdj45dawkn45";

var    reg=/\d+/g;

var     arr=str.match(reg);

alert(arr);

1.正则创建方法

第一种，使用直接量创建

var    reg=/正则的表达式/正则的属性;

第二种，使用对象创建

exp expression 描述表达式

var   reg=new   RegExp(正则的表达式,正则的属性);

2.元字符 . (点)

元字符 . (点)匹配字符串中的所有字符，但是换行符不行(\n)

var     str="jdahj434\n88%32$482hfjff334j ===54--eud";

var     reg=/./g;

var      arr=str.match(reg);

alert(arr);

3.元字符\w

\w 只能匹配 数字、字母、下划线

+ 是连续的意思，只要满足正则验证的字符都会拼接在一起，一旦遇到不满足的自动与后面的断开，再次遇到满足的时候，自动开启链接

var   str="123 das$ $jkdFF FF78_=+ $%^ff6";

var   reg=/\w+/g;

var   arr=str.match(reg);

alert(arr);

4.元字符\d数字

var     str="23 12n jkj$323$ad 312 rjfks%$jf";

var      reg=/\d+/g;

var arr = str.match(reg);

alert(arr);

//replace将字符串里面满足正则验证的部分，用新的东西替换掉

var   str=str.replace(reg,"***") ;

alert(str);

5.元字符\s验证空格

var     str="    hello world, 哈哈哈     "

var      reg=/\s+/g;

str = str.replace(reg, "*");//这样写会把多个空格换成一个*

alert(str);

把多个空格换成多个*

str=str.replace(reg,function(s) {

//alert("(" + s + ")");

//return   "*";

var  str=" ";

for(var  i=0; i

str+="*";

}

return     str;

})

alert(str);

6.元字符\b边界搜索

\b代表边界搜索，单词边界，会自动检测单词是否是独立单词，只要左右两边有分界线，就可以找出来

//把单个he找出来

var    str="he-hello    world he hello";

var   reg=/\bhe\b/g;

//var arr = str.match(reg);

//alert(arr);

str=str.replace(reg,"*");

alert(str);

7.转义

转义，将有意义的加反斜杠变成无意义的，将无意义的加反斜杠变成有意义的

alert("hahaha\\\\n哈哈\\哈");

var   str="1/23+456";

//+在正则中有具体含义

var    reg=/\+/;

var     reg=/\//;

str=str.replace(reg,"*");

alert(str);

8.元字符汉字

var   str="jdsdlk瓜哥love尿哥";

//搜索所有的汉字\u4e00-\u9ef8

var reg=/[\u4e00-\u9ef8]/g;

var arr=str.match(reg);

alert(arr)

//搜索指定的汉字

var reg=/哥/g;

var arr=str.match(reg);

alert(arr)

var reg=/瓜/g;

str=str.replace(reg,"火");

alert(str)

9.中括号[ ]

[]中括号内部就是取值区间,闭区间

var    str="ssd387976atdr kf3dkl 45j jpo9hj fr00";

//var reg = /[3-9a-n]/g;

var   reg=/[02468a-n]/g;

var   arr=str.match(reg);

alert(arr);

10.元字符-开头结尾

^n    原字符串以n开头才满足正则验证

n$    原字符串以n结尾才满足正则验证

var      str="     #user   p ";  

//var reg=/^\s+/;

//var reg=/\s+$/;

var     reg=/^\s+|\s+$/g;

str=str.replace(reg,"");

reg=/\s+/g;

str=str.replace(reg," ")

alert(str);

11.量词

var   str="123jkds67xak0ld45643";

//n+ 至少包含一个n

//var reg=/\d+/g;

//n* 包含0个或者多个n

//var reg=/\d*/g;

//n? 包含0个或一个n

//var reg=/\d?/g;

//n{数值X}包含x个n

//var reg=/\d{3}/g;

//n{x,y} 包含x个到y个n，x必填代表下限，y可选，如果不填，上限灵活

//{2,} 至少2个，多的无上限

//包含1个2个3个\d

//var reg=/\d{1,3}/g;

var   arr=str.match(reg);

alert(arr);

12.正则的使用方法

replace 字符串方法， 用于匹配正则， 将满足的内容用新内容进行替换

replace(reg, “替换的新内容”)

replace(reg, 回调函数)

match 字符串方法， 用与匹配正则， 返回值数组

reg.test(字符串) 正则验证， 满足正则匹配返回true， 否则返回false