目录
一、DOM操作
1.webAPI
1.API:应用程序编程接口------预先定义好的函数
2.webAPI:
DOM中的API：write()
BOM中的API：alert()/log()/prompt()
数据中的API：substring()/reverse()/tofixed()
3.DOM的顶级对象是document，BOM的顶级对象是window
4.DOM中的概念：
文档：网页
元素：标签 div/p
属性：元素的属性 meta元素的charset/a元素的href
文本：标签之间的文字
节点：网页中所有的内容都是节点，包括元素节点、属性节点、文本节点、注释节点、document节点
5.操作DOM：操作DOM中的节点
2.获取元素的方式
函数===方法，函数分为自定义函数和预定义函数(API)
1、通过ID获取元素(getElementById('ID名')) 单个元素
2、通过类名获取元素(getElementsByClassName('类名')) 多个元素
伪数组：有索引、length属性、还可以遍历，但是不是真正的数组，数组中专业的方法不能使用
3、通过标签名获取元素(getElementsByTagName('标签名')) 多个元素
4、通过name名获取元素(getElementsByName('name名')) 多个元素
5、通过querySelector获取元素 获取指定选择器的第一个元素，参数是选择器 单个元素
6、通过querySelectorAll获取元素 获取指定选择器的所有元素，参数是选择器 多个元素
3.事件
1.什么是事件：触发 ---> 响应
2.事件的三要素：
1.事件源：触发事件的元素
2.事件类型：鼠标触发的方式
鼠标事件、键盘事件、浏览器事件
3.事件的处理程序：事件触发后要执行的代码（以函数的形式返回）
3.事件源.事件类型 = 事件的处理程序
4.单击事件 onclick
5.事件的写法
1、内部写法：
2、行内写法：将事件的类型当做元素的属性 （函数调用中this）
3、外部写法：注意外部js的顺序 window.onload = function () {}包起来
4.对非表单元素的操作
1.在js中操作元素的CSS属性，如果属性名有连接符-。需要将连接符去掉第二个单词首字母大写
2.修改图片尺寸
1.imgObj.width = '1000'
2.imgObj.style.borderRadius = '50px'
3. imgObj.className = 'select'
className属性的弊端：会覆盖原先的类名属性值
5.文本操作
1.innerText/textContent:获取或者设置元素的文本内容
2.innerHTML:获取或者设置元素的所有节点
二、属性操作与事件
1.新事件
1.鼠标事件：
单击事件：onclick
双击事件：ondblclick
鼠标移入事件：onmouseover
鼠标移出事件：onmouseout
鼠标进入事件：onmouseenter
鼠标离开事件：onmouseleave
鼠标按下事件：onmousedown
鼠标抬起事件：onmouseup
鼠标移动事件：onmousemove
鼠标获取焦点事件：onfocus
鼠标失去焦点事件：onblur
2.键盘事件：
键盘按下：onkeydown
键盘抬起：onkeyup
3.浏览器事件：
加载完成事件：onload
滚动事件：onscroll
2.监听事件
1、绑定事件：事件源.事件类型 = 事件的处理程序
解绑事件： 事件源.事件类型 = null
2、绑定监听事件: 事件源.addEventListener(事件类型(不用加on),事件的处理程序/事件处理程序的函数名)
解绑监听事件：事件源.removeEventListener(事件类型,事件处理程序的函数名)
3.事件对象
1.事件对象的浏览器兼容性写法
var event = event || window.event
2.事件类型
console.log(event.type)
3.id
console.log(event.target.id)
4.clientX、clientY与pageX、pageY的区别
clientX与pageX都是事件的触发点距离浏览器左侧的横坐标，pageX包含滚动条卷去的距离
clientY与pageY都是事件的触发点距离浏览器上侧的纵坐标，pageY包含滚动条卷去的距离
5.key:键名
console.log(event.key)
6.keyCode
console.log(event.keyCode)
4.阻止冒泡事件和默认事件
1.阻止事件冒泡
var event = event || window.event
event.stopPropagation()
}
2.mouseenter（鼠标进入）不支持冒泡，而mouseover（鼠标移入）支持冒泡
3.默认事件
1.a链接的跳转
2.表单的提交
4.阻止默认事件
var event = event || window.event
event.preventDefault()
5.属性操作
1、getAttribute("属性名")：获取元素指定属性名的属性值(包括自定义和本身)
2、setAttribute("属性名","属性值")：设置元素指定属性名的属性值(同上)
3、removeAttribute("属性名")：移除元素的属性名
6.设置元素样式的几种方法
1、对象.style
2、对象.className
3、对象.setAtribute('style'," ")
4、对象.setAtribute('class',' ')
5、对象.style.setProperty('css属性','css属性值')
6、对象.style.cssText ="css样式"
三、DOM节点操作与BOM
1.节点特征
节点：标签节点、属性节点、文本节点、注释节点、document节点
1.document节点特征
节点类型nodeType：9
节点名称nodeName：#document
节点值nodeValue：null
2.标签节点特征：
节点类型nodeType：1
节点名称nodeName：大写的标签名
节点值nodeValue：null
3.属性节点特征：
节点类型nodeType：2
节点名称nodeName: 属性名
节点值nodeValue：属性值
4.文本节点特征
节点类型nodeType：3
节点名称nodeName: #text
节点值nodeValue：文本内容
2.节点之间的关系
1、父节点 parentNode
2、父元素节点 parentElement
parentNode与parentElement的区别：
相同点：都能获取到父元素
不同点：html的有父节点是document,通过parentNode返回节点名称#document。
html没有父元素，通过parentElement返回空。
3、子节点:文本节点、注释节点、标签节点 childNodes
4、子元素节点：标签节点 children
5、第一个子节点:文本节点 文本节点值or文本节点名称 firstChild
6、第一个子元素节点:元素节点 第一个子元素 firstElementChild
7、最后一个子节点 文本节点 文本节点值or文本节点名称 lastChild
8、最后一个子元素节点 元素节点 最后一个子元素 lastElementChild
9、上一个节点: 文本节点 文本节点值or文本节点名称 previousSibling
10、上一个元素节点 元素节点 上一个元素 previousElementSibling
11、下一个节点 文本节点 文本节点值or文本节点名称 nextSibling
12、下一个元素节点 元素节点 下一个元素 nextElementSibling
总结：
firstChild、lastChild、previousSibling、nextSibling返回的都是文本节点，有就返回文本的节点值，没有就返回文本的节点名称
firstElementChild、lastElementChild、previousElementSibling、nextElementSibling 返回都是元素节点
3.创建元素的三种方式
1、document.write() 弊端：只能往body中添加元素
2、innerHTML 弊端：会覆盖之前的元素
3、document.createElement()
父元素.appendChild(): 添加子元素
父元素.removeChilid()：删除子元素
4.BOM
window
属性：console/所有的全局变量
方法：alert()/prompt()
事件：onload()/onscroll()
1、location
a、hash: 地址栏上#及后面的内容 eg:window.location.hash
b、host: 主机名及端口号
c、hostname: 主机名
d、part: 端口号
e、href：当前地址
f、reload: 重新加载
2、history
a、前进 forward()
b、后退 back()
四、动画以及封装
1.调试代码：
如果发现事件操作后没有任何响应
1、先测试事件有没有执行，打印console.log(1)
2、如果没有任何的打印结果，再去测试事件源是否获取到 console.log(事件源)
2.封装思想：
1、把功能相同代码封装在一个函数中
2、把可变化的量当做参数
3.尺寸属性
1.offset系列
1、offsetWidth = width+左右的padding+左右的border
2、offsetHeight = height+上下的padding+上下border
如果父元素没有定位
3、offsetLeft = 距离左侧浏览器的距离
4、offsetTop = 距离上侧浏览器的距离
如果父元素有定位
5、offsetLeft = 距离左侧父元素的距离
6、offsetTop = 距离上侧父元素的距离
2.client系列
1、clientWidth = width + 左右padding
2、clientHeight = height + 上下padding
3、clientLeft = border-left
4、clientTop = border-top
3.scroll系列
1、scrollWidth = width + 滚动条卷去的宽度
2、scrollHeight = height + 滚动条卷去的高度
3、scrollLeft = 滚动条卷去的宽度 （只能在滚动事件下获取，但是可以在任何情况下设置）
4、scollTop = 滚动条卷去的高度
4.浏览器高度兼容性问题
1.浏览器卷去的高度
标准模式: document.docmentElement.scrollTop
非标准模式:document.body.scrollTop
2、浏览器的高度
标准模式：
document.body.clientHeight 浏览器的实际高度
document.documentElement.clientHeight 浏览器的可视高度
非标准模式：
document.body.clientHeight 浏览器的可视高度
document.documentElement.clientHeight 浏览器的实际高度
5.this的指向问题
1、在构造函数中this指向实例化对象
2、在对象的函数中（方法中）this指向当前的对象
3、在普通函数中this指向window
4、在事件函数中，this指向事件源
5、在定时器函数中this指向window
6、原型对象的函数中this指向：
1、如果实例化对象调用，this指向实例化
2、如果原型调用，this指向原型对象
7、在数组的函数中，this指向当前数组
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
