File size: 2,741 Bytes
08aee07 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node对象</title>
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height: 200px;
}
#div2{
width: 100px;
height: 100px;
}
#div3{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<a href="javascript:void(0);" id="del">删除子节点</a>
<a href="javascript:void(0);" id="add">添加子节点</a>
<!-- <input type="button" id="del" value="删除子节点">-->
<script>
/*
* Node：节点对象，其他5个的父对象
* 特点：所有dom对象都可以被认为是一个节点
* 方法：
* CRUD dom树：
* appendChild()：向节点的子节点列表的结尾添加新的子节点。
* removeChild() ：删除（并返回）当前节点的指定子节点。
* replaceChild()：用新节点替换一个子节点。
* 属性：
* parentNode 返回节点的父节点。
*/
/*
超链接功能：
1、可以被点击：样式
2、点击后跳转到href指定的URL
需求：保留1功能，去掉2功能
实现：href="javascript:void(0);"
*/
//1、获取超链接
var element_a = document.getElementById("del");
//2、绑定单机事件
element_a.onclick = function() {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
//1、获取超链接
var element_add = document.getElementById("add");
//2、绑定单击事件
element_add.onclick = function() {
var div1 = document.getElementById("div1");
//创建div节点
var div3 = document.createElement("div");
//给div1添加子节点
div3.setAttribute("id", "div3");
div3.innerHTML = "div3";
div1.appendChild(div3);
}
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
alert(div1);
</script>
</body>
</html> |