04.webAPI(DOM_BOM)
2020-01-09 13:54:35 0 举报AI智能生成
webAPI
作者其他创作
大纲/内容
API概念
应用程序编程接口
webAPI
浏览器给我们提供的很多的方法(函数)
JavaScript 可以做什么?
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
onFocus、onBlur 和 onChange 事件通常相互配合用来验证表单
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
onSubmit 用于在提交表单之前验证所有的表单域。
等等 ...
DOM是什么
文档对象模型
或文档树模型
节点
标签，内容，空格都是一个节点
属性
HTML的属性和DOM对象的属性几乎是一模一样的
特殊
class属性，在js中，class这个单词是保留字(es6中已经成为关键字)，所以使用className属性来代替
开关属性：option标签的selected,单选框、多选框的checked，input标签的disabled等等，在js当中的开关使用的是true和false，和HTML中有些许不同
自定义属性
有时候，HTML标签提供的标准属性不够用了，我们还可以添加自定义属性,
增
setAttribute("属性名","属性值")
删
removeAttribute("属性名")
改
setAttribute("属性名","属性值")
查
getAttribute("属性名")
DOM 增删查改
查找HTML元素
通过 id 找到 HTML 元素
document.getElementById("id名");
如果获取的ID值不存在,返回null
通过标签名找到 HTML 元素
document.getElementsByTagName(标签名");
返回值为一个伪数组
如果有匹配的元素，就会存在伪数组中
如果没有匹配的元素，得到的也不是null, 而是空伪数组[ ]
细节1：只要使用了getElementsByTagName返回的就是一个伪数组，即便只有一个元素，需要使用[0]才能把元素给取出来。
细节2：
document.getElementsByTagName获取到是页面中所有的li
ul.getElementsByTagName获取到的是ul下面的所有的li（范围小一些，常用一些）
细节3：getElementById只有document有，元素没有。(是document的方法)
通过类名找到 HTML 元素
document.getElementsByClassName("class")
返回值为一个伪数组.用法同:getElementsByTagName;
通过name属性找到HTML元素(少用)
document.getElementsByName("name名")
返回值为一个伪数组.用法同:getElementsByTagName;
通过选择器方式找到HTML元素(少用,新增的有兼容问题)
1.获取单个的元素对象
对象.querySelector(选择器);
通过querySelector获取元素对象,只能获取第一个满足的元素对象
如果获取的选择器不存在,返回null
2.获取多个的元素对象
对象.querySelectorAll(选择器);
注意,如果存在,返回一个伪数组,不存在,返回一个空的伪数组;
如:document.querySelector(".box'),注意小点不能省;
通过节点关系获取元素(属性不用加(),上面几种是方法,要加())
注意:标签，内容，空格都是一个节点
1.通过子节点获取父节点
node.parentNode
node为子节点
2.通过父节点获取子节点
node.childNodes;
子节点含元素节点 文本 标签 空格等
node.childElementNodes;
子元素
node.firstChild
得到的是第一个子节点可以是元素、文本、属性
node.firstElementChild
得到的是第一个元素子节点
node.lastChild
得到的是最后一个子节点可以是元素、文本、属性
node.lastElementChild
得到的是最后一个元素子节点
node.children;(推荐使用, 没有兼容问题, 以上有兼容问题)
只会获取到类型为元素节点的子节点;伪数组
3.通过兄弟节点获取元素
node.previousSibling上一个兄弟节点
node.previousElementSibling上一个兄弟元素
node.nextElementSibling下一个兄弟元素
node.nextSibling下一个兄弟节点
改变 HTML 内容
改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
document.write 是重写整个 document, 写入内容是字符串的 html
innerHTML 是 HTMLElement 的属性,是一个元素的内部 html 内容
改变 HTML 内容
innerHTML 属性
.innerHTML//获取到的是文本+标签
用来设置内容的时候，会把标签里面原来的内容给覆盖。
如果有标签，会被解析成标签
删 = "" / 增 +=
innerText
.innerText;//获取标签的内容，只会获取文本，如果有标签，直接扔掉。
在设置的时候，如果是文本，那么就被直接放到元素内部，如果是标签，会进行转义，转义成浏览器所认识的html的转义字符，从而在页面中看起来是大于号、小于号之类的东西
火狐45以下版本不支持;
textContent
element.textContent也是可以获取和设置元素的文本，不会被解析成标签
IE9以下版本不支持;
innerText与textContent 兼容处理封装
方法:判断浏览器是否支持这个属性,而不是判断浏览器的版本;
兼容处理封装步骤
1.确定封装的函数名称
2.确定哪些是可以变化的量 对于可变的量，我们在封装成函数的时候，用传参的形式，把这个可变的量用参数传到我们的函数中
3.确定函数是否有返回值
获取/改变表单元素的内容 用.value属性
改变 HTML 属性
document.getElementById(id).attribute=new value
自定义属性
有时候，HTML标签提供的标准属性不够用了，我们还可以添加自定义属性,
增
setAttribute("属性名","属性值")
删
removeAttribute("属性名")
改
setAttribute("属性名","属性值")
查
getAttribute("属性名")
改变 CSS 样式
className
使某个元素的className属性等于我们之前在css里面准备好的class
注意点
1.和css要配合起来使用
2,如果要重置，.className= ""
3.如果是多类名 用.className += " newclassname" 注意类名前加空格
缺陷：
控制className非常麻烦
需要结合css一起使用
优点：
可以一次修改多个属性
style
直接通过对象.style.属性的方式来控制每个元素的样式
注意点：
1 属性的书写:有两种
a) 如果属性只要一个单词，这个单词可以直接写出来并且是小写的
比如：color、border
b）如果属性有多个单词，要把写在css里的横杠去掉，然后根据驼峰命名的方式来写对应的属性
在css当中，backgrond-color，在js的style当中，变成：backgroundColor
2 如果要重置，就让某个属性赋值为空的字符串就可以了
3 实际作用在标签的style属性里（行内式），也只能获取到行内样式，也就是说不管是设置还是获取，都是操作行内样式
缺陷：
如果要修改的样式比较多，要一个一个写，比较麻烦
如果修改过来，因为修改的是行内样式，下次再修改，只能使用行内样式修改
获取元素的属性的值
1.getComputedStyle
作用：获取元素的所有计算过后的样式对象
用法：window.getComputedStyle(element,pseudoElt)
element; 目标元素
pseudoElt; 伪元素
注意点：如果没有获取伪元素，第二个参数要写null为了兼容
在ie8底下是不支持
2.currentStyle
作用：获取元素的所有计算过后的样式对象
用法：element.currentStyle
得到的是ie8下面的一个包含了计算过后的样式的对象
ie8支持
注意:返回值为字符串:数值需要用 parseInt /parseFloat 转换
兼容处理封装
在做动画时会常用到,用于获取元素的初始值
动态创建元素的几种方式
document.wirte()方法
document.write("<ul><li>西施</li><li>貂蝉</li><li>琳琳</li></ul>");
注意：在文档加载完成之后，使用document.write()会把整个页面的内容给刷掉。不推荐使用
innerHTML属性法
$("box").innerHTML ="<ul><li>西施</li><li>貂蝉</li><li>琳琳</li></ul>";
动态创建元素的常用方法
document.createElement(“tagName”)
作用：在内存中创建了一个对象，注意：页面中并没有效果,要搭配appendChild()使用
prentNode.appendChild(node)
作用：将指定元素追加到调用者的子元素中的最后面。
prentNode.removeChild(node)
作用：移除子节点
注意,前面须要有父节点,才可以移除
node.cloneNode(deep)
作用：复制节点
deep(是否深度克隆)
true:深度克隆
会复制标签和内容,含后代节点的克隆
false;默认是浅复制，只会复制标签，不会复制内容
细节：
cloneNode只会在内存里面复制，并没有添加到DOM树上
为了兼容，不要把deep省略
为了防止id重复，克隆之后要把id改变
prentNode.insertBefore(newChild,oldChild)
作用：插入节点
parentNode : 你希望把newChild插入的父节点
newChild ： 要插入的元素
oldChild ：被插入占据位置的原来的元素
parentNode.replaceChild(newChild,oldChild)
作用：替换节点
parentNode: newChild的新（旧）父元素
newChild:用来替换oldChild的元素
oldChild:被替换的元素
动态创建元素的效率问题
1 不要大量使用innerHTML创建元素，效率会很低，解决办法：先使用数组进行拼串，最后使用innerHTML渲染一次就行。
2 正确的使用innerHTML方式与appendChild方式创建元素效率都很快。
3 使用innerHTML清空元素如果有事件的时候会出现内存泄漏的问题，这个时候应该使用removeChild方法。
什么时候用innerHTML?什么时候使用appendChild？
1.如果不需要针对每一个新增加的元素做操作，那么使用innerHTML会更加的方便（选水果）
2.如果需要对新增的元素设置属性或者样式，那么使用appendChild更加的方便（许愿墙）
3.一般情况下，两种方式都没毛病，灵活运用即可。
DOM 事件
事件是发生在 HTML 元素上的事情。
事件是可以被 JavaScript 侦测到的行为。
HTML 事件可以是浏览器行为，也可以是用户行为。
事件通常与函数配合使用，当事件发生时函数才会执行。
常见的HTML事件
onclick 鼠标单击
ondblclick 鼠标双击
onfocus 获得焦点，表示文本框等获得鼠标光标
onblur 失去焦点，表示文本框等失去鼠标光标
onkeydown 按下键盘上的一个按键时触发
onkeyup 松开键盘上的一个按键时触发
onmousedown 按下鼠标键时触发
onmouseup 松开鼠标时触发
onchange 文本内容或下拉菜单中的选项发生改变
常结合对输入字段的验证来使用。
onmouseover 鼠标悬停
onmouseout 鼠标移出
onload 文档加载完成
可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onunload 关闭网页时触发
onload 和 onunload 事件可用于处理 cookie。
onsubmit 表单提交事件
事件三要素
事件源 - 谁 - DOM对象
事件类型(名称) - 发生了什么 - 触发了什么事件
事件处理程序 - 如何应对 - 要执行什么代码(函数)
注册事件的位置
行内式
内嵌式
外联式
注册事件的三种方式
1.on的方式
语法：
事件源.on+事件名称 = 事件处理程序
例如：btn.onclick = function(){}
细节：
只能注册一个事件处理函数
多次注册会覆盖;
兼容：
所有主流浏览器都兼容
其基本原理为：当浏览器中触发了某个事件的时候，会找到事件源的和该事件类型相对应的属性--- on+事件类型 中存储的函数，并调用该函数。
2.addEventListener
语法：
事件源.addEventListener(事件名称,事件处理程序，在哪个阶段执行)
例如：btn.addEventListener(“click”,function (){},false)
第三个参数的两个值：
默认: false:当触发后代元素的某一个事件的时候，父辈元素同类型的事件也会别触发
从内到外
事件的冒泡
true: 当触发后代元素的某一个事件的时候，父辈元素同类型的事件也会别触发
从外到内
事件的捕获阶段
细节：
事件名称不能带有on
可以为事件绑定多个处理程序
在事件处理函数中，this是对应的事件源
兼容：
ie8不支持
3.attachEvent
语法：
事件源.attachEvent(on+事件名称，事件处理程序)
例如：
btn.attachEvent(“onclick”,function(){})
细节：
也可以注册多个事件
注册的事件要带上on
在事件处理函数中，this是window
兼容
ie6到ie10支持，其余都不支持
注册事件的兼容写法
原理：
判断当前浏览器支持谁，支持哪个就用哪个来注册(类似innerText 与 textContent兼容问题)
兼容函数封装
封装函数的几步：
1.确定函数的名称
2.确定哪些是可以变化的量 可以变化的量做为参数参入函数
3.确定函数是否有返回值
事件三个阶段
事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。
要知道事件的阶段，需要通过一个属性：
event.eventPhase
当eventPhase的值为1的时候，是事件捕获阶段，为2的时候是事件的目标阶段，为3的时候是冒泡阶段
事件在出现的时候
只会包含两个阶段：
a) 捕获和目标
b) 冒泡和目标
冒泡和捕获不会同时出现
分支主题
分支主题
阻止事件冒泡
event.stopPropagation()
Ie9以下不兼容
window
好处:可以防止不必要的程序执行,可以实现事件委托
vue框架
window.event.cancelBubble
默认 false
true
阻止处理
事件对象
event
window.event
IE9以下
如:onclick的事件对象是mouseEvent;
兼容函数封装
e=e || window.event;
在事件处理程序中获取事件类型
得知事件的类型也是通过事件的一个属性获得
event.type
得到的是不带on的事件名称
如:click, keyup 等;
利用这个属性，我们可以实现给一个元素注册多个事件，却调用同一个函数
在事件处理程序中获取事件元素(事件源)
this
ie10以下不支持
event.target 谷歌的获取事件目标的方式
IE8以下的浏览器不支持
event.srcElement ie的获取事件目标的方式
ie6-IE10 只能用这种方法
如:btn.onclick =function(){} ,中的btn就是事件源;
兼容处理
target = e.target ||e.srcElement;
阻止元素的默认行为
return false;
如;不让 a 链接调转到新页面
阻止元素默认行为：preventDefault()
ie的写法：
window.event.cancelBubble = true;
谷歌和火狐的写法：
event.stopPropagation()
事件委托
委托的实现原理
移除事件绑定(解绑)的处理程序
1.on的方式
方法：事件源.on+事件名 = null;
鼠标拖动案例有使用到
2.removeEventListener
语法：
target.removeEventListener(type, listener, [useCapture]
例子：
btn.removeEventListener(“click”,clickHandel,false)
细节：
如果你在不同的阶段分别绑定了两个函数，要分开移除
移除的是使用addEventListener绑定的处理程序
兼容：
ie8不支持
3.detachEvent
语法：
target.detachEvent(eventNameWithOn, callback)
例子：
btn.detachEvent(“onclick”,clickHandle)
细节：
移除的是使用attachEvent绑定的处理程序
兼容：
ie6-ie10支持，其余不支持
4.移除事件的兼容写法
注意:用什么样方式注册的事件,就必须用什么方式解绑.
BOM
window
分支主题
顶级对象
BOM中的顶级对象就是：window
document是window的一部分
变量命名不要和window属性冲突
top
name
DOM中的顶级对象是：document
对于js中的全局变量/函数，其实就是window对象的一个属性和方法
open方法
使用window对象的open方法可以在浏览器里打开一个新的窗口，返回新窗口的window对象
用法：
window.open( url, name, specs, replace);
close方法
window对象的close方法可以关闭某个窗口
用法：
window.close()
页面加载
window.onload
Location对象
网络地址的组成
网络协议
http
https
ip地址
192.168.10.22
DNS域名解析器
host主机
端口号
每个程序都有
port
Location对象中包含浏览器url的信息
Location的属性
href 获取完整的url
reload方法
Location对象的reload方法用于重新加载当前页面，相当于刷新。方法接收一个参数
参数：forceget
true - 表示强制重新去服务器请求数据
false - 表示从本地或缓存中获取数据
用法：
window.location.reload(forceget);
History对象
history.back
回到上一个浏览的页面(如果存在)
用法：
history.back();
history.forward
前进到下一个浏览器的页面(如果存在)
用法：
history.forward();
history.go
可以到达指定的访问过的页面
该方法接收一个参数，指定到达的位置，当前页面为0，前进为正，后退为负
Navigator对象
Navigator对象包含当前窗口的浏览器信息
定时器（计时器）
1.setTimeout
作用：
让浏览器延迟一段时间之后去执行一次函数
注意只执行1次
setTimeout(callback,delay)
callback : 你希望延迟执行的代码(函数)
delay: 延迟执行的时间，以毫秒为单位
返回值： 计时器句柄
clearTimeout（id）
作用：清除setTimeout设置的延迟执行的动作
id : 通过setTimeout得到的计时器句柄
2 setInterval
作用：让浏览器隔一段时间就去执行一个函数一次
setInterval(callback,delay)
callback: 你希望每次计时器到期都去执行的函数
delay： 计时器的执行间隔
返回值：这个计时器的数字id(句柄)
clearInterval(数字id)
用于停止某个计时器
id : 使用setInterval创建的计时器的数字id
动画相关
offset系列
offsetParent
一个只读属性,返回包含该元素的最近定位的元素,如没有定位元素,返回body;
如果元素display : none ;
offsetparent :null
如果元素是固定定位 position:fixed
offsetparent :null
offsetLeft /offsetTop
注意:元素必须是 相对定位或绝对定位;没有offsetRight;没有offsetBottom
offsetLeft
一个只读属性,返返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。
offsetLeft = left + marginLeft
offsetTop
一个只读属性,返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。
offsetTop = top +marginTop
offsetwidth
返回元素的布局宽度
offsetWidth实际获取的是盒模型(width+border + padding)
offsetheight
返回元素的布局高度
获取元素的属性的值
1.getComputedStyle
作用：获取元素的所有计算过后的样式对象
用法：window.getComputedStyle(element,pseudoElt)
element; 目标元素
pseudoElt; 伪元素
注意点：如果没有获取伪元素，第二个参数要写null为了兼容
在ie8底下是不支持
2.currentStyle
作用：获取元素的所有计算过后的样式对象
用法：element.currentStyle
得到的是ie8下面的一个包含了计算过后的样式的对象
ie8支持
注意:返回值为字符串:数值需要用 parseInt /parseFloat 转换
兼容性封装
滚动事件
onscroll
scrollTop
内容滚动出去的距离(垂直方向)
scrollLeft
内容滚动出去的距离(水平方向)
scrollWidth
content的宽度或者是content宽度+ 左右的padding
scrollHeight
content的高度或者是content高度+ 上下的padding
scrollTo(xpos,ypos)
把内容滚动到指定的坐标。
回到顶部案例使用
两个坐标值
clientX / Y
clientX,clientY:表示可视区域的坐标，原点是默认的浏览器左上角
可视区域：就是整个浏览器的大小
MouseEvent.clinetX属性指的是鼠标事件的响应位置的x坐标
*只读*
pageX / Y
pageX,pageY:表示内容到点击事件事件对象的坐标位置 原点：body
ie9 下不支持
兼容处理
示意图
分支主题
分支主题
clientLeft / clientTop
边框,包含滚动条(基本没用)
clientWidth/clientHeight
clientWidth = 左右paddig + 内容的宽度（width）不能把滚动条的宽度计算进来
元素的clientWdith和clienHeiht组成一个元素的可视区域
同时改变多个参数的函数封装
滚动事件函数的封装
重点掌握这种封装为对象的思路
0 条评论
下一页
