js基础(2)~元素增删，属性，节点，定时器，date，事件，模块

本文链接：https://blog.csdn.net/dugujiuding/article/details/120792222

1，DOM节点
2，元素操作
- 2.1，元素的添加和删除
- 2.2，js中访问元素的尺寸和位置
3，元素属性
- 3.1，标准属性标准属性标准属性标准属性标准属性
- 3.2，自定义属性
4，节点
- 4.1，属性类型节点
- 4.2，文本类型节点
5，定时器
- 5.1，延迟定时器
- 5.2，重复定时器
6，日期类
7，事件
8，js模块
9，网络基础
10，cookie
- 10.1，set方法
- 10.2，cookie方法用于设置响应头，

1，DOM节点

DOM(document object model)文档对象模型。
Dom结构(dom树)：浏览器在打开一个html页面之后，会针对当前打开的html页面中的所有标签进行渲染，把每一个标签都解析成一个对象，这些对象以树形的结构关联在一起，这种结构就是dom结构，也就是所谓的dom树。这些标签在解析之后会被存入到document中，document是页面主体标签的一个对象集合，叫做文档对象模型。

一切关于页面对象的操作，都需要经过document来访问，把标签以及样式通过dom转换成了对象或者是方法，js中不能直接操作html标签。

document代表当前页面的对象。getElementById：根据id来查找元素。查找到之后会以对象的形式返回。

 var obj =document.getElementById("title");
    console.log(obj)

getElementsByTagName：根据标签名查找符合的所有元素。返回一个列表。

列表不是真正的数组，但是可以像数组一样使用索引对元素进行访问，也可以使用长度。

var p1 =document.getElementsByTagName("p");

getElementsByClassName：根据class样式查找符合的元素，返回一个列表。

var lines =document.getElementsByClassName("line");

querySelector：根据样式选择器来查找某个元素。返回的是查询到的页面元素对象。

var hello =document.querySelector("#title");

querySelectorAll：根据样式选择器来查找所有满足条件的元素，返回列表。

var linqwe=document.querySelectorAll(".line")

textContent与innerHTML的区别

textContent单一的显示文本，不去管文本内容，
innerHTML在设置内容的时候，会把内容中的标签解析为元素显示出来。

2，元素操作

2.1，元素的添加和删除

createElement：创建标签，参数是标签名称。

var h1 =document.createElement("h1");
//给标签添加内容
h1.textContent ="这是通过js语法创建的h1标签";

appendChild：添加子元素。

/*
    document.body代表body对象。
   下面代码的意思：把一个名为h1的标签添加到body对象中。
*/
document.body.appendChild(h1);

insertBefore：将一个标签作为子元素插入到另一个标签中。

/*
   insertBefore，2个参数:
   1参是要插入的元素对象，
   2参是插入到哪个元素之前。
*/
document.body.insertBefore(h2,firstTitle);

//parentElement：表示本元素的父元素对象.
console.log(firstTitle.parentElement);

删除子元素

document.body.removeChild(firstTitle);

2.2，js中访问元素的尺寸和位置

如果元素的样式是通过css设置的，那么不能通过style属性来获取。

获取到元素展示的时候的宽高(包含边框)

console.log(box.offsetWidth);
    console.log(box.offsetHeight);

不含边框的宽高

console.log(box.clientWidth);
    console.log(box.clientHeight);

获取元素相对于离自己最近的position(必须是非static)。left：父元素的横坐标。top：纵坐标。

console.log(box.offsetLeft);
console.log(box.offsetTop);

到内容区域的距离

console.log(box.clientLeft);
    console.log(box.clientTop);

获取浏览器工作区域的宽高

console.log(window.innerWidth);
   console.log(window.innerHeight);

获取浏览器窗口的宽高

console.log(window.outerWidth);
  console.log(window.outerHeight);

3，元素属性

HTML标签属性可以分为2种;
html标准属性：在html语法中能够直接被浏览器识别，有专门用途。
自定义属性：标准属性之外的都叫做自定义属性，满足个性化。
基本所有的html属性都可以使用对象.属性的形式访问，属性也支持读和写。

