复习:
1.1 DOM:Docment Object Model 文档对象模型
当页面加载时,就会创建文档对象模型。文档对象模型被构造为DOM树;
DOM树种任何一个部分都可以看做是节点对象,结构中的html元素、属性、文本、注释等都是节点。
1.2 节点属性
nodeType 节点类型
元素节点 - 1
属性节点 - 2
文本节点 - 3
注释节点 - 8
文档节点 - 9
nodeName 节点名称
nodeValue 含有文本的节点才有节点值
1.3 节点层级访问
firstChild 第一个子节点
firstElementChild 第一个子元素节点
lastChild
lastElementChild
childNodes 所有子节点
childElements 所有子元素节点
parentNode 获取父节点
parentElement 获取父元素
nextSibling 下一个兄弟节点
nextElementSibling 下一个兄弟元素
previousSibling 上一个兄弟节点
previousElementSibling 下一个兄弟元素
1.4 document属性
document.documentElement
document.body
document.title
document.cookie
1.5 获取元素的方式
getElementById()
getElementsByClassName()
getElementsByTagName()
getElementsByName()
1.6 设置和获取html属性
对象的方式 obj.att 或 obj[“att”]
get/set getAttribute(“att”) setAttribute(“att”,”value”)
get/set方式可以自定义属性(data-)显示到结构中,对象自定义属性只能在js中使用
1.7 设置和获取css样式
行内式添加的样式:
对象的方式
ele.style.prop =“单个样式”
ele.style = “多个样式”
ele.style.cssText = “多个 样式”
get/set方式
setAttribute(‘style’,”样式”)
非行内式获取样式
非IE8及以下版本浏览器,使用window.getComputed(element,null)
IE8及以下浏览器版本,使用element.currentStyle =
兼容性写法:
function getOuterStyle(ele,att){
if(window.getComputed){
return window.getComputed(ele,null)[att];
}else{
return ele.currentStyle[att];
}
}
1.8 事件
事件是用户或者浏览器的行为;通过函数进行捕获,执行相应的操作;
一旦有了事件,会自动生成事件对象,存储事件对象相关的详细信息。
窗口事件
window.onload 结构或图片加载完成后,执行的事件
window.onscroll 窗口滚动条事件
window.onresize 窗口改变事件
键盘事件
onkeydown 键盘被按下
onkeyup 键盘按键被松开
onkeypress 键盘按键按下并松开 不支持功能键 大小写获取的键盘码不一致
keyCode
鼠标事件
onclick 单击事件
ondblclick 双击事件
oncontextmenu 右键事件
onmouseover / onmouseenter 鼠标滑过
onmouseout/onmouseleave 鼠标离开
onmousedown 鼠标按下
onmouseup 鼠标松开
onmousemove 鼠标移动
表单事件
onfocus 获取焦点
onblur 失去焦点
onchange 表单改变
onselected 选中事件
oninput 正在输入事件
onsubmit 表单提交
onreset 表单重置
提交和重置需要元素form驱动