第一章 标签的查找
1.1直接查找
直接查找标签可以分为三种：
（1）根据类的名称进行查找。这种方式是用的比较广泛的一种，使用方法为：document.getElementsByClassName(“name”)，这种查找的方式找到的对象有一个或多个，所以通常想要具象化出一个对象需要在后面放上一个数字，也就是：document.getElementsByClassName(“name”)[id]，比如：找到类名为dev的第一个标签，使用方法为document.getElementsByClassName(“dev”)[0]。
（2）根据对象id进行查找。使用方法为document.getElementById(“idname”)，因为id是唯一的，所以这种方法找到的对象只有一个，例如：找到id=p1的标签：document.getElementById(“p1”)，这个就表示找到的对象。
（3）根据标签名进行查找。这种方法查到的标签也是一个或多个，使用方法为：document.getElementsByClassName(“name”)，类似于根据类查找，这种方式找到的对象也得后面加一个id，例如：查找第一个div标签：document.getElementsByClassName(“div”)[0]，第二个那么后面的方括号里写1.
1.2导航查找
通过与正操作的标签的关系的方式进行标签的查找就是导航查找，目前导航查找的方式一般如下：
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
例如：找到当前标签的父标签：
this.parentElement
第二章 事件
click事件
表示鼠标点击时发生的事件，使用方法一般是对象。onclick=function(){}，例如新增一行表格，可以用如下代码做到：
qian_commit.onclick=function () { ???????var tr1=document.createElement("tr"); ???????for(i=0;i<qian_input.length;i++){ ???????????var td1=document.createElement("td"); ???????????console.log(qian_input[i].value); ???????????td1.innerHTML=qian_input[i].value; ???????????td1.classList.add("bianji"); ???????????tr1.appendChild(td1); ???????}; ???????var td2=document.createElement("td"); ???????var button1=document.createElement("button"); ???????var button2=document.createElement("button"); ???????button1.innerHTML="保存"; ???????button2.innerHTML="删除"; ???????button1.classList.add("edit1"); ???????button2.classList.add("del1"); ???????td2.appendChild(button1); ???????td2.appendChild(button2); ???????tr1.appendChild(td2); ???????qian_body[0].appendChild(tr1); ???????qian_back[0].style.display="none"; ???????qian_del.length=qian_del.length+1; ???????del(); ???????edit(); ???????save(); ???};onload事件
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.。例如：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script> ????????/* ?????????????window.onload=function(){ ??????????????????var ele=document.getElementById("ppp"); ??????????????????ele.onclick=function(){ ??????????????????alert(123) ???????????????}; ????????????}; ?????????????????*/ ?????????function fun() { ?????????????var ele=document.getElementById("ppp"); ??????????????ele.onclick=function(){ ???????????????alert(123) ???????????}; ?????????} ???</script></head><body onload="fun()"><p id="ppp">hello p</p></body></html>onsubmit事件
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交。
例如：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<script> ???????window.onload=function(){ ???????????//阻止表单提交方式1(). ???????????//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. ????????????var ele=document.getElementById("form"); ????????????ele.onsubmit=function(event) { ???????????// ???alert("验证失败 表单不会提交!"); ???????????// ???return false; ???????????// 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。 ????????????alert("验证失败 表单不会提交!"); ????????????event.preventDefault(); ???} ???????}; ???</script></head><body><form id="form"> ???????????<input type="text"/> ???????????<input type="submit" value="点我!" /></form></body></html>还有很多常见的事件：onselect、onchange、onkeydown、onmouseout、onmouseleave等。
js2 dom讲解
原文地址：http://www.cnblogs.com/qianmeng/p/7742495.html