DOM
获取元素
根据ID获取
语法:document.getElementById(’id‘)
返回值:元素对象 或 null
根据标签名获取元素
语法:document.getElementsByTagName(‘标签名’)
或者 element.getElementsByTagName(‘标签名’)
返回值:元素对象集合(伪数组,数组元素)
根据类名获取元素
语法:document.getElementsByClassName(‘类名’)
返回值:元素对象集合(伪数组,数组元素)
根据指定选择器获取元素
语法:document.querySelector(‘.类名或标签名’) *如果html里类名重复,只获取第一个
返回值:元素对象 或 null
根据指定选择器获取全部元素
语法:document.querySelectorAll(‘.类名或标签名’)
返回值:元素对象集合(伪数组,数组元素)
获取特殊元素
获取body
document.body
获取html
document.documentElement
通过子节点获取父节点
子名.parentNode *获取的就是父
var 属性名 = document.querySelector('子名')
属性名.parentNode // 获取的就是父标签
通过父节点获取子节点
父名.children *获取子节点
var 属性名 = document.querySelector('父名')
console.log(属性名.children); //获取的就是子标签
兄弟节点
nextSibling *下一个兄弟节点 包含元素 文字节点
nextElementSibling *下一个兄弟元素节点
previousSibling *上一个兄弟节点 包含元素 文字节点
previousElementSibling *上一个兄弟元素节点
获取第一个节点和最后一个
两种常用方式
var ol = document.querySelector('ol');
console.log(ol.children[0]); // 第一个子
console.log(ol.children[ol.children.length - 1]); // 最后一个子
var ol = document.querySelector('ol');
var lis = ol.querySelectorAll('li')
console.log(lis[0]); // 第一个子
console.log(lis[lis.length-1]); //最后一个子
传统的鼠标事件(绑定事件)
onfocus 获得焦点
onblur 失去焦点
onclick 鼠标点击后
ondblclick 鼠标双击
有文字时双击会选中文字解决方法
span.ondblclick=function(){
// 双击禁止选定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
onmousemove 鼠标移动
onmouseup 鼠标弹起
onmousedown 鼠标按下
onmouseover 鼠标经过
onmouseout 鼠标离开
- mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经 过自身盒子触发
mouseenter 鼠标进入 *不会冒泡
mouseleave 鼠标离开 *不会冒泡
禁止选中文字和禁止右键菜单
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
传统键盘事件
onkeyup 按键弹起的时候触发
onkeydown 按键按下的时候触发
onkeypress 按键按下的时候触发 *不能识别功能键 比如 ctrl shift 左右箭头
//传统键盘事件写法
document.onkeyup=function() {
alert('我弹出了')
}
滚动事件
scroll 滑轮滚动是触发
窗口事件
window.onload 窗口加载事件
DOMContentLoaded 窗口加载事件
window.onresize 调整窗口大小加载事件
window.innerWidth 当前屏幕的宽度
表单事件
onsubmit
$('from').on('submit', function (e) {
alert('监听到了表单的提交事件2')
e.preventDefault()
})
事件侦听(注册事件)
谁.addEventListener(‘鼠标(键盘)事件’, function() { }
鼠标(键盘)事件: 就是把传统鼠标(键盘)事件 前的 on 去掉
// 事件侦听鼠标事件写法
btn.addEventListener('click', function (){
alert('hi-')
})
// 事件侦听键盘事件写法
document.addEventListener('keyup', function () {
console.log('我弹出了')
})
解绑事件(删除事件)
传统注册事件的解绑方式
鼠标事件 = null;
var div = document.querySelector('div');
div.onclick = function() {
alert(11);
// 1. 传统方式删除事件
divs.onclick = null;
}
事件侦听注册事件的解绑方式
removeEventListener(‘鼠标事件去掉on’, 函数名);
*只有将函数分开写的时候才能解绑事件
divs[1].addEventListener('click', fn)
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
事件委托
*可以给未来动态创建的元素绑定事件
//click 是绑定在ol 身上的,但是 触发的对象是 ol 里面的小li
var ol = document.querySelector('ol');
ol.on('click', 'li', function () {
console.log(22);
})
// 可以给未来动态创建的元素绑定事件
var li = $("<li>我是后来创建的</li>")
$('ol').append(li)
操作元素
改变元素内容
innerHTML * 常用
innerText
改元素类名
获取的元素名字.className =‘新类名’
改元素样式
获取的元素名字.style.需要改的样式名=‘新样式’
改变图片
获取的元素名字.src=‘新图片地址’
名字.alt=‘ ’
名字.title=‘ ’
跳转页面
location.href=’ ’
增加类名
元素对象.className = ‘旧类名 新类名’; *这样旧类名不会被覆盖掉
计数
flag
当前
this
音频播放
audio.play() // 播放
audio.pause(); //暂停
//单个网页实现单击屏幕发出声音
function playSound(){
var audio=document.getElementById("audio");
if(audio.paused) { //如果音频是暂停状态
audio.load; //加载音频文件
audio.play(); //播放
}else { //否则,也就是说音频是播放状态
audio.pause(); //就暂停
}
}
//调用
window.onclick=function () {
playSound();
}
操作表单元素
可操作属性
type 表单类型
value 显示的内容
disabled 禁用
checked 默认选中
selected
input.select() // 文本框内容处于选中状态
清除字符串前后空格
.trim()
重置表单
reset()
document.querySelector('form表单名').reset()
自定义属性操作
获取属性值
getAttribute()
div.getAttribute(‘class’) *获取class的类名
更改属性的值
setAttribute()
div.setAttribute(‘id’, 2) *把div 的id名改成2
*如果没有这个属性就增加这个属性并设置值为2 不提倡,见H5自定义属性规范。
移除属性
removeAttribute()
div.removeAttribute(‘class’) *移除class类名
H5自定义属性规范
H5规定自定义属性data-开头作为属性名并赋值
// // h5新增的获取自定义属性的方法 它只能获取data-开头的
增加自定义属性
div.setAttribute(‘data-a’,1)
获取自定义属性
div.getAttribute(‘data-a’);
自定义属性集合
dataset
// // dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset.a);
排他思想
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
标签(节点)操作
创建标签 (节点)
var 元素名 = document.createElement(‘标签名’);
元素名.innerHTML = ‘’ // 在这个元素里创建一个标签
添加标签
添加到后面
appendChild()
添加到谁的名.appendChild(创建标签的元素名)
var li = document.querySelector(‘li’); //创建li标签
ul.appendChild(li); // 添加到ul里
添加到前面
insertBefore()
添加到谁的名.insertBefore(创建标签的元素名,添加到谁的名.[添加的位置索引号])
var lili = document.createElement(‘li’) //创建li标签
ul.insertBefore(lili,ul.children[0]) //添加到ul 里最前索引号为0的位置
添加标签 创建字符串的标签
创建
var li = '<li class=""><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
添加
ul.insertAdjacentHTML('beforeend', li); // 插入元素内部的最后一个子节点之后。 //添加到后面
‘beforebegin’:元素自身的前面。
‘afterbegin’:插入元素内部的第一个子节点之前。
‘beforeend’:插入元素内部的最后一个子节点之后。
‘afterend’:元素自身的后面。
删除标签
removeChild()
父名.removeChild(父.children[0]) *删除谁里面的(谁)
ul.removeChild(ul.children[0]) //删除ul里的第一个孩子
remove() 删除所有元素
ul.remove() // 删除ul和里的所有
复制标签
cloneNode() *谁.cloneNode() 复制谁 然后再添加
var lili = ul.children[0].cloneNode(true) //复制ul里的第一个
ul.appendChild(lili) //添加到ul 最后
// 1. 谁.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. 谁.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
DOM事件流
*子盒子 和 父盒子都有点击事件
三个阶段
-
捕获阶段
-
当前目标阶段
-
冒泡阶段
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
var son = document.querySelector('.son')
var father = document.querySelector('.father')
father.addEventListener('click',function(){
alert('father')
},true)
son.addEventListener('click',function(){
alert('son')
},true)
</script>
-
子盒子 和 父盒子都有点击事件
-
写true 为捕获阶段,就是点击子盒子 先执行父盒子的事件会再执行子盒子的事件
-
写false为冒泡阶段,就是点击子盒子 先执行子盒子的事件会再执行父盒子的事件
*传统绑定事件只有冒泡阶段
事件对象
var div = document.querySelector('div');
div.onclick=function(e) {
console.log(e);
} // e 就是写一个形参来接收事件对象
e.target 返回触发事件的对象 *就是谁触发的这个事件
e.target.nodeName 返回触发这个事件的标签的字母 大写
e.type 返回鼠标事件类型 ,比如鼠标经过 ,鼠标点击 *去掉on
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
<script>
var ul = document.querySelector('ul')
ul.onclick = function (e) {
console.log(e.target); //点哪个li 就返回哪个li
console.log(e.target.nodeName); // LI
console.log(e.type); // click
}
</script>
阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
e.preventDefault()
return false; 也可以实现这个效果,但是return false以下的代码就不执行了,所以用他的时候需将他写在最后
<a href="http://www.baidu.com">百度</a>
<script>
var a = document.querySelector('a')
a.onclick = function (e) {
e.preventDefault(); //阻止默认行为
}</script>
阻止冒泡
e.stopPropagation()
<div class="father">
<div class="son">son儿子</div>
</div>
<script>
var son = document.querySelector('.son')
var father = document.querySelector('.father')
son.onclick = function (e) {
alert('hi')
e.stopPropagation(); // 阻止冒泡 子盒子弹出后 父盒子就不在弹出了
}
father.onclick = function () {
alert('hi1')
e.stopPropagation(); //如果父盒子还有父并且也绑定了事件,也需要阻止
}</script>
鼠标事件对象(位置坐标)
鼠标点击时在页面的位置
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
</script>
键盘事件对象
e.key * 判断用户按下哪个键
e.keyCode 使用keyCode属性判断用户按下哪个键 ASCLL值判断
// 键盘事件 keyup 和 keydown 不区分字母大小写 按a 得到的都是65
// keypress 区分大小写 a:97 A:65
document.addEventListener('keyup', function(e) {
console.log(e.keyCode); } //返回ascll值
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
// keyup 和 keydown 不区分字母大小写 按a 得到的都是65
// keypress 区分大小写 a:97 A:65
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
console.log('press:' + e.keyCode);
})
</script>
BOM
顶级对象window
window的加载事件
页面加载事件(两种)
window.onload
是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。
window.onload = function() {
alert(22);
} //传统注册方式只能写一次 如果有多个就会一最后一个为准
window.addEventListener('load', function() {
alert(22);
}) //侦听注册事件没有限制
DOMContentLoaded
仅当DOM加载完成,不包括样式表,图片,flash等等。就可以触发
document.addEventListener('DOMContentLoaded', function() {
alert(33);
})
// load 等页面内容全部加载完毕,包含页面dom元素 图片 flash css 等等
// DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
调整窗口大小事件
window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
window.innerWidth 当前屏幕的宽度
-
只要窗口大小发生像素变化,就会触发这个事件。
-
我们经常利用这个事件完成响应式布局。
定时器(两种)
setTimeout( )
setInterval( )
setTimeout 延时时间到了,就去调用这个回调函数,只调用一次 就结束了这个定时器
setInterval 每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
var timer = *给定时器一个标识符
var timer = setTimeout(function() {
alert('时间到了')
},毫秒数) //传统写法
var timer = setTimeout(要执行的函数的名, 延迟多少毫秒后执行)
function callback() { //要执行的函数内容
console.log('爆炸了');
} //侦听写法
清除(停止)定时器
clearTimeout( );
clearInterval( )
绑定一个btn 当点击这个的时候 停止定时器
var btn = document.querySelector('button')
var timer = setTimeout(function () {
console.log('要爆炸了');
}, 3000)
btn.onclick = function () {
clearTimeout(timer)
}
location 对象属性
location.href *获取整个 URL 地址
location.search *获取参数
location.host *获取主机(域名)
location.port *获取端口号
location.pathname *获取路径
location.hash *获取片段 #后面的内容 常用于链接 锚点
元素偏移量
offset 系列
.offsetTop *返回元素相对带有定位的父盒子上方的距离
.offsetLeft *返回元素相对带有定位的父盒子左侧的距离
.offsetWidth *返回元素的宽度 *包含边框宽度和内边距
.offsetHeight *返回元素的高度 *包含边框宽度和内边距
.offsetParent *返回元素的带有定位的父亲 否则返回的是body
.parentNode *返回父亲 是最近一级的父亲 不管有没有定位
元素可视区
client 系列
.clientWidth *返回元素的宽度 *包含内边距 *但不包含边框
.clientHeight *返回元素的高度 *包含内边距 *但不包含边框
.clientTop *返回上边框的宽度
.clientLeft *返回左边框的宽度
元素滚动
scroll 系列
.scrollHeight *返回元素实际的高度 *包含内边距 *但不包含边框
scrollWidth *返回元素实际的宽度 *包含内边距 *但不包含边框
scrolltop *返回盒子被卷去的上侧距离
scrollLeft *返回盒子被卷去的左侧距离
window.pageYOffset *返回页面被卷去的上侧距离
window.pageXOffset *返回页面被卷去的左侧距离
自执行函数
(function(){ })();
(function a (){ }())
移动端(DOM)
移动端触屏事件 touch
touchstart *手指触摸到一个dom元素时触发
touchmove *手指在一个dom元素上滑动时触发
touchend *手指从一个dom元素上离开时触发
移动端触屏事件对象
e.touches *正在触摸屏幕的所有手指的列表
e.targetTouches *正在触摸当前DOM元素的手指列表
e.changedTouches *手指状态发生了改变的列表 从无到有 或者 从有到无
e.targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息比如 手指的坐标等等
移动端监听事件
过渡监听
*监听 某个元素 的过渡效果
元素名.addEventListener('transitionend', function () { })
移动端 添加类名
classList 属性
var div = document.querySelector('div');
console.log(div.classList); // 返回div 的类名 是伪数组形式
.classList.add(’类名’); *追加类名
var div = document.querySelector('div');
div.classList.add('three');
.classList.remove(’类名’); *删除类名
var div = document.querySelector('div');
div.classList.remove('one');
.classList.toggle(’类名’); *切换类名
var btn = document.querySelector('button')
btn.addEventListener('click', function () {
document.body.classList.toggle('bg')
})
// 如果div 本身有这个类名 就把这个类名删除 如果没有就添加这个类名
会话存储
1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用
存储数据:
sessionStorage.setItem('key', value)
获取数据:
sessionStorage.getItem(key)
删除数据:
sessionStorage.removeItem(key)
清空数据:(所有都清除掉)
sessionStorage.clear()
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
// 存储数据
set.addEventListener('click', function () {
// var val = ipt.value
sessionStorage.setItem('uname', ipt.value)
sessionStorage.setItem('set', ipt.value)
sessionStorage.setItem('gey', ipt.value)
})
// 获取数据
get.addEventListener('click', function () {
console.log(sessionStorage.getItem('uname'));
})
// 删除数据
remove.addEventListener('click', function () {
sessionStorage.removeItem('uname')
})
// 清空数据
del.addEventListener('click', function () {
sessionStorage.clear()
})
</script>
本地存储
1、声明周期永久生效,除非手动删除 否则关闭页面也会存在
2、可以多窗口(页面)共享(同一浏览器可以共享)
3、以键值对的形式存储使用
存储数据:
localStorage.setItem('key', value)
获取数据:
localStorage.getItem('key')
删除数据:
localStorage.removeItem('key')
清空数据:(所有都清除掉)
localStorage.clear()
存储事件
change * 状态发生改变的时候
- 只存在表单元素里
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true; // 复选框的选中状态
}
// 事件
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value);
} else {
localStorage.removeItem('username');
}
})
</script>
input事件
oninput
输入框名.addEventListener('input', function() {
// 当input框里的内容发生改变 就会执行函数
} )
删除数据:
localStorage.removeItem('key')
清空数据:(所有都清除掉)
localStorage.clear()
存储事件
change * 状态发生改变的时候
- 只存在表单元素里
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 记住用户名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')) {
username.value = localStorage.getItem('username');
remember.checked = true; // 复选框的选中状态
}
// 事件
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', username.value);
} else {
localStorage.removeItem('username');
}
})
</script>
input事件
oninput
输入框名.addEventListener('input', function() {
// 当input框里的内容发生改变 就会执行函数
} )