Dom事件
鼠标事件:
mousedown:鼠标按钮被按下(左键或者右键)时触发,不能通过键盘触发
mouseup:鼠标抬起时触发,不能通过键盘触发
click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入触发
mouseout:鼠标移出触发
mouseenter:鼠标移入范围内触发
mouseleave:鼠标移出范围内触发
mousemove:鼠标在元素内部不断移动时触发
键盘事件
keydown:按键按下
keyup:按键抬起
keypress:键盘按下抬起
**HTML事件
load:文档加载完成 (写在js代码中)
select:被选中的时候
change:内容被改变
focus:得到光标
resize:窗口尺寸变化
scroll:滚动条移动
onchange:表单元素发生变化后触发
oninput:表单元素内容发生变化时触发
Dom节点的属性
nodeName:元素的标签名,以大些的形式返回
nodeValue:根据节点的类型设置或返回节点的值
如果你想返回元素的文本,记住文本通常是插入到文本节点中,所以返回的是文本节点的节点值(element.childNodes[0].nodeValue)
nodeType:以数字值返回指定的节点类型
nodeType(数值)nodeName nodeValue
·元素节点1标签名null
·属性节点2属性名 属性值
·文本节点3#text 文本
·注释节点8#comment注释的文字
·文档节点9#document null
Dom节点的关系
·firstChild:第一个子元素,该节点没有子节点则返回null
·lastChild:最后一个子元素,该节点没有子节点则返回null
·parentNode;获取父节点
·childNode:获取所有子节点,找不到返回空数组
特殊情况
对于元素之间的空格,IE9及之前版本不会返回文本节点,而其他所有浏览器都会返回文本节点,这就导致了在使用childNodes和firstChild等属性的行为不一致,为了弥补该差异性,Element Traversal规范新定义了一组属性如下:
·childElementCount:返回子元素(不包括文本节点和注释)的个数
·firstElementChild:指向第一个子元素,firstchild的元素版
·lastElementChild:指向最后一个元素,lastchild的元素版
·previousElementSibling: 指向前一个同辈元素
·previousSibling的元素版
nextElementSibling: 指向后一个同辈元素,nextSibling的元素版
· children 获取元素子元素 返回一个数组
· childElementCount 获取元素子元素的个数 3
· firstElementChild 获取元素第一个子元素的个数<div>one</div>
· lastElementChild 获取元素最后一个子元素的个<div>three</div>
· dom.nextSibling 获取下一个节点#text
· dom.nextElementSibling 获取下一个元素<p>哈哈哈</p>
· dom.previousSibling() 获取上一个节点 #text
· dom.previousElementSibling() 获取上一个元素<span>shangaaa</span>
节点的操作
创建节点
·documen.createElement():创建新元素(只接受一个参数)
·document.createTextNode():创建文本节点,参数为字符串文本
插入节点
·appendChild()
·node.appendChild(node):插入指定节点成为那个节点最后一个子节点,在插入的元素节点上调用
·insertBefore(新节点,参照节点)第一个参数: 待插入的节点第二在的节点,新节点将插入该节点的前面在父节点上调用
·insertBefore()函数用法:
新元素:你想插入的元素(newElement)
目标元素:你想把这个元素插入到哪个元素(targetElement)
父元素:目标元素的父元素(parentELement)
parentELement.insertBefore(newElement, targetElement)
如果调用appendChild()或insertBefore()将已存在文档中的一个节点再次插入,那个节点将自动从它当前的位置删除并在新的位置重新输入,没有必要显式删除该节点
删除和替换节点
·replaceChild:实现子节点(对象)的替换,返回被替换对象的引用
语法:
·node.replaceChild (newnode,oldnew )
·old.parentNode.replaceChild(new, old)
new:第一个参数时新节点
old:第二个参数需要代替的节点,在父节点上调用该方法
删除一个子节点并用一个新节点取而代之
·removeChild(node)
从文档树中删除一个节点 该方法不是在删除的节点上调用,而是在父节点上调用
克隆节点
克隆节点 需要克隆的节点.cloneNode(true/false);
用于创建调用这个方法的节点的一个完全相同的副本 接受一个布尔值参数,表示是否执行深复制
·true: 深复制
复制节点及其整个子节点树
·false: 浅复制只复制节点本身