核心DOM获取属性: 可以操作一切结构文档API,访问标准的html属性
getAttribute(获取属性)
setAttribute(设置属性)
hasAttribute(判断是否包含指定属性)
removeAttribute(移除属性)
HTML DOM:对核心DOM中常用的API的简化
DOM
documen和Document的区别
1.document代表文档
2.Document代表构造函数 不能用new关键字,系统自动生成new
document的方法
1.document.getElementById(按照id查找html的内容) 定义在Document.prototype上的, Element节点上不能使用,
2.document.getElementByTagName(按照标签名) 定义在Document.prototype和Element.prototype
3.document.getElementByClassName(按照class查找html的内容) 定义在Document.prototype和Element.prototype
4.document.querySelector / document.querySelectorAll(按照选择器查找)定义在Document.prototype和Element.prototype
5.document.getElementByName 定义在HTMLDocument.prototype
HTMLDocument.prototype上定义了一些常见的属性,body,head分别指代HTML文档中的对应标签
document.body document.head
还定义了documentElement (document.documentElement)
增加
document.creatcomment 增加注释
document.creatTextNode 增加文本
document.creatElement 增加元素
appendChild() 对于五中生有的元素相当于是push,但对页面已存在的元素它是一个的剪切的过程
inserBefore(a , b)把 a 插到 b前面
删除
parent.removeChild 父节点删除
remove 自身删除
替换
replaceChild(a,b) a替换b
节点的关系
node.parentNode (获取父节点)
node.childNode (获取所有节点)
node.firstNode (获取第一个节点)
nod.lastNode (获取最后一个节点)
兄弟关系
node.previousElementSibling
node.nextElementSibling
元素关系
elem.parentElement(返回父元素的对象)
elem.children(返回子元素对象的集合)
elem.firstElementChild(返回第一个子元素对象)
elem.lastElement(返回最后一个子元素)
兄弟关系
elem.previousElementSibling
elem.nextElementSibling
事件
鼠标事件
click
dbclick
mouseover
mouseout
mousemove
键盘事件
keydown
keyup
input框事件
foucs
blur
change
input
load:
事件的绑定方法:
1.句柄 写在html元素中,以属性的形式存在
2.DOM0级绑定 dom.on + 事件 = 处理函数
3.DOM2级绑定 事件监听器