JavaScriptDOM笔记

一、获取页面中元素的几种方式

获取元素方法	说明
document.getELementById(“ID选择器”)	根据ID获取
document.getElementsByTagName(“标签名”)	根据标签名获取
document.getElementsByClassName(“类名”)	通过H5新增的方法获取
document.querySelector(“选择器”)	这个只会返回第一个
document.querySelectorAll(“选择器”)	这个选择全部
document.body	获取body元素
document.documentElement	获取HTML元素

二.、事件属性

鼠标事件	说明
onfocus	获取焦点
onblur	失去焦点
onclick	鼠标点击
onmouseover	鼠标经过
onmouseout	鼠标离开
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

属性方法	说明
className = “类名”	添加类名,会覆盖原来的类名，可以一次增加多个类名
element.dataset.自定义方法	H5新增的获取自定义属性的方法
element.属性	获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)	获取属性；主要获得自定义的属性（标准）–(Attribute是属性的意思)
element.属性	设置内置属性值（元素本身自带的属性）
element.setAttribute(‘属性’, ‘值’)	设置属性；主要针对于自定义属性
element.removeAttribute(‘属性’)	删除属性；主要针对于自定义属性

三、节点

属性方法	说明
parentNode.parentNode	获取父节点
parentNode.childNodes	获取所有的子节点 (包含元素节点和文本节点)
parentNode.children	获取所有的子元素节点 (他只返元素节点，不包括文本节点)
parentNode.firstChild	获取第一个子节点 (包含元素节点和文本节点)
parentNode.firstElementChild	获取第一个子元素节点 (他只返回元素节点，不包括文本节点)
parentNode.lastChild	获取最后一个子节点 (包含元素节点和文本节点)
parentNode.lastElementChild	获取最后个子元素节点 (他只返回元素节点，不包括文本节点)
parentNode.nextSibling	获取下一个兄弟节点 (包含元素节点和文本节点等等)
parentNode.nextElementSibling	获取下一个兄弟元素节点 (只返回元素节点)
parentNode.previousSibling	获取上一个兄弟节点 (包含元素节点和文本节点等等)
parentNode.previousElementSibling	获取上一个兄弟元素节点 (只返回元素节点)

以上获取节点会有兼容性问题（IE9以上兼容）；
实际开发写法是：
parentNode.children[0];获取第一个子节点
parentNode.children[element.children.length - 1];获取最后一个子节点
这样写就不会出现兼容性问题了；如果没有返回null

属性方法	说明
document.createElement(“div”)	创建元素
document.write(“内容”)	创建元素（如果页面文档流加载完毕，在调用这句话会导致页面重绘)
node.appendChild(child)	添加节点(这里是给node里面添加节点；也是追加元素node是父级；child是子级)
node.insertBefore(child, 给谁添加)	这个是给前面添加的
node.removeChild(删除谁)	删除元素
node.cloneNode()	括号为true 深拷贝 复制标签里的内容；括号为空或false是浅拷贝 只复制标签不复制内容

四、注册方式和事件对象

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

• 利用on开头的事件onclick**
• 特点：注册事件的唯一性
• 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

• w3c标准 推荐方式
• addEventListener() 他是一个方法
• IE9之前的IE不支持此方法，可使用attachEvent()代替
• 特点：同一个元素同一个事件可以注册多个监听器
• 按注册顺序依次执行

addEventListener事件监听方式

