DOM
document object model 文档对象模型
查找元素
直接查找
document.getElementById('div1') // 通过ID查找 返回一个节点
document.getElementsByClassName('son') // 通过类名查找 返回一个对象 对象中包含多个节点
document.getElementsByTagName('div') /// 通过标签名查找
间接查找
节点.parentNode // 找到父节点
节点.children // 找子节点 多个节点
节点.firstElementChild // 找第一个子节点
节点.lastElementChild // 找最后一个子节点
节点.nextElementSibling //找下一个兄弟节点
节点.previousElementSibling //找上一个兄弟节点
节点的属性操作
节点.getAttribute('属性') //获取属性
节点.setAttribute('属性','值') //设置属性
节点.removeAttribute('属性') //删除属性
节点的文本操作
节点.innerText // 标签的文本内容
节点.innerHTML // 标签内部的HTML文本
节点.innerText='设置的文本' // 标签的文本内容
节点.innerHTML='设置HTML的文本' // 标签内部的html的文本
节点的值操作
// input select textarea
节点.value // 获取节点的值
节点.value = '值' // 设置节点的值
节点样式的操作
节点.style // 所有的样式 只有行内样式才能拿多
节点.style.样式名称
节点.style.样式名称 = '值' // 设置样式
节点类的操作
节点.classList // 节点所有的class
节点.classList.add（'类名'） // 给节点添加一个类
节点.classList.remove（'类名'） // 给节点删除一个类
节点的操作
document.createElement('标签的名字') // 创建一个标签节点 div a span
添加节点到文档中
父节点.appendChild(子节点) // 添加一个子节点到父节点的后面
父节点.insertBefore(新节点,父节点的子节点) // 添加一个子节点到父节中的指定子节点前
删除节点
父节点.removeChild(子节点) // 通过父节点删除子节点
替换节点
节点.replaceChild(新节点,节点的子节点)
复制节点
节点.cloneNode() // 不写数字或者0 只拷贝节点
节点.cloneNode(1) // 拷贝节点和它的子孙节点
事件
事件的绑定
// 方式一
// 方式二
// 方式三
事件的种类
属性 当以下情况发生时，出现此事件
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击
滚动事件：
BOM
browser object model
窗口
打开新窗口
window.open(url,target)
关闭窗口
window.close() // 只能关闭用open打开的窗口
窗口的宽高
window.innerHeight 高度
window.innerWidth 宽度
定时器 **
定时器 **
// setTimeout 某段时间结束后触发执行
function func(){
alert('是否已满18岁')
}
setTimeout(func,2000)
// setInterval 设置时间间隔的定时器 每隔一段时间要触发执行函数
var ret= setInterval(func, 500); // 开启定时器
clearInterval(ret) // 关闭定时器
location **
location.href // 当前的地址
location.href = '地址' // 当前页面会跳转到新页面