var h1 =document.getElementById("name");
console.log(h1.title);属性读
h1.title ="不忘初心!";属性写

3.1，标准属性标准属性标准属性标准属性标准属性

1，每一个元素对象都有一个完整的style层叠样式表。
元素的style属性代表该元素的样式表。当为元素的标签设置style属性之后，实际上是把字符串(red)解析成了一个对象，然后再赋值。

       h1.style.color ="red";
	//上面的那个=下面的这个
	 h1.style="color:red"

2，标准的class属性可以设置多个值，因为class本身就是一个列表。

className：添加样式名称
p1.className ="green bold";

3，class样式增删改查

//删除，有则删除：remove
p1.classList.remove("bold");
//添加：add
p1.classList.add("bold");
//切换，有则删，无则添：toggle
p1.classList.toggle("bold");
//判断某些样式是否存在：contains
console.log(p1.classList.contains("bold"));

3.2，自定义属性

getAttribute：可以获取自定义属性和标准属性。

var v1 =p1.getAttribute("dalong");

setAttribute：可以添加自定义属性和标准属性。

/*
  setAttribute，两个参数：1参是属性名，2参属性值
*/
p1.setAttribute("state","ready");

判断是否有自定义属性

console.log(p1.hasAttribute("state"));

删除自定义属性

 p1.removeAttribute("state");

对于标签对象，访问的对象属性，标准属性和对象属性的访问方式一样的(people.name与p1.title)；如果是非标准属性，访问的就是对象的属性而不是标签的属性了。

4，节点

4.1，属性类型节点

1，attributes：查找某个元素节点上所有的属性，返回一个属性列表。

//(每一个属性都可以理解为是一个小的数据)
var attList =a.attributes;

2，修改或者添加属性节点

//属性有就代表修改
a.setAttribute("target","_self");

//属性无则代表添加
a.setAttribute("title","百度一下，你就知道");

3，删除属性节点

a.removeAttribute("href");

4，对于class属性的修改，有专门的样式表，提供了增删改查。

a.classList.add("bgy");增
// 删除
a.classList.remove("kaiti");
// 替换
 a.classList.toggle("red");

5，对于style属性的修改，直接修改元素节点就可以

a.style.marginLeft ="100px";

4.2，文本类型节点

1，childNodes表示本节点所有的子节点，类型是一个nodeList。

var list =ul.childNodes;

2，N
nod：表示单一的节点

 var nod =list[i];

3，元素中的标签和文本(包括空格和换行)都属于元素的子节点。

//nodeType表示节点类型：1.为元素 2.属性 3.文本。
console.log(nod.nodeType);

4，文本节点属于叶子节点，往下没有子节点了。

5，定时器

定时器分2种：1.延迟定时器(setTimeout)，2.重复定时器(setInterval)。

5.1，延迟定时器

延迟定时器：可以延迟某个时间之后再调用该函数。

/*
  参数：1参是要调用的函数，2参是时间。
  以毫秒为单位，1m =1000mm。
  格式：timer是定时器编号。
*/
var timer = setTimeout(function(){
        console.log("4秒时间到");
},4000);

删除定时器：根据定时器编号删除

 function cancelTimer(){
        clearTimeout(timer);
          // 清除掉内存
        timer =null;
        // 清空重复定时器的
        clearInterval(timer2);
        timer2 =null;
    }

5.2，重复定时器

重复定时器：会在填入的时间内，按照时间，间隔重复执行。

//也会返回一个定时器编号
 var timer2 =setInterval(function(){
        console.log("我变帅了"); 
},1000);

6，日期类

1，创建系统提供的日期类(Date)

var now =new Date();

2，getTime()：返回自1970年7月1日起至今的毫秒数。

 console.log(now.getTime());
 //返回自传入的时间到1970的毫秒数
console.log(now.setFullYear(2018,10,16));

