一、 DOM
文档对象模型,简称DOM,通过DOM接口可以改变网页的内容、结构和样式
1、获取元素
(1)文档:一个页面为一个文档,DOM中使用document表示
元素:页面中所有标签都是元素,DOM中使用document表示
节点:网页中所有内容都是节点,DOM中使用node表示
(2)获取页面元素
a.根据ID获取:使用getElementById()方法获取元素,返回的是一个元素对象
b.根据标签名获取:
- 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合,返回的是获取过来的元素对象的集合,以伪数组的形式存储
- 还可获取某个元素(父元素)内部所有指定标签名的子元素:
element.getElementsByTagName(‘标签名’);
父元素必须是单个对象(必须指明是哪一个元素对象),获取的时候不包括父元素自己
c.通过HTML5新增的方法获取:
document.getElementsByClassName(‘类名’);
document.querySelector(‘选择器’); 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’); 返回所有元素对象集合
d.获取body和html元素
body:document.body
html:document.documentElement
2、事件基础
事件是可以被js侦测到的行为(触发–响应机制)
(1)组成:事件由事件源、事件类型、事件处理程序构成
- 事件源:事件被触发的对象
- 事件类型:如何触发,如鼠标点击(onclick)鼠标经过 键盘按下
- 事件处理程序:如通过一个函数赋值的方式完成
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn'); 事件源
btn.onclick = function(){
alert('内容');
}
(2)执行事件的步骤
获取事件源,注册事件(绑定事件),添加事件处理程序(采取函数赋值形式)
常见的鼠标事件
3、操作元素
可以改变网页内容、结构和样式,可以利用DOM操作元素来改变元素里面的内容、属性等。
(1)改变元素内容
- element.innerText = 内容 改变从起始位置到终止位置的内容,但他不识别html标签,同时空格和换行也会去掉
- element.innerHTML = 内容 改变从起始位置到终止位置的全部内容,识别html标签,同时保留空格和换行
(2)其他元素属性
如src、href、id、alt、title
(3)修改表单属性
如type、value、checked、selected、disabled
使用:
input.value = '内容' 改变表单中文字
btn.disabled = true 禁用某个表单
(4)修改样式属性
修改元素的大小、颜色、位置等样式
element.style 行内样式操作
element.className 类名样式操作
如
div.style.backgroundColor = 'purple'
div.className = '类名'
获取自定义属性:
- element.属性 只能获得标签自带属性
- element.getAttribute(‘属性’) 可以获取程序员自己添加的属性,即自定义属性
设置自定义属性 - element.setAttribute('属性’,‘值’)
H5自定义属性
用data-来命名自定义属性,还新增element.dataset.index或element.dataset[‘index’]来获取自定义属性
4、节点操作
- 利用父子兄节点关系获取元素
- 逻辑性强,但是兼容性稍差
- 一般的,节点至少有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个节点属性,元素节点nodeType为1,属性节点为2,文本节点(包含文字、空格、换行等)为
1、节点层级
父子节点
(1)父级节点
element.parentNode 得到的是离元素最近的父级节点
(2)子节点
parentNode.childNodes
得到所有子节点,包含元素节点、文本节点等
若只想获得元素节点,则需用循环遍历来找出nodeType为1的子节点,一般不使用
通常使用:
parentNode.children
返回子元素节点
返回第一个和最后一个:
parentNode.firstChild 返回第一个子节点(文本、元素)
parentNode.LastChild 返回最后一个子节点
parentNode.firstElementChild 返回第一个子元素节点
parentNode.lastElementChild 返回最后一个子元素节点
通常使用:
parentNode.children[0]
parentNode.children[ol.children.length - 1]
兄弟节点
node.nextSibling 返回当前节点的下一个兄弟节点,包含所有节点
node.previousSibling 上一个兄弟节点
返回兄弟元素节点
node.nextElementSibling 返回下一个兄弟元素节点
node.previousElementSibling 上一个
2、创建并添加节点
动态创建元素节点:
document.createElement('tagName')
添加节点:
node.appendChild(child)
将一个节点添加到指定父节点的子节点列表末尾
node.insertBefore(child,指定元素)
将一个节点添加到父节点的指定子节点前面
3、删除节点
node.removeChild(child)
4、复制节点
node.cloneNode()
如果括号参数为空或false,则只复制标签,不复制内容
如果括号为true,则都复制
高级事件
1、注册事件
给元素添加事件,称为注册事件或绑定事件,注册事件的两种方法为:传统方法和方法监听注册方式
(1)传统注册方式:注册事件的唯一性,同一个元素只能设置一个处理函数
(2)方法监听注册方式:
addEventListener()
同一个元素同一个事件可以注册多个监听器
使用:
eventTarget.addEventListener(type,listener[,useCapture])
- type:事件类型字符串,如click、mouseover,不带on
- listener:事件处理函数,事件发生时,会调用该监听函数
- useCapture:可选参数,布尔值,默认为false
2、删除事件
(1)传统方式:
eventTarget.onclick = null
(2)方法监听注册方式:
eventTarget.removeEventListener(type,listener[,useCapture])
3、DOM事件流
事件流描述的是从页面中接受事件的顺序,事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
DOM事件流主要分为3个阶段:捕获阶段、当前目标阶段、冒泡阶段
4、事件对象
事件对象写到侦听函数的小括号里,当形参来看;它只有有了事件才会存在,系统自动创建,不需要传递参数;它是事件的一系列相关数据的集合,跟事件相关的,它有许多属性和方法
由于存在兼容性问题,所以可写为
e = e || window.event
常见属性和方法:
target和this的区别:e.target返回的是触发事件的对象(元素),this返回的是绑定事件的对象(元素)
阻止冒泡的两种方法:
- 标准写法:利用事件对象里面的stopPropagation()方法
- 非标准(无兼容性问题):cancelBubble属性,当它等于true是,阻止冒泡
4、事件委托(代理、委派)
原理:不给每个子节点单独设置事件监听器,而是给其父节点设置事件监听器,然后利用冒泡原理影响每个子节点
5、常用鼠标事件对象
6、常用键盘事件
键盘事件对象中的keyCode属性可以得到相应键的ASCLL码值
keyup和keydown不区分字母大小写
keypress区分大小写
二、BOM
BOM即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,核心对象是window
window对象是浏览器的顶级对象,它是JS访问浏览器窗口的一个接口,它还是一个全局变量,定义在全局作用域中的变量、函数都会变成window对象的属性和方法
1、窗口加载事件
window.onload = function(){} 只能写一次 或
window.addEventListener("load",function(){}) 可写多次
当文档内容加载完后再触发这个事件,调用函数
document.addEventListener('DOMContentLoaded',function(){})
当标签加载完毕后,就可触发事件
2、调整窗口大小事件
window.onresize = function(){}
window.addEventListener("resize",function(){})
只要窗口大小发生像素变化,就会触发这个事件
通过window.innerWidth来获取窗口大小
3、定时器
- 设置定时器
window.setTimeout(调用函数,[延迟的毫秒数]);
该定时器在定时器到期后执行调用函数(window可以省略)
调用函数可以直接写函数,也可以写函数名
window.setInterval(回调函数,[间隔的毫秒数]);
该定时器重复调用一个函数,每隔这个时间,就去调用一次回调函数
- 停止定时器
window.clearTimeout(timeoutID)
window可以省略,需要给定时器取名字才可以停止
window.clearInterval(intervalID);
4、this
一般情况下this最终指向那个调用它的对象
5、JS执行队列
(1)同步
执行完一个任务后再执行另一个任务
**同步任务:**同步任务都在主线程上执行,形成一个执行栈
(2)异步
在执行一个任务的同时执行其他任务
**异步任务:**通过回调函数实现,添加到任务队列中
- 普通事件,如click、resize等
- 资源加载,如load、error等
- 定时器,包括setInterval、setTimeout等
执行机制 - 先执行执行栈中的同步任务
- 异步任务(回调函数)放入任务队列中
- 同步任务执行完毕后,系统按照次序读取任务队列中的异步任务,被读取的异步任务结束等待状态,进入执行栈,开始执行
- 事件循环:
6、location对象
该属性用于获取或设置窗口的URL,并且可以用于解析URL,该属性返回的是一个对象
(1)URL
URL即统一资源定位符,是互联网上标准资源的地址
语法格式:
(2)location属性
重点为href和search
(3)location方法 - location.assign() 可以跳转页面,也可以返回原页面
- location.replace() 替换当前页面,不能后退页面
- location.replace() 重新加载页面
7、navigator对象
它包含有关浏览器的信息,有很多属性,最常用的是userAgent,该属性可以返回由客户机发送服务器的user-agent头部的值
使用方法:
8、history对象
它与浏览器历史记录进行交互,该对象包含用户(在浏览器窗口中)访问过的URL
相关方法:
- back() 可以后退功能
- forward() 前进功能
- go(参数) 前进后退功能,如果参数为1,则前进一个页面,如果是-1,则后退一个页面