js2 dom讲解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js2 dom讲解相关的知识，希望对你有一定的参考价值。
第一章 标签的查找
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讲解的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段