都是方便用JS语言动态操作页面,XML DOM用来弥补HTML DOM的不足
🌟拥有与HTML DOM 相同的属性nodeName, nodeValue, nodeType
✨获取和遍历方式有两种:
<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>
✨XML DOM节点的删除
<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>
✨XML DOM节点属性操作
<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>
✨XML DOM节点的创建
<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>
//将文件节点添加到li元素节点中
li.appendChild(tt);
//将li节点添加到ul中
//ul.appendChild(li); //后追加
ul.insertBefore(li,ul.firstChild); //前插入
}
</script>
✨XML DOM节点的克隆/复制操作
<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").getElementsTagName("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>
✨XML DOM节点的替换
同样是三步:
1)获取id属性值为did的节点对象
2)获取id属性值为mid节点中的所有图片img元素节点
3)在遍历图片节点时,绑定鼠标双击事件
<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].onclick = function(){
//子节点替换,将克隆的图片放到指定id元素中
did.replaceChild(this.cloneNode(),did.firstChild);
}
}
</script>
✨XML DOM操作select选项
<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>
✨XML DOM操作table 表格
<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 = '<button οnclick="dodel(this)">删除</button>';
tr.appendChild(td);
//将行节点tr放置到tbody中
tbody.appendChild(tr);
//清空表单
document.myform.reset();
return false;
}
</script>