文档对象模型(DOM: Document Object Model):
文档:标记型文档(HTML,XML)。特征:里面除了标签，就是标签封装的内容
对象:封装了属性和行为的实体，可以被直接调用。
模型:所有标记型文档都具备一些共有特征的一个体现。
DOM = BOM(浏览器对象模型) + DOM(文档对象模型)
DHTML：动态HTML，它不是一门语言，是多项技术综合体的简称。
DHTML = HTML + CSS + DOM + JS
技术边界:
HTML: 负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
CSS: 负责提供样式属性，对标签中的数据进行样式的定义。
DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象，解析。在对象中定义了更多的属性和行为，便于对对象进行操作。
JS: 负责提供程序设计语言。--if, for, var , function, ...
两个名词
1)元素(Element): 指的是页面中的标签(对象) ---容器
2)节点(Node): 指的是页面中的标签、文本内容、属性 ----dom树上所有的节点都逃不出“标签、文本内容、属性”的范围是
2)节点(Node): 指的是页面中的标签、文本内容、属性 ----dom树上所有的节点都逃不出“标签、文本内容、属性”的范围是
关于元素(Element)的操作
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--获取文档中的元素</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!--
两个名词:
1)元素(Element): 指的是页面中的标签(对象) ---容器
2)节点(Node): 指的是页面中的标签、文本内容、属性 ----dom树上所有的节点都逃不出“标签、文本内容、属性”的范围
◇◇获取文档中的元素1,该方式只能获取元素对象◇◇
直接通过document有三种获取方式:
1) getElementById(): 通过元素的id属性值
2) getElementsByName(): 通过元素的name属性值
3) getElementsByTagName(): 通过元素的标签名
※通过一个元素对象调用上面的3个函数可以在该元素的dom子树中进行元素获取。
-->
<div id="div1" >这是div2中的文本</div>
<input type="button" value="获取文档中的元素1" οnclick="demo1();"><br/>
<script type="text/javascript">
function demo1(){
var objDiv = document.getElementById("div1");
objDiv.innerText="湖南城市学院";
objDiv.style.backgroundColor="blue";
objDiv.style.height="50px";
objDiv.style.width="200px";
}
</script>
<div id="div2" name="nm1">这是div2中的文本</div>
<input type="button" value="获取文档中的元素2" οnclick="demo2();"><br/>
<script type="text/javascript">
function demo2(){
var objDiv = document.getElementsByName("nm1")[0];//注意通过name属性获取到的是元素数组
objDiv.innerText="湖南益阳";
objDiv.style.backgroundColor="red";
objDiv.style.height="50px";
objDiv.style.width="100px";
}
</script>
<div id="div3" name="nm2">这是div3中的文本</div>
<input type="button" value="获取文档中的元素3" οnclick="demo3();"><br/>
<script type="text/javascript">
function demo3(){
var objDiv = document.getElementsByTagName("div")[2];//注意通过标签名获取到的也是元素数组
objDiv.innerText="中国北京";
objDiv.style.backgroundColor="green";
objDiv.style.height="50px";
objDiv.style.width="100px";
}
</script>
<hr/>
<!--一个节点(node)通常都有三个属性:
1)节点名称(nodeName):标签为标签名, 属性为属性名, 文本内容为:#text
2)节点类型(nodeType):标签为1, 属性为2, 文本内容为3
3)节点值(nodeValue): 标签为null, 属性为属性值, 文本内容就是本身的这些文字
-->
<div id="div4" value="abc">这是div4中的文本 </div>
<input type="button" value="获取节点的3个通用属性" οnclick="demo4();"><br/>
<script type="text/javascript">
function demo4(){
//元素(标签)
var objDiv = document.getElementById("div4");
//objDiv.innerText=objDiv.nodeName+","+objDiv.nodeType+","+objDiv.nodeValue;
//属性
//获取"属性对象"用getAttributeNode()， 直接获取"属性值"用getAttribute(), attributes集合能获取当前元素的所有成员属性对象
var attrDivValue = objDiv.getAttributeNode("value");
//alert(attrDivValue);
//alert(attrDivValue.nodeName+","+attrDivValue.nodeType+","+attrDivValue.nodeValue);
//文本内容
var innerTextNode = objDiv.childNodes[0];
alert(innerTextNode.nodeName+","+innerTextNode.nodeType+","+innerTextNode.nodeValue);
}
</script>
</body>
</html>
关于节点(Node)的操作
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--获取文档中的元素</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<!--
◇◇获取文档中的元素2,该方式不但可以获取元素节点，还可获取文本内容节点◇◇
可以通过元素在dom树中的层次关系获取其它元素。
这些层次关系包括: 父亲、儿子、兄弟
儿子:firstChild, lastChild, childNodes集合,children集合
兄弟:nextSibling(下一个兄弟节点), previousSibling(上一个兄弟节点)
父亲: parentElement, parentNode
-->
<div id="div1" >这是div2中的文本</div>
<table id="tab1">
<tr>
<td>单元格一</td>
<td>单元格二</td>
</tr>
<tr>
<td>单元格2一</td>
<td>单元格2二</td>
</tr>
</table>
<dl>
<dt>上层项目</dt>
<dd>下层项目1</dd>
<dd>下层项目2</dd>
<dd>下层项目3</dd>
</dl>
<input type="button" value="获取文档中的节点" οnclick="demo1();"><br/>
<script type="text/javascript">
function demo1(){
var objTable = document.getElementById("tab1");
//父新
var node = objTable.parentNode;
//alert(node.nodeName); //BODY
//第一个儿子
var node2 = objTable.firstChild;
//alert(node2.nodeName);//#text ---文本内容，本例是空白符
//利用循环去找第一个儿子
var i=0;
var node22 = objTable.childNodes[i];
while(node22.nodeName!="TBODY"){
i++;
node22 = objTable.childNodes[i];
}
alert("2: "+node22.nodeName);
var objTr = node22.childNodes[0];
if(objTr=="#text"){
//objTr = node22.childNodes[1]; //OK
objTr = objTr.nextSibling;
}
alert(objTr.nodeName);
}
</script>
</body>
</html>节点的增删改查
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM--节点的增删改查CRUD</title>
<style type="text/css">
div{
border:#00ccff solid 1px;
width:200px;
height:30px;
}
</style>
<script type="text/javascript">
//1创建//
//创建纯"文本节点"
function createAndAdd1(){
var objDiv = document.getElementById("div1");
var oTextNode = document.createTextNode("这是一段文本");
objDiv.appendChild(oTextNode);
}
//创建"标签元素"
function createAndAdd2(){
//创建一个标签节点:<input type="button" value="OK"/>
var oInputNode = document.createElement("input");
oInputNode.type="button";
oInputNode.value="OK";
//把所创建标签元素 添加到 div1 中
var objDiv = document.getElementById("div1");
objDiv.appendChild(oInputNode);
}
//一种通用的节点创建方式
//创建"标签元素" ---通过标签元素的innerText或innerHTML来实现
function createAndAdd3(){
var objDiv = document.getElementById("div1");
//objDiv.innerText ="湖南";
//objDiv.innerText +="湖南";
//objDiv.innerHTML = "<input type='button' value='OK'/>";
//objDiv.innerHTML += "<input type='button' value='OK'/>";
objDiv.innerHTML += "<a href='http://www.baidu.com'>百度</a>";
}
//2删//
function delNode(){
var objDiv = document.getElementById("div2");
//objDiv.removeNode(true);//连子树一起删除
//objDiv.removeNode(false);//只删除当前标签节点，子树不删除
//高版本建议采用removeChild()，删除更干净
objDiv.parentNode.removeChild(objDiv); //自己找父节点删除
}
//3改//
//移动替换
function updateNode(){
var objDiv2 = document.getElementById("div2");
var objDiv3 = document.getElementById("div3");
//高版本建议采用replaceChild()，替换更干净
objDiv2.parentNode.replaceChild(objDiv3,objDiv2); //用div3替换div2
}
//拷贝替换
function updateNode2(){
var objDiv2 = document.getElementById("div2");
var objDiv3 = document.getElementById("div3");
//克隆节点
//var objDiv3_2 = objDiv3.cloneNode();//空参即是false,不克隆属性及子节点--子树
var objDiv3_2 = objDiv3.cloneNode(true);//参数为true,克隆属性及子节点--子树
objDiv2.parentNode.replaceChild(objDiv3_2,objDiv2); //用div3替换div2
}
/4查前面早讲了
</script>
</head>
<body>
<div id="div1">111</div>
<div id="div2">222</div>
<div id="div3">3333</div>
<input type="button" value="创建并添加节点1" οnclick="createAndAdd1();"> <br/>
<input type="button" value="创建并添加节点2" οnclick="createAndAdd2();"> <br/>
<input type="button" value="创建并添加节点3" οnclick="createAndAdd3();"> <br/><br/><br/>
<input type="button" value="删除节点" οnclick="delNode();"> <br/>
<input type="button" value="移动替换节点" οnclick="updateNode();"> <br/>
<input type="button" value="拷贝替换节点" οnclick="updateNode2();"> <br/>
</body>
</html>
扫一扫
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
