DOM随记

核心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级绑定 事件监听器

原文地址:https://www.cnblogs.com/zhanghaifeng123/p/11970842.html