XML DOM
XML DOM
XML 文档对象模型定义访问和操作XML文档的标准方法。
DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。
什么是 DOM？
DOM 是 W3C（万维网联盟） 的推荐标准。
DOM 定义了访问诸如 XML 和 XHTML 文档的标准。
“W3C 文档对象模型（DOM）是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。”
W3C DOM 被分为 3 个不同的部分/级别（parts / levels）：
- 核心 DOM
用于任何结构化文档的标准模型 - XML DOM
用于 XML 文档的标准模型 - HTML DOM
用于 HTML 文档的标准模型
DOM 定义了所有文档元素的对象和属性，以及访问它们的方法（接口）。
您可以在我们的 W3C 教程 中获得更多有关 W3C DOM 规范/级别的信息。
什么是 XML DOM?
XML DOM 是：
- 用于 XML 的标准对象模型
- 用于 XML 的标准编程接口
- 中立于平台和语言
- W3C 的标准
XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。
换句话说：
XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。
XML DOM 节点
XML 文档中的每个成分都是一个节点。
节点
根据 DOM，XML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
- 整个文档是一个文档节点
- 每个 XML 标签是一个元素节点
- 包含在 XML 元素中的文本是文本节点
- 每一个 XML 属性是一个属性节点
- 注释属于注释节点
XML DOM节点的遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
</head>
<body>
<!-- 注释说明 -->
<h1>XML DOM：节点的遍历</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
</body>
<script>
//获取ul中的所有li节点
var list = document.getElementById("uid").getElementsByTagName("li");
console.log("节点数量：",list.length);
//通过子节点获取
var list2 = document.getElementById("uid").childNodes;
console.log("节点数量：",list2.length);
//节点的遍历
for(var i=0; i<list2.length; i++){
//console.log(list2[i].nodeType);\
//判断是否是元素节点
if(list2[i].nodeType == 1){
//console.log(list2[i].innerHTML); //HTML DOM获取内容
console.log(list2[i].firstChild.nodeValue); //XML DOM获取内容
}
}
</script>
</html>
XML DOM节点的删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
ul{
list-style:none;}
ul li{
line-height:30px;background-color:#ddd;margin-top:2px;}
ul li:hover{
background-color:#fc0;}
ul li.cc{
background-color:#f0c;}
</style>
</head>
<body>
<h1>XML-DOM：节点的删除</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
<button onclick="doDel()">删除</button>
</body>
<script>
//获取所有ul中的li节点并绑定点击事件
var list = document.getElementsByTagName("li");
for(var i=0; i<list.length; i++){
list[i].onclick = function(){
this.setAttribute("class","cc");
}
}
//执行节点删除函数
function doDel(){
var list2 = document.getElementsByTagName("li");
//遍历
for(var i=0; i<list2.length; i++){
//判断当前li是否有class属性值为cc的
if(list2[i].getAttribute("class")=="cc"){
//执行删除
list2[i].parentNode.removeChild(list2[i]);
i--;
}
}
}
</script>
</html>
XML DOM节点属性操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
</head>
<body>
<h1>XML-DOM：改变节点的属性</h1>
<a id="aid" href="http://www.baidu.com">百度</a>
</body>
<script>
//获取上面超链接a元素节点
var a = document.getElementById("aid");
//通过已知的HTML DOM操作a节点属性
console.log(a.href);
a.title="百度网址";
//a.aa = "bb"; //添加aa属性值为bb 无效的
//使用XML DOM操作节点a的属性
console.log(a.getAttribute("href"));
a.setAttribute("aa","bb"); //通过XML DOM可以添加任何属性和值
</script>
</html>
XML DOM节点创建
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
ul{
list-style:none;}
ul li{
line-height:30px;background-color:#ddd;margin-top:2px;width:100px;}
</style>
</head>
<body>
<h1>XML-DOM：节点的创建</h1>
<ul id="uid">
<li>成龙</li>
<li>甄子丹</li>
<li>李连杰</li>
<li>宋小宝</li>
</ul>
名称：<input id="nid" type="text" size="10" name="name"/>
<button onclick="doAdd()">添加</button>
</body>
<script>
function doAdd(){
//获取输入框中的信息
var name = document.getElementById("nid").value;
//获取ul元素节点对象
var ul = document.getElementById("uid");
//创建一个文本节点
var tt = document.createTextNode(name);
//创建一个元素节点
var li = document.createElement("li"); //
//将文件节点添加到li元素节点中
li.appendChild(tt);
//将li节点添加到ul中
//ul.appendChild(li); //后追加
ul.insertBefore(li,ul.firstChild); //前插入
}
</script>
</html>
XML DOM 节点克隆
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
#did{
width:400px;height:300px;border:1px solid blue;}
img{
width:80px;border:2px solid #fff;margin:2px;}
img:hover{
border:2px solid red;}
</style>
</head>
<body>
<h1>XML-DOM：节点的克隆</h1>
<div id="did"></div>
<div id="mid">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
<h4>双击图片可实现图片的添加</h4>
</body>
<script>
//获取mid中的所有图片节点
var list = document.getElementById("mid").getElementsByTagName("img");
//遍历添加鼠标双击事件
for(var i=0; i<list.length; i++){
list[i].ondblclick = function(){
//获取did节点
var did = document.getElementById("did");
//将当前图片节点克隆一份添加到did元素节点中
did.appendChild(this.cloneNode());
}
}
</script>
</html>
XMl DOM节点的替换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
#did{
width:400px;border:1px solid blue;}
#did img{
width:400px;}
#mid img{
width:80px;border:2px solid #fff;margin:2px;}
#mid img:hover{
border:2px solid red;}
</style>
</head>
<body>
<h1>XML-DOM：节点的替换</h1>
<div id="did"><img src="./images/11.jpg"/></div>
<div id="mid">
<img src="./images/11.jpg"/>
<img src="./images/22.jpg"/>
<img src="./images/33.jpg"/>
<img src="./images/44.jpg"/>
</div>
<h4>双击图片可实现图片的替换</h4>
</body>
<script>
//获取id属性值为did的节点对象
var did = document.getElementById("did");
//获取id属性值为mid节点中的所有图片img元素节点
var list = document.getElementById("mid").getElementsByTagName("img");
//遍历图片节点，并绑定鼠标双击事件
for(var i=0; i<list.length; i++){
list[i].ondblclick = function(){
did.replaceChild(this.cloneNode(),did.firstChild); //子节点替换
}
}
</script>
</html>
XML DOM操作select选项
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
select{
width:100px;height:200px;border:1px solid #ddd;float:left;}
div{
width:100px;height:200px;float:left;text-align:center;padding-top:50px;}
</style>
</head>
<body>
<h1>XML DOM 操作-select对象</h1>
<select id="sid1" size="10" multiple>
<option value="0">邓丽君</option>
<option value="1">张国荣</option>
<option value="2">梅艳芳</option>
<option value="3">黄家驹</option>
<option value="4">迈克尔.杰克逊</option>
<option value="5">姚贝娜</option>
<option value="6">张雨生</option>
</select>
<div>
<button onclick="doMove('sid1','sid2')">>></button>
<br/><br/><br/><br/>
<button onclick="doMove('sid2','sid1')"><<</button>
</div>
<select id="sid2" size="10" multiple></select>
</body>
<script>
function doMove(d1,d2){
//获取对应的下拉框节点对象
var select1 = document.getElementById(d1);
var select2 = document.getElementById(d2);
//获取第一个下拉框中的所有option下拉项节点对象
var list = select1.getElementsByTagName("option");
//遍历并判断是否选中
for(var i=0; i<list.length; i++){
if(list[i].selected){
list[i].selected = false;
select2.appendChild(list[i]); //使用XML DOM移动下拉项
i--;
}
}
}
</script>
</html>
XML DOM操作的table操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript中的XML DOM</title>
<style>
select,option,div,button{
margin:0px;padding:0px;}
#lid,#rid,div{
width:80px;
height:260px;
float:left;
}
div{
text-align:center;
padding-top:60px;
}
</style>
</head>
<body>
<h1>JavaScript语言中XML DOM 操作-table对象</h1>
<table id="tid" width="500" border="1">
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>张三</td>
<td>男</td>
<td>20</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>21</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
<tr>
<td>1003</td>
<td>王五</td>
<td>男</td>
<td>22</td>
<td><button onclick="dodel(this)">删除</button></td>
</tr>
</tbody>
</table>
<br/><br/><br/>
<h2>添加学生信息</h2>
<form action="#" name="myform" onsubmit="return doAdd()">
学号：<input type="text" name="sno"/><br/><br/>
姓名：<input type="text" name="name"/><br/><br/>
性别：<input type="text" name="sex"/><br/><br/>
年龄：<input type="text" name="age"/><br/><br/>
<input type="submit" value="添加"/>
</form>
</body>
<script>
//执行数据删除操作
function dodel(bt){
bt.parentNode.parentNode.parentNode.removeChild(bt.parentNode.parentNode);
}
function doAdd(){
//获取表单信息
var data = new Array();
data[0] = document.myform.sno.value;
data[1] = document.myform.name.value;
data[2] = document.myform.sex.value;
data[3] = document.myform.age.value;
//获取tbody元素节点对象
var tbody = document.getElementById("tid").getElementsByTagName("tbody")[0];
//创建一个元素节点tr
var tr = document.createElement("tr");
//遍历数据并创建td节点
for(var i=0; i<data.length; i++){
var td = document.createElement("td");
var text = document.createTextNode(data[i]);
td.appendChild(text);
tr.appendChild(td);
}
//添加删除按钮
var td = document.createElement("td");
td.innerHTML = '';
tr.appendChild(td);
//将行节点tr放置到tbody中
tbody.appendChild(tr);
//清空表单
document.myform.reset();
return false;
}
</script>
</html>