3，年月日

	var year =now.getFullYear();//拿到当前的年份
	var month =now.getMonth();//拿到当前的月份 
	var date =now.getDate(); //拿到当前是几号
    var day =now.getDay(); //拿到当前是星期几

4，时分秒

	var hour =now.getHours();//拿到小时 0(午夜) ~~23
    var minute =now.getMinutes();//分钟 返回值是0~~59 
    var second =now.getSeconds();//秒数 返回值是0~~59

5，三目运算符(条件运算符)
格式：条件?结果1:结果2。
如果满足条件，会执行结果1，否则执行结果2。

//在传参时值不固定时使用。
console.log(age<20?"未成年":"成年");

//嵌套使用
console.log(salary<3000?"贫困户":salary<6000?"正常":"小康");

7，事件

7.1，事件基础

通过html标签的属性进行事件绑定。

/* 
   onclick：点击事件，当点击按钮的时候事件会触发，
   zanClick(event):当事件激活的时候要去执行的函数的名称和参数，
   onclick:属性名称 zanClick是属性值 可以使用全局作用域的函数。
*/
    <button onclick="zanClick(event)"

在js中为元素绑定事件

var btn =document.getElementById("btn");
    // 因为onclick是个标准属性所以可以直接调用
    btn.onclick =function(e){
        console.log("这是通过js来执行的事件:"+e);
    }

7.2，鼠标事件

1，onmousedown：鼠标按下时触发

box.onmousedown =function(e){
        console.log("鼠标按下去了!!!");
    }

2，onmouseup：鼠标松开

 box.onmouseup =function(e){
        console.log("鼠标松开了!!!");
    }

3，nmouseenter：鼠标指针进入时触发

box.onmouseenter =function(e){
        console.log("鼠标指针进入了!!!");
    }

4，onmouseleave：鼠标离开时触发

box.onmouseleave =function(e){
        console.log("鼠标离开了!!!");
    }

5，onmousemove：鼠标指针移动，频繁触发

box.onmousemove =function(e){
        console.log("鼠标指针移动，频发!!!");
    }

7.3，键盘事件

1，onkeydown：键盘按下时触发

document.body.onkeydown =function(e){
        //   e.key代表键盘按键上面的值，系统通过捕捉按键，
        // 来拿到按键的值
          console.log(e.key);
        //   按键的编码
          console.log(e.keyCode);
    }

2，按键弹起时：onkeyup

 document.body.onkeyup =function(e){
        console.log(e.key);
    }

3，正在点击时触发：onkeypress

document.body.onkeypress =function(e)
    {// 正在点击按键的时候触发
        console.log(e.key);
    }

7.4，元素的滚动事件

1，onscroll：滚动监听事件，当元素发生内容滚动时，事件触发。

page.onscroll =function(e){
   // e.target >>>当前事件的所属对象
   // 获取当前元素本身的高度
   console.log("元素本身:"+e.target.clientHeight);
   // 元素内容高度
   console.log("滚动内容:"+e.target.scrollHeight);
   //  纵向偏移量
   console.log("元素的纵向偏移:"+e.target.scrollTop);
   // 判断内容是否到底
   if (e.target.scrollTop ==
       e.target.scrollHeight - e.target.clientHeight) {
       console.log("拖到了底部");
   }
}

scroll事件
scrollTop属性，表示元素的纵向滚动偏移量。

// console.log(e.target.scrollTop);
clientHeight，元素本身的高度（不带边框）
// console.log(e.target.clientHeight);
scrollHeight，元素内容的高度
console.log(e.target.scrollHeight);

//最大滚动偏移量=元素内容高度-元素自身高度。

7.5，事件的传播过程

子元素的事件触发会带动父元素的事件触发。
事件传播分为两个：

从上到下的捕获过程,
从下到上的冒泡过程。

1，addEventListener：添加监听，3个参数

1参：代表监听事件的类型
2参：代表监听事件的函数，监听成功后调用
3参：一个布尔值，代表事件在XX阶段触发。默认是flase表示在冒泡阶段触发，true代表该事件在捕获阶段触发。

newBtn.addEventListener("click",f1,true);

