获取事件源
var div = document.getElementById("box");
// var arr1 = document.getElementsByTagName('div');
// var arr2 = document.getElementsByClassName('div');//h5新增
// var arr3 = document.getElementsByName("")
// var arr4 = document.getElementsByTagNameNS()
绑定事件
匿名绑定
div.onclick = function () {
}
用函数名绑定
// div.onclick = function fn() {
// alert(2);
// };
// div.onclick = fn;
行内绑定
// <div onclick="fn()">aaa</div>
修改样式
div.onclick = function () {
div.style.width = "200px";
div.style.backgroundColor = "red";
div.className = "aaa”;
}
节点的访问关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访问关系和操作</title>
</head>
<body>
<!--父节点-->
<!--<div class="box1">-->
<!--<div class="box2"></div>-->
<!--</div>-->
<!--<script>-->
<!--//节点的访问关系是以属性的方式存在的-->
<!--//1、box1是box2父节点-->
<!--var box2 = document.getElementsByClassName("box2")[0];-->
<!--console.log(box2.parentNode);-->
<!--</script>-->
<!--兄弟节点-->
<!--<div class="box1">-->
<!--<div class="box2"></div>-->
<!--<div class="box3"></div>-->
<!--</div>-->
<!--<script>-->
<!--//节点的访问关系是以属性的方式存在的-->
<!--//1、box1是box2父节点-->
<!--var box2 = document.getElementsByClassName("box2")[0];-->
<!--console.log(box2.nextElementSibling);-->
<!--</script>-->
<!--子节点-->
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
<script>
//节点的访问关系是以属性的方式存在的
//第一个子节点
var box2 = document.getElementsByClassName("box2")[0];
console.log(box2.parentNode.firstElementChild);
//suoy子节点
console.log(box2.parentNode.childNodes);//有换行符
console.log(box2.parentNode.children);//过滤掉换行符
</script>
</body>
</html>
dom节点的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom节点的操作</title>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
<script>
//创建
var aaa = document.createElement("li");
console.log(aaa);
var bbb = document.createElement("a");
console.log(bbb);
//添加
var box1 = document.getElementsByClassName("box1")[0];
box1.appendChild(aaa);
box1.insertBefore(bbb,aaa); //把bbb添加再aaa标签之前
//删除
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);//自己删除自己
//克隆
var ccc = box1.cloneNode(); //浅克隆
var ddd = box1.cloneNode(true); //深克隆
console.log(ccc);
console.log(ddd);
</script>
</body>
</html>
dom节点属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<script>
window.onload = function () {
var eleNode = document.getElementsByTagName("img")[0];
//属性的获取(不会出现在标签当中)
//1、元素节点.属性；或者元素节点[属性]
eleNode.src="image/guohui.png";//修改属性
console.log(eleNode.src);
console.log(eleNode.tagName);
console.log(eleNode["title"]);
console.log(eleNode["className"]);
console.log(eleNode["alt"]);
//2、元素节点.方法();
//获取
console.log(eleNode.getAttribute("id"));
//设置
eleNode.setAttribute("id","nihao");
//删除
eleNode.removeAttribute("id");
}
</script>
</head>
<body>
<img src="image/logo.png" class="box" title="图片" id="aaa" alt="jd"/>
</body>
</html>
案例-图片跳转
<body>
<!--<a href="javascript">切换</a>-->
<!--<a href="#" style="margin: 10px; display: block;">切换</a>-->
<a href="http://www.baidu.com" style="margin: 10px; display: block;">切换</a>
<img id="img" src="image/slogen1.png" width="400px" >
<script>
//点击a连接，img图片切换(行内式)
var a = document.getElementsByTagName('a')[0];
var img = document.getElementById("img");
a.onclick = function () {
img.src = "image/slogen2.png";
//return false禁止a连接跳转(href路径)
return false;
}
</script>
</body>
案例-显示隐藏盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏盒子</title>
<style type="text/css">
button {
margin: 10px;
}
div {
200px;
height: 200px;
background: pink;
}
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="btn">隐藏</button>
<div>
扯犊子。。。
</div>
<script>
//点击按钮，隐藏盒子改变文字，再点击按钮显示处理
var btn=document.getElementById("btn");
var div = document.getElementsByTagName("div")[0];
btn.onclick = function () {
//先判断btn的innerhtml的属性值
if(this.innerHTML === "隐藏"){
div.className = "hide";
//修改文字(innerHTML)
btn.innerHTML = "显示";
}else{
div.className = "show";
btn.innerHTML = "隐藏";
}
}
</script>
</body>
</html>
常用事件调用方法
|
事件名 |
说明 |
|
onclick |
鼠标单击 |
|
ondblclick |
鼠标双击 |
|
onkeyup |
按下并释放键盘上的一个键时触发 |
|
onchange |
文本内容或下拉菜单中的选项发生改变 |
|
onfocus |
获得焦点，表示文本框等获得鼠标光标。 |
|
onblur |
失去焦点，表示文本框等失去鼠标光标。 |
|
onmouseover |
鼠标悬停，即鼠标停留在图片等的上方 |
|
onmouseout |
鼠标移出，即离开图片等所在的区域 |
|
onload |
网页文档加载事件 |
|
onunload |
关闭网页时 |
|
onsubmit |
表单提交事件 |
|
onreset |
重置表单时 |