什么是dom?
dom的本质就是将文档中所有的内容封装成对象
从这个例子中可以学到如何操作利用dom操作html页面标签(crud)，添加属性，内容，其中还用到了dhtml中的一些属性，另外增删改都要用到.parentNode;找到父元素，通过父元素对实现子元素修改。
学习查询使用W3School和DHTML
<pre>
<!DOCTYPE html>
<html>
<head>
<title>NodeCRUDl.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
div {
border:#0099FF 1px solid;
height:60px;
width:120px;
margin:20px 0px 20px 20px;
padding:10px 0px 0px 20px;
}
#div_1{
background-color:#00FFFF;
}
#div_2{
background-color:#FF3399;
}
#div_3{
background-color:#0000FF;
}
#div_4{
background-color:#FFFF66;
}
</style>
</head>
<body>
<div id="div_1">
</div>
<div id="div_2">
div区域2
</div>
<div id="div_3">
div区域3
</div>
<div id="div_4">
div区域4
</div>
<hr />
<input type="button" value="创建并添加节点" onclick="addNode()" />
<input type="button" value="删除节点" onclick="deleteNode()" />
<input type="button" value="替换节点" onclick="updateNode()" />
<input type="button" value="克隆节点" onclick="copyNode()" />
</body>
<script type="text/javascript">
function addNode(){
var a =document.createElement("a");
a.setAttribute("href","http://www.baidu.com");
a.innerHTML ="点我";
var div_1 =document.getElementById("div_1");
div_1.appendChild(a);
}
//删除节点
//增删改都要通过父元素进行
function deleteNode(){
//1 获得要删除的div
var div_2 = document.getElementById("div_2");
//2 获得div的父元素
var parent = div_2.parentNode;
//3 通过爹删除孩子
parent.removeChild(div_2);
}
//替换节点
function updateNode(){
//1 获得被替换的div
var div_3 = document.getElementById("div_3");
//2 创建img元素对象<img />
var img = document.createElement("img");
//3 为img添加属性
img.setAttribute("src", "mn.png");
img.setAttribute("width", "300");
//4 找到爹
var parent = div_3.parentNode;
//5 替换
parent.replaceChild(img, div_3);
}
//克隆节点
function copyNode(){
// 1.获得div4
var div_4 = document.getElementById("div_4");
// 2.调用克隆方法克隆
var div_copy = div_4.cloneNode(true);
// 3.获得父亲\
var parent = div_4.parentNode;
// 4.添加到最后一个div之前
//parent.appendChild(div_copy);
parent.insertBefore(div_copy, div_4);
}
</script>
</html>
</pre>
网友评论