2，removeEventListener：删除事件。如果事件在捕获阶段进行监听的，是无法删除的。
一些特殊的事件是无法阻止的，例如a标签的跳转。

newBtn.removeEventListener("click",f1);

8，js模块

8.1，http模块

http模块的作用：创建http服务。

createServer：创建基于http协议的服务器,
request:请求（req）：里面包含有此次请求的内容，
response:响应（res）:里面包含有此次响应的内容

var app =http.createServer(function(req,res){}

res.end：向响应体内插入数据，把数据返回给客户端，并结束此次请求。默认返回是html格式可以直接返回现成的网页，也可以嵌入标签。

res.end("<h1>欢迎来到我的csdn,谢谢阅读!!!</h1>");

listen:服务器起动
端口号；8080,3000

//成功之后的回调
app.listen(8080,function(err){
console.log("run is now");
});

8.1.1，请求报文和响应报文

http要求只有客户端主动请求服务器,服务器才能做出响应,
一次完整的http请求：
1，客户端按照请求报文格式把请求数据发给服务器,
2，然后服务器按照响应报文格式返回给客户端数据。
在这个过程中,客户端执行的数据叫请求报文，服务端返回的数据叫响应报文。
请求报文

请求行:单独的一行,其中规定了请求方法，资源路径，协议名称/协议版本，
请求头:多行数据,其中可以记录请求的路径,请求的cookie,浏览器信息,请求体长度，
空行:单独的一行,没有任何数据,作用是用来分隔请求头和请求体，
请求体:多行数据,内容是本次请求的数据。

响应报文

响应行:单行的数据,本次请求的状态码,请求结果：
A，1开头表示正在拨，
B，2开头表示连接成功，
C，4表示客户端出现错误404，url拼错，
D，5表示服务端错误，502表示服务器瘫痪了，
响应头:多行数据包含服务器信息,本次请求体的长度,本次请求体的数据类型,cookie等
空行:和请求报文空行一样。
响应数据:本次请求返回的数据一般都是json或者是xml格式。

8.2，fs(文件)模块

8.2.1，fs.writeFileSync方法

fs.writeFileSync：同步写入，用于把一段文本写入到一个文件中。

1参：文件路径，
2参：当前写入的文本,文件存在则会被覆盖掉,如果不存在就创建并写入。

//导入模块
var fs = require("fs");

fs.writeFileSync("./one.txt","ok");
// fs.writeFileSync()同步
// fs.writeFileAsync()异步

8.2.2，fs.writeFile

fs.writeFile：写入文件

1参：文件路径，
2参：写入的内容,
3参：写入结束的回调函数,
回调函数有一个参数,如果任务完成,则为空,如果任务失败,则会返回失败原因。

fs.writeFile("./123.txt","今天晚上下雨了",function(error){
   console.log(err)
}

8.2.3，fs.readFileSync

fs.readFileSync：同步读取。

fs中的方法，都分为两个版本的,同步版和异步版(sync)。
fs.readFileSync：同步版的读取文件方法，参数是要读取的文件的路径。返回值就是读取到的内容。

var content = fs.readFileSync("./123.txt");

/*
  读取到的内容不是字符串，而是原始数据， 类型是buffer，可以调用buffer对象的toString()方法转为字符串。
*/
content.toString()

8.2.4，fs.readFile

fs.readFile：异步读取。

1参：读取的文件路径，
2参：文件读取结束后的回调函数。回调函数有两个参数:
1参：错误信息，如果没错则为空，
2参：读取到的内容。

fs.readFile("./123.txt",function(err,data){
	if (err) {
		console.log(err);
	} else {
		console.log(data.toString());
	}
});

8.2.5，fs.mkdir

fs.mkdir：制作文件夹。

1参：创建的文件夹的路径，
2参：创建之后的回调函数。

fs.mkdir("./abc",function(err){}

8.2.6，fs.copyFile

fs.copyFile：复制文件。

1参，需要复制的文件，
2，复制到哪里去，
3，复制完毕之后回调的函数，

fs.copyFile("./123.txt","./abc/456.txt",function(err){}

//fs.unlink：文件删除。
fs.unlink("./abc/456.txt",function(err){}

8.3，同步与异步

同步:代码占用主线程，是阻塞的状态，直到任务结束之后才会打开线程。
异步:分线程:任务是在后台执行,不会阻塞当前代码，当前代码立刻可以执行，所以异步函数一般都会有一个回调的函数，当异步功能完毕之后回到主线程。
文件操作为什么会有异步?
文件操作在写入的时候,耗时不确定,磁盘的写入速度，文件的大小等等都会影响到文件写入速度，如果使用同步容易造成堵塞，反映到程序上来说，会出现卡顿，在使用的时候尽量使用异步函数。定时器也是一个异步函数。

8.4，path模块

path模块：设置路径。
绝对路径：有完整的路径，以盘符开头
相对路径:不完整的路径，只记录路径结尾部分,忽略层级关系

8.4.1，path.join

path.join方法：将2个路径合并一个。

// ./代表当前目录 ../表示上层目录
// __dirname:表示当前文件所在的绝对路径

let p3 =path.join(p1,p2);

8.4.2，path.resolve

path.resolve：把文件的相对路径转成绝对路径。

console.log(path.resolve(p4));

//path.extname:获得当前文件的扩展名
console.log(path.extname(p4));

//path.basename:获得当前文件的文件名
console.log(path.basename(p4));

8.5，url模块

url模块：统一资源定位符。

url组成：
1,协议名：http，ftp，udp，mail，
2，域名或ip：com（顶级商业域名），cn（国家域名），edu（教育域名）。ip：127.0.0.1（本机ip），
3，端口号：8080,8088.3306,7215，
4，路径：相对路径和绝对路径,
5，参数：name，id，psw
6，哈希值

http://www.baidu.com:80/music/asd/asdf?name=sun&age=3#3333

http:// 协议名
www.baidu.com 域名
:80 端口号
/music/asd/asdf 路径
?name=sun&age=3 参数
#3333 哈希值

url也分绝对地址和相对地址
url模块可以把一个url路径转换成一个url对象
var userObj =url.parse(urlStr);

8.6，模块化

定义：把一个庞大的功能拆分成若干个小的功能，每个功能是一个独立的模块，使用的时候导入。
好处：提高代码的复用。
导出的数据可以是任意类型，导出的数据是什么类型，导入的时候就是对应的类型。
module.exports只能导出一套数据，如果文件里面有多个数据，可以把这些数据封装成为一个大的对象，

module.exports ={num,str,arr,obj,js2Str}

9，网络基础

9.1，get与post的区别

get没有请求体,请求的数据直接追加到url后面,post有请求体，请求的数据和url分开，
GET请求的数据会暴露在地址栏中，而POST请求则不会。
在使用GET请求时，传输数据会受到URL长度的限制。
POST的安全性比GET的高。

9.2，JSON解析

,9.2.1，JSON.stringify

stringify：把对象转换成字符串。

var jsonStr =JSON.stringify(objArr);

9.2.2，JSON.parse

parse：把字符串转化成对象。

var objArr2 =JSON.parse(data.toString());

10，cookie

10.1，set方法

set方法：用来设置响应内容。

Set-cookie设置响应头，设置了cookie之后可以让浏览器帮助服务端存储一定的数据。
当浏览器收到cookie之后下一次启动服务器的时候会自动把cookie附带到本次的请求头中。
cookie的内容只能是字符串，如果想存储多个键值对的话，会比较麻烦，而且要按照cookie的标准格式去进行存储。

导入cookie包
var cookie =require('cookie');

res.set('Set-cookie','name=xia,age=30');

10.2，cookie方法用于设置响应头，

cookie方法：用于设置响应头，

1参：cookie的名字，名字重复代表更新cookie,
2参：cookie的值，
3参：cookie需要配置的对象,可以配置有效期，或者路径。

res.cookie('name','King',{
// 有效期 毫秒
maxAge:86400