1，DOM节点

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

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

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

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

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

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

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

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

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

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

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

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

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

1. textContent与innerHTML的区别

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

2，元素操作

2.1，元素的添加和删除

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

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

1. appendChild：添加子元素。

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

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

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

1. 删除子元素

document.body.removeChild(firstTitle);

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

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

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

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

1. 不含边框的宽高

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

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

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

1. 到内容区域的距离

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

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

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

1. 获取浏览器窗口的宽高

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，自定义属性

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

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

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

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

1. 判断是否有自定义属性

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

1. 删除自定义属性

 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(午夜) ~~23var 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("拖到了底部");}
}

1. 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服务。

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

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

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

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

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

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

8.1.1，请求报文和响应报文

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

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

响应报文

1. 响应行:单行的数据,本次请求的状态码,请求结果：
   A，1开头表示正在拨，
   B，2开头表示连接成功，
   C，4表示客户端出现错误404，url拼错，
   D，5表示服务端错误，502表示服务器瘫痪了，
2. 响应头:多行数据 包含服务器信息,本次请求体的长度,本次请求体的数据类型,cookie等
3. 空行:和请求报文空行一样。
4. 响应数据:本次请求返回的数据一般都是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#3333http:// 协议名
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

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

1. class 原生js获取父元素_JS获取节点的兄弟,父级,子级元素的方法

   先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的J ...

2. js修改伪元素的属性、styleSheets获取样式表，Failed to read the 'cssRules' property from 'CSSStyleSheet' Cannot acces

   登录验证中的判断逻辑 1.提示输入用户,输入8 - 16位密码2.检验输入用户名和密码是否正确 用户名不允许空格,任何字符数字都行,不允许为空 密码8-16位,不允许空格 ,小于8位给出提示 密码必须 ...

3. js动态给元素添加属性

   最终效果:  具体代码: <!DOCTYPE html> <html lang="zh"> <head><meta charset=&qu ...

4. 【HTML501】HTML基础01_简介_基础_元素_属性

   超文本标记语言(HTML)是一种创建网页的标准标记语言. 可以使用HTML来建立自己的WEB站点,HTML运行在浏览器上,由浏览器来解析. HTML实例 注意:对于中文网页需要使用 <meta ...

5. Node.js基础知识、fs、path、http三大模块、nodejs的模块化、npm与包管理

   文章目录 一.Node.js 简介 二.fs 文件系统模块 读取指定文件中的内容 向指定的文件中写入内容 案例-考试成绩整理 fs 模块 - 路径动态拼接的问题 三.path 路径模块 路径拼接 pa ...

6. day57 闭包函数 函数提升 BOM操作 js选择器 替换元素 类属性操作

   上节课复习 今日内容: 1.作用域 变量提升与函数提升 2.BOM操作=>控制浏览器 3.DOM操作=> 控制文档 4.js练习题 5.jquery 01.补充 <!DOCTYPE ...

7. HTML学习02之基础；元素；属性

   一.基本标签,扩展及应用 标签 HTML 标题(Heading)是通过<h1> - <h6>等标签进行定义的. HTML 段落是通过 <p> 标签进行定义的. HT ...

8. 前端基础知识点整理（html+css+js基础）、不包含框架

   css盒子模型 盒模型都是由四个部分组成的,分别是margin.border.padding和content. ​ 标准盒模型和IE盒模型的区别在于设置width和height时,所对应的范围不同.标 ...

9. js day04DOM节点操作、事件对象与BOM

   DOM节点操作.事件对象与BOM V1.2 一.复习提问  js中目前学到的事件由哪些  如何阻止a链接  设置表单例如disabled selected checked的正确方式是什么?  ...

10. js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式

    参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...

最新文章

1. JavaScript新知：sessionStorage and localStorage
2. 机器学习笔记GBDT（一）：原理
3. 运用shell，python自动下载linux系统运维
4. rabbitmq队列php应用,RabbitMQ工作队列应用
5. Spring全自动AOP和项目加入jar包
6. 让IT工作者过度劳累的12个坏习惯
7. 基于JAVA+SpringMVC+Mybatis+MYSQL的体育竞赛比赛赛事管理系统
8. codeforces 451C. Predict Outcome of the Game 解题报告
9. ai里怎样取消扩展外观_扩展AI：困难的5个原因
10. cu.html 光猫 管理密码,中兴ZXHN F607联通光猫管理员账号密码获取方法
11. 经纬度坐标相互转换度分秒
12. 基于thrift的匹配操作
13. 下拉管家解析各搜索引擎及APP端下拉推荐词的实现规则
14. pgsql 日期转换
15. 关于enq: US – contention
16. office2016专业增强版语言包 VOL
17. windows 10中使用docker Client.Timeout exceeded while awaiting headers
18. 服务注册中心：Eureka
19. zblog 全站ajax,ZBlog全站缓存
20. 维特根斯坦思想概述南京大学陈亚军

热门文章

1. 站在HR角度之五：（群面）无领导小组面试的种种——附500强经典案例
2. 对接极光IM之修改头像
3. Pr插件大全一键安装包视频剪辑必备工具预设
4. vivado软件安装教程
5. oracle 19c ora-01017,Oracle 19c RMAN 连接PDB ORA-01017 错误解决方法
6. 子进程 已安装 pre-removal 脚本 返回了错误号 1或2 与 子进程 已安装 post-installation 脚本 返回了错误号 1或2
7. APISpace 通用文字识别OCR接口 免费好用
8. linux下安装yum步骤
9. 信号与系统之系统的时域分析
10. axure 抖音部件库_原型技巧：如何用Axure画出抖音APP页面色彩风格（干货技能）...