eventTarget.addEventListener(type, listener, [, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当然对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

• type: 事件类型字符串，比如click，mouseover，注意这里不要带on
• listener: 事件处理函数，事件发生时，会调用该监听函数
• useCapture: 可选参数，是一个布尔值，默认是false。如果是true就是捕获阶段，是false或者不填就是冒泡阶段

element.removeEventListener(“click”, fn) 删除事件

事件对象

事件对象属性方法	说明
e.target	返回的时触发事件的对象（元素）
e.srcElement	返回触发事件对象 非标准ie6-8使用
e.type	返回事件类型 比如 click mouseover 不带on
e.cancelBubble	该属性阻止冒泡 非标准ie6-8使用
e.stopPropagation()	阻止冒泡 标准
e.returnValue	该方法阻止默认事件（默认行为） 非标准 ie6-8使用 比如不让跳转连接
e.preventDefault()	该方法阻止默认事件（默认行为）标准 比如不让跳转连接

鼠标常用类型	说明
contextmenu	禁止鼠标右键
selectstart	禁止鼠标选中

// 禁用鼠标右键
document.addEventListener('contextmenu', (e) => {
	e.preventDefault();   // 取消默认事件
})
// 禁用鼠标选中
document.addEventListener('selectstart', (e) => {
  	e.preventDefault();   // 取消默认事件
})

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X轴
e.screenY	返回鼠标相对于电脑屏幕的Y轴

键盘事件	说明
onkeyup	某个键盘被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发 但是他不识别功能键 比如shift ctrl箭头等

可以使用e.keyCode获取按下那个键的ASCII
keyup和keydown不区分字母大小写
keypress区分字母大小写

五、window对象常见事件

5.1窗口加载事件

window.onload = () => {}
或者
window.addEventListener(“load”, () => {})

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、css文件等)，就调用的处理函数

注意：

1. 有了window.onload 就可以把JS代码写道页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。
2. window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onloadww为准。
3. 如果使用addEventListener 则没有限制

document.addEventListener(“DOMContentLoaded”, () => {})

• DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式，图片，flash等等。
  IE9以上才支持
  如果页面的图片有很多的话，从用户访问到onloand触发可能需要较长的时间，交互效果就不能显示，必然影响用户体验，此时用DOMContentLoaded 事件必须合适
  加载速度比load更快一些

5.2调整窗口大小事件

window.onresize = () => {}
或者
window.addEventListener(“resize”, () => {})

window.onresize 是调整窗口大小加载事件，当触发时就调用的处理函数
注意：

1. 只要窗口大熊啊发生像素变化，就会触发这个事件。
2. window.innerWidth当前屏幕的宽度
3. window.innerHeight当前屏幕的高度
4. 可以利用这个事件完成响应式布局。

5.3定时器

window.setTimeout(调用函数, [延迟的毫秒])

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

setTimeout(() => {
  console.log("两秒到了")
}, 2000)

页面中有很多定时器，我们可以分开来写

function setTime() {
 console.log("时间到了")
}
let timer1 = setTimeout(setTime, 1000)
let timer2 = setTimeout(setTime, 2000)

5.4停止setTimeout()定时器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用setTimeout()建立的定时器

<button>停止定时器</button>
  <script>
    let btn = document.querySelector("button")
    function setTime() {
      console.log("时间到了")
    }
    let timer1 = setTimeout(setTime, 1000)
    btn.addEventListener("click", () => {
      clearTimeout(setTime)
    })
  </script>

5.5setInterval()定时器

window.setInterval(回调函数, [间隔毫秒])

setInterval()方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意：

1. 这个调用函数可以直接写函数，或者写函数名或者采取字符串’函数名()'三种方式
2. 间隔的毫秒省略默认是0，如果写，必须是毫秒，表示每个多少毫秒自动调用这个函数
3. 因为定时器可能很多，所以我们经常给定时器赋值一个标识符

	setInterval(() => {
		console.log("重复调用")
	}, 2000)

setTimeout 延时时间到了，就会去调用这个回调函数，只调用一次就结束了这个定时器。
setInterval 每隔这个延时时间，就会去调用这个回调函数，会调用很多次，重复调用这个函数。

5.6停止setInterval()定时器

window.clearInterval(intervalID)

clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器

<button class="begin">开始定时器</button>
<button class="stop">停止定时器</button>
  <script>
    let begin = document.querySelector(".begin")
    let stop = document.querySelector(".stop")
    let timer = null

    begin.addEventListener("click", () => {
      timer = setInterval(() => {
        console.log("开始执行")
      }, 2000)
    })

    stop.addEventListener("click", () => {
      clearInterval(timer)
    })
  </script>

六、location对象

6.1 什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

6.2 URL
统一资源定位符（Uniform Resource Locator, URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL一般的语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.baidu.com/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议 常用的http,ftp,maito等
host	主机(域名) www,baidu.com
port	端口号可选，省略时使用方案的默认端口 如http的默认端口为80
path	路径 由 零或多个 ‘/’ 符号隔开的字符，一般用来表示主机上的一个目录或文件地址
fragment	片段 #后面内容 常用于链接 锚点

6.3 location对象的属性

location对象属性	返回值
location.href	获取或者设置 整个URL
location.host	返回主机(域名) www,baidu.com
location.port	返回端口号 如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容 常见于链接 锚点

6.4 location对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面(也成为重定向页面) 有历史记录可以后退页面
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5 如果参数为true则强制刷新 ctrl+f5

七. navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

八. history 对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能，参数如果是 1 前进一个页面 如果是 -1 后退一个页面

history对象一般在实际开发中比较少用，但是会在一些OA办公系统中见到

九. 元素偏移量 offset 系列

9.1 offset概念

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。

• 获得元素距离带有定位父元素的位置
• 获得元素自身的大小(宽度高度)
• 注意：返回的数值都不带单位

offset系列属性	作用
element.offsetParent	返回作为该元素有定位的父级元素 如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

9.2 offset 与 style 区别

offset：

• offset 可以得到任意样式表中的样式值
• offset 系列获得的数值是没有单位的
• offsetWidth 包含padding+border+width
• offsetWidth 等属性是只读属性，只能获取不能赋值
• 所以，我们想要获取元素大小位置，用offset更合适

style:

• style 只能得到行内样式表中的样式表
• style.width 获得的是带有单位的字符串
• style.width 获得不包含padding和border的值
• style.width 是可读写属性，可以获取也可以赋值
• 所以，我们想要给袁术更改值，则需要用style改变

十. 元素可视区client系列

client 翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。 通过client系列相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

十一. 元素滚动 scroll 系列

1. 元素scroll系列属性

   scroll翻译过来就是滚动的，我们使用scroll系列相关属性可以动态的得到该元素的大小、滚动距离等。

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

2. 页面被卷去的头部

   如果浏览器的高(或宽)度不足以显示整个页面时，会自动出现滚动条，当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。

3. 新方法

   window.pageYOffset 和 window.pageXOffset，IE9开始支持

<body>
	<div>
		dasdasdasdasdsadsadasdsad
	</div>
</body>

let div = document.querySelector('div')
// 混动事件当我们滚动发送变化会触发的事件
div.addEventListener('scroll', function() {
	console.log(div.scrollTop)
})

三大系列总结

他们主要用法：

1. offset系列经常用于获得元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll经常用于获取滚动距离 scrollTop scrollLeft
4. 注意页面滚动的距离通过 window.pageYOffset 和 window.pageXOffset 获得

mouseenter 和 mouseover的区别

mouseenter鼠标事件

• 当鼠标移动到元素上时就会触发mouseenter事件
• 类似 mouseover，他们两者之间的差别是
• mouseover 鼠标经过自身盒子会出触发，经过子盒子触发。mouseenter只会经过自身盒子触发
• 之所以这样，就是因为mouseenter不会冒泡
• 跟mouseenter搭配鼠标离开mouseleave同样不会冒泡

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性

1. 数据村塾在用户浏览器中
2. 设置、读取方便、甚至页面书信不丢失数据
3. 容量较大、sessionStorage约5M、localStorage约20M
4. 只能存储字符串，可以将对象JSON.stringify()编码后存储

window.sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口(页面)下数据可以共享
3. 以键值对的形式存储使用

存储数据：

sessionStorage.setItem(key, value)

key 就是自己起个名字
value 就是需要存储的值

获取数据：

sessionStorage.getItem(key)

删除数据：

sessionStorage.removeItem(key)

删除所有数据：

sessionStorage.clear()

window.localStorage

1. 生命周期永久生效，除非手动删除否则关闭页面也会存在
2. 可以多窗口(页面)共享(同一浏览器可以共享)
3. 以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数

localStorage.removeItem(key)

删除所有数据：

localStorage.clear()