DOM操作
1.API和Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。
主要针对浏览器做交互效果。
很多都是方法(函数)。
2.API
应用程序编程接口。
是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
3.DOM
文档对象模型。
可扩展标记语言的标准编程接口。
通过这些接口改变页面内容、结构和样式。
文档:一个页面就是一个文档,DOM中使用document表示。
元素:页面中的所有标签都是元素,DOM中使用element表示。
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中用node表示。
DOM把这三类内容都看作对象。
4.获取元素
1)根据ID获取:getElementById('xx')返回的是一个元素对象
*console.dir()打印返回的元素对象,可以查看属性和方法
2)根据标签名获取:getElementsByTagName()返回的是元素对象合集,以伪数组形式存储
*获取某个元素内部所有指定标签名的子元素
element.getElementsByTagName('标签名')
3)H5新增的获取方法(ie9以上)
1 getElementByClassName('类名'),以伪数组形式存储
2 querySelector('选择器'),返回指定选择器的第一个元素对象,如('.box')、('li')
3 querySelectorAll('选择器'),返回指定选择器的所有元素对象集合
4)获取特殊元素body、html等
1 document.body,返回body元素对象
2 document.documentElement,返回html元素对象
5.事件基础
事件是可以被js侦测到的行为:触发--响应机制
事件组成:事件源、事件类型、事件处理程序--事件三要素
1)事件源:事件被触发的对象,如按钮
2)事件类型:如何触发、什么事件,如鼠标点击、经过
3)事件处理程序:通过一个函数赋值的方式来完成,如btn.onclick = function(){}
执行事件的步骤
1)获取事件源:var div = document.querySelector('div')
2)注册事件(绑定事件):div.onclick
3)添加事件处理程序(采取函数赋值形式):div.onclick = function(){}
6.操作元素--引号''
1)修改获取元素内容
1 element.innerText:从起始位置到终止位置的内容,但去除html标签,同时空格和换行也去掉
2 element.innerHTML:起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
*两者都是可读写的
2)修改获取元素属性 src、href等等
1 获取元素
2 注册事件
3 处理程序
*如img.src = 'xx'
3)修改获取表单元素属性 type、value、checked、disabled、selected等等
1 获取元素
2 注册事件
3 处理程序
*如btn.disabled = true/input.value = 'xx'
4)修改获取样式属性
1 element.style:行内样式操作,样式少、功能简单使用
2 element.className:类名样式操作,修改类名,改成另一个类的样式
*JS里面的样式采取驼峰命名法,如fontSize、backgroundColor
*JS修改style样式操作,产生的是行内样式,CSS权重比较高
*className会直接更改元素的类名,会覆盖原先的类名,如果想保留原先类名,这样写'first change',加个空格
5)获取设置自定义属性
获取
1 element.属性
2 element.getAttribute('属性')
区别:
*element.属性 获取内置属性值(元素本身自带的属性)
*element.getAttribute('属性') 主要获取自定义属性(标准)
设置
1 element.属性 = '值'
2 element.setAttribute('属性','值')
区别同上
移除
removeAttribute('属性')
*自定义属性的意义:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。
*H5规定自定义属性应以“data-”开头,避免歧义
*dataset是一个集合,里面存放了所有以data-开头的自定义属性,如div.dataset、div.dataset.index、div.dataset['驼峰命名法'],少用,一般用getAttribute
7.排他思想
如果有同一组元素,要某一个元素实现某种样式,需要用到循环的排他思想算法:
1)所有元素全部清除样式
2)给当前元素设置样式
3)顺序不能颠倒
应用:如tab页的切换
8.节点操作
1)简介
利用父子兄节点关系获取元素
逻辑性强,但是兼容性稍差
节点至少拥有nodeType、nodeName和nodeValue这三个基本属性
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3
2)节点层级
1 父级节点:node.parentNode,找不到返回null
2 子级节点:parentNode.childNodes,找到所有的子节点,包括元素节点、文本节点等,只需要获得元素节点需结合nodeType,比较麻烦不推荐使用
*推荐实际开发中使用的parentNode.children
3 第一个/最后一个子节点:firstChild/lastChild,获取的是所有类型的子节点
4 fistElementChild/lastElementChild,返回元素节点,有兼容性问题,ie9上才支持
*推荐children[0~n]
5 兄弟节点:
nextSibling,获取下一个兄弟节点,包括文本节点、元素节点
previousSibling
nextElementSibling/previousElementSibling--有兼容性问题
3)创建添加节点
创建:document.createElement('xx')
添加:node.appendChild(child),在后面追加元素节点
添加2:node.insertBefore(child,指定元素),在指定位置前添加
4)删除节点
node.removeChild(child)
*阻止连接跳转:href="javascript:;"
5)复制节点
node.cloneNode(),克隆之后要添加才显示
*如果括号为空或false,为浅拷贝,只复制标签不复制内容
*如果为true则深拷贝,内容也一起拷贝
9.动态创建元素的三种方式
1)document.write('html语句')
*如果页面文档流加载完毕,再调用这句话会导致页面全部重绘
2)element.innerHTML--时间较长,因为要拼接字符串
*将内容写入某个DOM节点,不会导致页面全部重绘
*不要拼接字符串,采取数组形式拼接,创建效率更高,结构稍微复杂
3)document.createElement()--时间较短
*创建多个元素效率稍低一点,但是结构更清晰
10.事件高级1
概念:
传统注册事件方式:注册事件的唯一性,后注册的事件覆盖先前注册的事件(on开头)
方法监听注册方式:IE9之前不支持此方法,同一个元素同一个时间可以注册多个监听器,按注册顺序依次执行(addEventListener())
1)方式介绍:
eventTarget.addEventListener(type, listener[, useCapture可选])
type:事件类型字符串,比如click、mouseover,注意这里不要带on
listener:事件处理函数,事件发生时,会调用该监听函数
useCapture:可选参数,是一个布尔值,默认是false
事件侦听注册事件方式:
btn.addEventListener('click', function() {
//函数操作
})
2)注册/绑定事件(ie9以前才支持)
eventTarget.attachEvent(eventNameWithOn, callback)
方法将指定的监听器注册到eventTarget上,当该对象触发指定的事件时,指定的回调函数就会被执行
eventNameWithOn:事件类型字符串,比如onclick、onmouseover,这里要用on
callback:事件处理函数,当目标触发事件时回调函数被调用
使用方式:
同上,但要有on
11.事件高级2
1)删除/解绑事件
1 传统方式
div.onclick = function() {//事件只执行一次就删除
xx
div.onclick = null
}
2 方法监听注册方式
方法一
eventTarget.removeEventListener(type, listener[, useCapture])
btn.addEventListener('click', fn)
function fn() {//事件只执行一次就删除
//函数操作
btn.removeEventListener('click', fn)
}
方法二
eventTarget.detachEvent(eventNameWithOn, callback)
同上,ie9之前才支持,要加on
12.DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
分为三个阶段:
1)捕获阶段 大->小
2)当前目标阶段
3)冒泡阶段 小->大
注意:
1)JS代码中只能执行捕获或者冒泡其中一个阶段
2)onclick和attachEvent只能得到冒泡阶段
3)捕获阶段:如果addEventListener第三个参数是true,那么执行捕获阶段 document->html->body->father->son
4)冒泡阶段(默认):如果addEventListener第三个参数是false,那么执行冒泡阶段 son->father->body->html->document
5)onblur、onfocus、onmouseenter、onmouseleave没有冒泡
13.事件对象
1)简介:
event就是一个事件对象,事件对象只有有了事件才会存在,由系统自动创建。
事件对象是事件的一系列相关数据的集合,如鼠标点击包含鼠标坐标等。
事件对象可以自己命名,如event,evt,e。
事件对象有兼容性,ie678写法:window.event
兼容性写法:e = e || window.event
2)常见属性和方法:
e.target:返回触发事件的对象,标准
e.srcElement:返回触发事件的对象,非标准,ie678使用
e.type:返回事件类型,比如click、mouseover
e.cancelBubble:true阻止冒泡,非标准,ie678使用
e.returnValue:阻止默认事件(默认行为),非标准,ie678使用
e.preventDefault():阻止默认事件(默认行为),标准
e.stopPropagation():阻止冒泡,标准
14.事件委托(代理/委派)
原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
作用:只操作一次DOM,提高程序的性能。
15.常用鼠标事件
onclick、onmouseover、onmouseout、onfocus、onblur、onmousemove、onmouseup、onmousedown
1)禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault()
})
2)禁止鼠标选中
document.addEventListener('selectstart', function(e) {
e.preventDefault()
})
3)鼠标事件对象
e.clientX/Y:返回鼠标相对于浏览器窗口可视区的X/Y坐标
e.pageX/Y:返回鼠标相对于文档页面的X/Y坐标 IE9+支持
e.screenX/Y:返回鼠标相对于电脑屏幕的X/Y坐标
16.常用键盘事件
1)常见事件
onkeyup:某个键盘按键被松开时触发
onkeydown:某个键盘按键被按下时触发
onkeypress:某个键盘按键被按下时触发,但功能键如ctrl、shift、箭头等不能识别
2)键盘事件对象
keyCode:keyup/keydown不区分大小写,keypress区分大小写
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。
主要针对浏览器做交互效果。
很多都是方法(函数)。
2.API
应用程序编程接口。
是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
3.DOM
文档对象模型。
可扩展标记语言的标准编程接口。
通过这些接口改变页面内容、结构和样式。
文档:一个页面就是一个文档,DOM中使用document表示。
元素:页面中的所有标签都是元素,DOM中使用element表示。
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中用node表示。
DOM把这三类内容都看作对象。
4.获取元素
1)根据ID获取:getElementById('xx')返回的是一个元素对象
*console.dir()打印返回的元素对象,可以查看属性和方法
2)根据标签名获取:getElementsByTagName()返回的是元素对象合集,以伪数组形式存储
*获取某个元素内部所有指定标签名的子元素
element.getElementsByTagName('标签名')
3)H5新增的获取方法(ie9以上)
1 getElementByClassName('类名'),以伪数组形式存储
2 querySelector('选择器'),返回指定选择器的第一个元素对象,如('.box')、('li')
3 querySelectorAll('选择器'),返回指定选择器的所有元素对象集合
4)获取特殊元素body、html等
1 document.body,返回body元素对象
2 document.documentElement,返回html元素对象
5.事件基础
事件是可以被js侦测到的行为:触发--响应机制
事件组成:事件源、事件类型、事件处理程序--事件三要素
1)事件源:事件被触发的对象,如按钮
2)事件类型:如何触发、什么事件,如鼠标点击、经过
3)事件处理程序:通过一个函数赋值的方式来完成,如btn.onclick = function(){}
执行事件的步骤
1)获取事件源:var div = document.querySelector('div')
2)注册事件(绑定事件):div.onclick
3)添加事件处理程序(采取函数赋值形式):div.onclick = function(){}
6.操作元素--引号''
1)修改获取元素内容
1 element.innerText:从起始位置到终止位置的内容,但去除html标签,同时空格和换行也去掉
2 element.innerHTML:起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
*两者都是可读写的
2)修改获取元素属性 src、href等等
1 获取元素
2 注册事件
3 处理程序
*如img.src = 'xx'
3)修改获取表单元素属性 type、value、checked、disabled、selected等等
1 获取元素
2 注册事件
3 处理程序
*如btn.disabled = true/input.value = 'xx'
4)修改获取样式属性
1 element.style:行内样式操作,样式少、功能简单使用
2 element.className:类名样式操作,修改类名,改成另一个类的样式
*JS里面的样式采取驼峰命名法,如fontSize、backgroundColor
*JS修改style样式操作,产生的是行内样式,CSS权重比较高
*className会直接更改元素的类名,会覆盖原先的类名,如果想保留原先类名,这样写'first change',加个空格
5)获取设置自定义属性
获取
1 element.属性
2 element.getAttribute('属性')
区别:
*element.属性 获取内置属性值(元素本身自带的属性)
*element.getAttribute('属性') 主要获取自定义属性(标准)
设置
1 element.属性 = '值'
2 element.setAttribute('属性','值')
区别同上
移除
removeAttribute('属性')
*自定义属性的意义:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。
*H5规定自定义属性应以“data-”开头,避免歧义
*dataset是一个集合,里面存放了所有以data-开头的自定义属性,如div.dataset、div.dataset.index、div.dataset['驼峰命名法'],少用,一般用getAttribute
7.排他思想
如果有同一组元素,要某一个元素实现某种样式,需要用到循环的排他思想算法:
1)所有元素全部清除样式
2)给当前元素设置样式
3)顺序不能颠倒
应用:如tab页的切换
8.节点操作
1)简介
利用父子兄节点关系获取元素
逻辑性强,但是兼容性稍差
节点至少拥有nodeType、nodeName和nodeValue这三个基本属性
元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3
2)节点层级
1 父级节点:node.parentNode,找不到返回null
2 子级节点:parentNode.childNodes,找到所有的子节点,包括元素节点、文本节点等,只需要获得元素节点需结合nodeType,比较麻烦不推荐使用
*推荐实际开发中使用的parentNode.children
3 第一个/最后一个子节点:firstChild/lastChild,获取的是所有类型的子节点
4 fistElementChild/lastElementChild,返回元素节点,有兼容性问题,ie9上才支持
*推荐children[0~n]
5 兄弟节点:
nextSibling,获取下一个兄弟节点,包括文本节点、元素节点
previousSibling
nextElementSibling/previousElementSibling--有兼容性问题
3)创建添加节点
创建:document.createElement('xx')
添加:node.appendChild(child),在后面追加元素节点
添加2:node.insertBefore(child,指定元素),在指定位置前添加
4)删除节点
node.removeChild(child)
*阻止连接跳转:href="javascript:;"
5)复制节点
node.cloneNode(),克隆之后要添加才显示
*如果括号为空或false,为浅拷贝,只复制标签不复制内容
*如果为true则深拷贝,内容也一起拷贝
9.动态创建元素的三种方式
1)document.write('html语句')
*如果页面文档流加载完毕,再调用这句话会导致页面全部重绘
2)element.innerHTML--时间较长,因为要拼接字符串
*将内容写入某个DOM节点,不会导致页面全部重绘
*不要拼接字符串,采取数组形式拼接,创建效率更高,结构稍微复杂
3)document.createElement()--时间较短
*创建多个元素效率稍低一点,但是结构更清晰
10.事件高级1
概念:
传统注册事件方式:注册事件的唯一性,后注册的事件覆盖先前注册的事件(on开头)
方法监听注册方式:IE9之前不支持此方法,同一个元素同一个时间可以注册多个监听器,按注册顺序依次执行(addEventListener())
1)方式介绍:
eventTarget.addEventListener(type, listener[, useCapture可选])
type:事件类型字符串,比如click、mouseover,注意这里不要带on
listener:事件处理函数,事件发生时,会调用该监听函数
useCapture:可选参数,是一个布尔值,默认是false
事件侦听注册事件方式:
btn.addEventListener('click', function() {
//函数操作
})
2)注册/绑定事件(ie9以前才支持)
eventTarget.attachEvent(eventNameWithOn, callback)
方法将指定的监听器注册到eventTarget上,当该对象触发指定的事件时,指定的回调函数就会被执行
eventNameWithOn:事件类型字符串,比如onclick、onmouseover,这里要用on
callback:事件处理函数,当目标触发事件时回调函数被调用
使用方式:
同上,但要有on
11.事件高级2
1)删除/解绑事件
1 传统方式
div.onclick = function() {//事件只执行一次就删除
xx
div.onclick = null
}
2 方法监听注册方式
方法一
eventTarget.removeEventListener(type, listener[, useCapture])
btn.addEventListener('click', fn)
function fn() {//事件只执行一次就删除
//函数操作
btn.removeEventListener('click', fn)
}
方法二
eventTarget.detachEvent(eventNameWithOn, callback)
同上,ie9之前才支持,要加on
12.DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
分为三个阶段:
1)捕获阶段 大->小
2)当前目标阶段
3)冒泡阶段 小->大
注意:
1)JS代码中只能执行捕获或者冒泡其中一个阶段
2)onclick和attachEvent只能得到冒泡阶段
3)捕获阶段:如果addEventListener第三个参数是true,那么执行捕获阶段 document->html->body->father->son
4)冒泡阶段(默认):如果addEventListener第三个参数是false,那么执行冒泡阶段 son->father->body->html->document
5)onblur、onfocus、onmouseenter、onmouseleave没有冒泡
13.事件对象
1)简介:
event就是一个事件对象,事件对象只有有了事件才会存在,由系统自动创建。
事件对象是事件的一系列相关数据的集合,如鼠标点击包含鼠标坐标等。
事件对象可以自己命名,如event,evt,e。
事件对象有兼容性,ie678写法:window.event
兼容性写法:e = e || window.event
2)常见属性和方法:
e.target:返回触发事件的对象,标准
e.srcElement:返回触发事件的对象,非标准,ie678使用
e.type:返回事件类型,比如click、mouseover
e.cancelBubble:true阻止冒泡,非标准,ie678使用
e.returnValue:阻止默认事件(默认行为),非标准,ie678使用
e.preventDefault():阻止默认事件(默认行为),标准
e.stopPropagation():阻止冒泡,标准
14.事件委托(代理/委派)
原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
作用:只操作一次DOM,提高程序的性能。
15.常用鼠标事件
onclick、onmouseover、onmouseout、onfocus、onblur、onmousemove、onmouseup、onmousedown
1)禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault()
})
2)禁止鼠标选中
document.addEventListener('selectstart', function(e) {
e.preventDefault()
})
3)鼠标事件对象
e.clientX/Y:返回鼠标相对于浏览器窗口可视区的X/Y坐标
e.pageX/Y:返回鼠标相对于文档页面的X/Y坐标 IE9+支持
e.screenX/Y:返回鼠标相对于电脑屏幕的X/Y坐标
16.常用键盘事件
1)常见事件
onkeyup:某个键盘按键被松开时触发
onkeydown:某个键盘按键被按下时触发
onkeypress:某个键盘按键被按下时触发,但功能键如ctrl、shift、箭头等不能识别
2)键盘事件对象
keyCode:keyup/keydown不区分大小写,keypress区分大小写
————学习笔记