携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

昨天只是整理了JavaScript的基本语法，还有核心的DOM和BOM，里面的内容很简单，但是需要多记忆

正文开始啦

一、详解DOM

1.了解DOM

1)什么是DOM

w3c提的一个标准
DOM就是文档对象模型，是一个抽象的概念定义了访问和操作HTML文档的方法

2)HTML和txt文本的区别
HTML是有组织的结构化文件

3)什么是DOM树
1.浏览器将结构化的文档以"树"的结构存储在浏览器内存里
2.每个HTML元素被定义为节
3.这个节点有自己的属性(名称、类型、内容 )
4.有自己的层级关系(parent, child, sibling)

4)图解DOM树

2.对DOM节点的一些常⻅操作

1)查找节点

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成⻚面加载

2)改变元素内容 element就是DOM的对象

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute,value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

3)添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	可写入 HTML

3.结合事件对DOM进行操作

1)什么是事件
事件指的是在html元素上发生的事情比如图片元素被点击
事件触发时，可设置触发一段js代码, 事件触发后会执行这段js代码

2)常⻅的HTML事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成⻚面加载

3)怎么对事件作出反应 (1)通过元素的事件属性

(2)启用事件监听器

addEventListener 给DOM对象添加事件处理程序
removeEventListener删除给DOM对象的事件处理程序

(3)onclick和addEventListener的区别

onclick会被覆盖
addEventListener可以同时注册多个，根据注册顺序，先后执行

4.深度剖析JS中事件的一些机制

1)事件传播的两种机制

冒泡
捕获

2)图解事件捕获和事件冒泡

3)什么是事件代理
思考：父级那么多子元素，怎么区分事件本应该是哪个子元素的事件代理就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

4)怎么取消冒泡或者捕获

event.stopPropagation();
拓展方法：// 阻止元素行为, 例如a连接跳转
event.preventDefault()

5)JavaScript中的定时器 (1)延迟执行

setTimeout(function, 毫秒)
停止：clearTimeout(id) // 参数必须是由 setTimeout() 返回的
ID 值

(2)定时执行

setInterval(function, 毫秒)
停止：setInterval(id) // 参数必须是由 setInterval() 返回的
ID 值

二、Bom

1.BOM及其常用内置对象

BOM——浏览器对象模型（Browser Object Model (BOM)）
内置对象——window全局属性 screen看到客户端的属性 location刷新跳转 history

2.BOM基础之 JavaScript 弹出框类型

警告框

alert('hello')

确认框

var isConfirm = confirm('请确认') console.log('下一步', isConfirm)
// 有返回值的

提示框

var isPrompt = prompt('请输入姓名')
console.log(isPrompt) // 是null 或者 用户输入的值

3.浏览器基本概念之Cookie

1)了解Cookie

Cookie是计算机上存储浏览器的数据用的
容量大小大概4KB
基本语法——document.cookie

2)为什么存在Cookie
浏览器关闭后，服务器会忘记用户的一切让浏览器记住用户信息

3)cookie操作 (1)创建和读取cookie

// 通过Document对象
document.cookie="username=Nick; expires=Thu, 18
Dec 2043 12:00:00 GMT";
setCookie('username', 'Nick')

(2)删除cookie

// 设置过期时间\
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

(3)设置cookie函数

functionsetCookie(cname,cvalue){
var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString(); document.cookie = cname+"="+cvalue+";
"+expires;
}

function getCookie(cname){ var name = cname + "=";
var ca = document.cookie.split(';'); // 将字符串以; 分割数组
 for(var i=0; i<ca.length; i++) {
   var c = ca[i].trim(); // 把多余空格和回⻋删掉
    if (c.indexOf(name)==0) { return
        c.substring(name.length,c.length);
  }

}

return "";

}

传入参数cname键名,cvalue值，（exdays过期事件）怎么设置过期时间？通过new获取时间，对这个d对象

「掘金日新计划 · 8 月更文挑战」的第3天——这样，轻松学习JavaScript 下