onclick事件是最常见的事件,当控件被点击的时候触发。
JS简单的的事件操作可以分为四种:
1。鼠标事件操作:
onmouseover 鼠标移入:当鼠标移入控件时触发。
onmouseout 鼠标移出:当鼠标移除控件时触发。
onmousemove 鼠标移动事件:当鼠标在空间上移动的时候触发。
onmousedown 鼠标按下触发
onmouseup 鼠标抬起触发
2。键盘事件操作。
键盘事件能够触发的按键包括:字母,数字、回车、空格;
onkeypress() :键盘按键被按下时触发,仅触发字母数字,Fn
onkeyup() :键盘抬起触发
onkeydown() :键盘按下触发
(使用input时placeholder属性 在输入组件中可以起到 提示作用,不作输入组件的value值)
3,浏览器事件操作。
onload():加载页面后触发
onunload():关闭页面触发
4.焦点事件操作
onblur():失去焦点触发
onfocus():获得焦点触发
onchange():内容改变触发
DOM节点
文档中的每个成分都是一个节点。可分为四个类型:
文档节点,文本节点,属性节点,元素节点,注释节点对应的属性值
元素element | 1 |
属性attr | 2 |
文本text | 3 |
注释comments | 8 |
文档document | 9 |
DOM与树类似。都有根节点,父节点,子节点,叶子结点等概念
其常使用的方法为
childNodes | 返回节点的子节点的节点列表。 |
firstChild | 返回节点的首个子节点。 |
lastChild | 返回节点的最后一个子节点。 |
nextSibling | 返回节点之后紧跟的同级节点。 |
nodeName | 返回节点的名称,根据其类型。 |
nodeType | 返回节点的类型。 |
nodeValue | 设置或返回节点的值,根据其类型。 |
parentNode | 返回节点的父节点。 |
previousSibling | 返回节点之前紧跟的同级节点。 |
textContent | 设置或返回节点及其后代的文本内容。 |
appendChild() | 向节点的子节点列表的结尾添加新的子节点。 |
cloneNode() | 复制节点。 |
insertBefore() | 在指定的子节点前插入新的子节点。 |
removeChild() | 删除(并返回)当前节点的指定子节点。 |
replaceChild() | 用新节点替换一个子节点。 |
创建节点:document.createElement()
删除节点:parent.removeChild()
使用innerHTML 设置或返回单元格的开始标签和结束标签之间的 HTML。
给出一个使用DOM的简单例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="fristdiv">
<span id="">
</span>
<span id="">
</span>
</div>
<div id="">
</div>
<!--
作者:1277607260@qq.com
时间:2018-08-04
描述:this表示当前组建
-->
</body>
<script type="text/javascript">
var treeNode = document.getElementById("fristdiv");
alert(treeNode.childNodes.length);
for (var i = 0;i<treeNode.childNodes.length;i++) {
alert("shuxing"+treeNode.childNodes[i].nodeName+"::"+treeNode.childNodes[i].nodeType);
}
</script>
</html>
上述alert(treeNode.childNodes.length);显示的是5
因为div中的空格算作一个文本节点。