简介
DOM,Document Object Model文档对象模型。
DOM是操作HTML和XML的一组API,可以实现动态改变页面的功能。
DOM节点树:每个HTML或XML文档被浏览器加载后都会在内存中生成一个DOM树。如图:
div p h1以前叫标签,现在叫dom对象、dom节点、dom元素,每个标签都是HTMLElement这个类的对象,形如HTMLXxxElement,如div是HTMLDivElement.
<div id = "div1">
我是div1
</div>
DOM编程(CRUD增删改查)
//补充
console.dir(body);
body下有个childNodes 查看子节点
方法(在父节点调用) 返回值 说明
hasChildNodes() Boolean 当前节点是否有子节点
appendChild(node) Node 往当前节点上添加子节点
removeChild(node) Node 删除子节点
replaceChild(newNode,oldNode) 同上 替换子节点
insertBefore(newNode,refNode) 同上 在指定节点的前面插入新节点
document方法
createElement(tagName):创建标签节点
createTextNode(s):创建文本节点
补充:
Node 需要克隆的节点.cloneNode(boolean deep) 复制当前节点.
当deep为true时,不仅复制该节点也复制它的所有后代节点.
当deep为false时,只复制当前节点。
一、增
需求:在div1后面增加一个div5节点
二、删
需求:删除div1
三、改
需求:把div1改成一个文本框
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM编程(CRUD)</title>
<script type="text/javascript">
function add () {
//需求:在div1后面增加一个div5节点
//1.创建标签节点div5
var div5 = document.createElement("div");
div5.id="div5";
//2.创建文本节点
var div5TextNode = document.createTextNode("我是div5");
//3.父节点div5增加子节点(文本结点)
div5.appendChild(div5TextNode);
//4.获得div2节点
var div2 = document.getElementById("div2");
//4.插入同级节点,只能插入到div2前面,不能插入到div1后面
div2.parentNode.insertBefore(div5,div2);
}
function remove () {
//需求:删除div1
//1.获得div5
var div1 = document.getElementById("div1");
//2.获得父节点
if(div1!=null){
div1.parentNode.removeChild(div1);
}else{
alert('不存在div1节点');
}
}
function update () {
//需求:把div1改成一个文本框
//<input type="text" name="username" id="username" value="请输入用户名:" />
//1.创建一个input对象
var username = document.createElement("input");
username.type="text";
username.name="username";
username.id="username";
username.value="请输入用户名:";
//2.替换
var div1 = document.getElementById("div1");
div1.parentNode.replaceChild(username,div1);
}
</script>
</head>
<body>
<div id="div1">
我是div1
</div>
<div id="div2">
我是div2
</div>
<div id="div3">
我是div3
</div>
<div id="div4">
我是div4
</div>
<input type="button" name="btn1" id="btn1" value="在div1后增加1个div5" onclick="add();"/>
<input type="button" name="btn2" id="btn2" value="删除div1" onclick="remove();"/>
<input type="button" name="btn3" id="btn3" value="替换div1为文本框" onclick="update();"/>
<input type="button" name="btn4" id="btn4" value="刷新" onclick="location.reload(true);"/>
</body>
</html>