DOM

来源：互联网发布：windows xp 纯净版u盘编辑：程序博客网时间：2024/05/21 07:04

DOM

1.定义：是Document Object Model 文档对象模型的缩写。是一种类型与浏览器、平台、语言无关的接口，使得你可以访问页面其他标准组件。

2.文档结点元素结点属性结点文本结点总之一切都是结点

3.NODE接口的特性和方法
特性方法返回类型说明
-nodeName String 节点的名字
-nodeValue
-nodeType
-ownerDocument Document指向这个结点所属的文档
-firstChild
-lastChild
-previousSibling
-nextSibling
.......

4.查找元素节点
-getElementById(“id”) 无，则返回null
var xxxObj = document.getElementById("xxx");
只能用于document对象
-getElementsByName("xxxName");（得到是集合）
-getElementsByTagName("xxxName")（得到是集合）
element.getElementByTagName();
注意：不一定是document.getElementByTagName()
可以是其它元素如：selectObj.getElementByTagName("option");

5.替换节点
-replaceChild()
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换那个子节点的引用指针
如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中
6.属性结点
-getAttribute()
var attributeValue = element.getAttribute("attributeName");
-setAttribute()
element.setAttribute("attributeName","attributeValue");
注意：如果存在，则它的值被刷新，否则，创建这个属性再赋值
7.创建新元素节点
-createElement()
var reference = document.createElement("element");
返回值是一个新元素节点，它不会自动添加到文档里
它没有nodeParent属性，它只是一个存在于Javascript上下文对象
例子：
var pEle = document.createElement("p");
-createTextNode()(文本结点)
例子：var textEle = document.createTextNode("hello");

8.插入节点
-appendChild()
var newreference = element.appendChild(newChild);
把newChild添加到element中的最后一个节点
-insertBefore()
var reference = element.insertBefore(newNode,targetNode);
把newNode插入到targetNode之前
9.parentNode属性（返回给定结点的父结点）
返回节点永远是元素节点
document结点没有父结点
10.nextSibling属性
返回给定结点的下一个兄弟节点
11.previousSibling属性
上一个兄弟节点
12.lastChild、firstChild属性
13.removeChild()
var reference = element.removeChild(node);
14.innerHTML属性
-几乎所有的浏览器都支持该属性，但不是DOM标准的组成部分
-innerHTML属性可以用来读、写某个给定元素里的HTML内容
xxx.innerHTML="hello"
15.复选框
选中
-setAttribute("checked","checked");
-checkEle.checked="checked";
没选中
-setAttribute("checked",null);
-checkEle.checked=null
反选
-checkEle.checked=!checkEle.checked

16.选择框
/*-------------------------------------------------例子-----------------------------------------------*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
<table align="center">
<tr>
<td>
<select name="select" multiple="multiple" size=10 id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>

<td width="68" valign="middle">
<input name="add" id="add" type="button" value="-->"/>
<input name="add_All" id="add_All" type="button" value="==>"/>
<input name="remove" id="remove" type="button" value="<--"/>
<input name="remove_All" id="remove_All" type="button" value="<=="/>
</td>

<td>
<select name="second" size=10multiple="multiple" id="second">
<option value="选项9">选项9</option>
</select>

</td>
</tr>
</table>
</body>
<script>
window.onload=function(){
/*-----------------------------------------------------------------------------------------------------*/
//选中从左端移到右端
document.getElementById("add").onclick=function(){
//获取左端的<select>
var firstEle = document.getElementById("first");

//获取option
var optionEles = firstEle.getElementsByTagName("option");
var len = firstEle.length;

//获取右端的select
var secondEle = document.getElementById("second");

//遍历option
for(var i=0;i<len;i++){
/*
*firstElement.selectedIndex:
*表示当前选中的option的索引值从0开始
*如果没有被选中，selectedIndex=-1
*如果多个被选中，selectedIndex永远是第一个被选中的值
*动态数组
*
*/

if(firstEle.selectedIndex!=-1){
// alert(firstEle.selectedIndex);
secondEle.appendChild(optionEles[firstEle.selectedIndex]);
}
}
}
/*----------------------------------------------------------------------------------------------------------*/
//全部从左端移到右端
document.getElementById("add_All").onclick=function(){
var firstEle = document.getElementById("first");
var optionEles = firstEle.getElementsByTagName("option");
var len = firstEle.length;
var secondEle = document.getElementById("second");
for(var i=0;i<len;i++){
secondEle.appendChild(optionEles[0]);
}
}
/*---------------------------------------------------------------------------------------------------------*/
//双击从左端移到右端
/*document.getElementById("first").ondblclick=function(){
var firstEle = document.getElementById("first");
var optionEles = firstEle.getElementsByTagName("option");
var len = firstEle.length;
var secondEle = document.getElementById("second");
for(var i=0;i<len;i++){
secondEle.appendChild(optionEles[firstEle.selectedIndex]);
}
}*/

//简化
//双击从左端移到右端
document.getElementById("first").ondblclick=function(){
var secondEle = document.getElementById("second"); secondEle.appendChild(this[this.selectedIndex]);
}

/*----------------------------------------------------------------------------------------------------------*/
//选中从右端移到左端
document.getElementById("remove").onclick=function(){
var secondEle = document.getElementById("second");
var firstEle = document.getElementById("first");
var optionEles = secondEle.getElementsByTagName("option");
var len = secondEle.length;
for(var i=0;i<len;i++){
if(secondEle.selectedIndex!=-1){
firstEle.appendChild(optionEles[secondEle.selectedIndex]);
}
}
}

/*-----------------------------------------------------------------------------------------------------------*/
//全部从右端移到右端
document.getElementById("remove_All").onclick=function(){
var secondEle = document.getElementById("second");
var firstEle = document.getElementById("first");
var optionEles = secondEle.getElementsByTagName("option");
var len = secondEle.length;
for(var i=0;i<len;i++){
firstEle.appendChild(optionEles[0]);
}
}
/*----------------------------------------------------------------------------------------------------------*/
//简化
//双击从左端移到右端
document.getElementById("second").ondblclick=function(){
var firstdEle = document.getElementById("first"); firstdEle.appendChild(this[this.selectedIndex]);
}
}
</script>
</html>
/*-------------------------------------------------------------------------------------------------------------------------*/

17.选择框的应用例子：
/*---------------------------------------------------html文件---------------------------------------------------------------*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
<select id="province" name="province">
<option value="">请选择省份...</option>
<option value="吉林省">吉林省</option>
<option value="辽宁省">辽宁省</option>
<option value="山东省">山东省</option>
</select>

<select id="city" name="city">
<option value="">请选择...</option>
</select>
</body>
<script>
window.onload=function(){
var provinceEle = document.getElementById("province");
provinceEle.onchange=function(){
//调用函数，获取xml文件
var xmlDoc = parseXML("cities.xml");
//获取省份
var provinceXmlEle = xmlDoc.getElementsByTagName("province");

/*
* 动态的把city添加到对应省的city中
*/
for(var i=0;i<provinceXmlEle.length;i++){
if(this.value==provinceXmlEle[i].getAttribute("name")){
//获取html中的city元素
var cityEle=document.getElementById("city");
//获取xml中对应省份的city
var cityEle2 = provinceXmlEle[i].getElementsByTagName("city");
var temp="";
for(var i=0;i<cityEle2.length;i++){
temp += "<option>"+cityEle2[i].childNodes[0].nodeValue+"</option>";
}
cityEle.innerHTML=temp;
}
}
}

}

//解析xml文件的函数，查看W3cSchool的xml文档
function parseXML(fileXmlName){
var xmlDoc;
try{ //Internet Explorer
//创建一个空的 XML 文档对象
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}catch(e){
try{ //Firefox, Mozilla, Opera, etc.
////创建一个空的 XML 文档对象
xmlDoc=document.implementation.createDocument("","",null);
}
catch(e) {}
}
//关闭异步加载
xmlDoc.async=false;
//解析器加载名为 "fileXmlNamel"的XML文档
xmlDoc.load(fileXmlName);
return xmlDoc;
}
</script>
</html>
/*----------------------------------------------xml文件------------------------------------------------------------------------------*/
<?xml version="1.0" encoding="GB2312"?>
<china>
<province name="吉林省">
<city>长春</city>
<city>四平</city>
<city>松原</city>
<city>通化</city>
</province>
<province name="辽宁省">
<city>沈阳</city>
<city>大连</city>
<city>鞍山</city>
<city>抚顺</city>
<city>铁岭</city>
</province>
<province name="山东省">
<city>济南</city>
<city>青岛</city>
<city>威海</city>
<city>烟台</city>
<city>潍坊</city>
</province>
</china>
/*--------------------------------------------------------------------------------------------*/

18.动态表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script>
window.onload=function(){
document.getElementById("addUser").onclick=function(){
//alert("hello");
/***********************************************************************/
//获取文本框的值
var nameValue=document.getElementById("name").value;
var emailValue=document.getElementById("email").value;
var telValue=document.getElementById("tel").value;

/************************************************************************/
//创建nametd
var nameTd=document.createElement("td");
//创建文本
var nameText=document.createTextNode(nameValue);
nameTd.appendChild(nameText);

//创建emailtd
var emailTd=document.createElement("td");
var emailText=document.createTextNode( emailValue);
emailTd.appendChild(emailText);

//创建telTd
var telTd=document.createElement("td");
var telText=document.createTextNode(telValue);
telTd.appendChild(telText);

//创建aTd
var aTd=document.createElement("td");
var aEle=document.createElement("a");
aEle.setAttribute("href","tableTest.html?id="+nameValue);
var deleteText=document.createTextNode("delete");
aEle.appendChild(deleteText);
aTd.appendChild(aEle);

//创建tr
var trEle=document.createElement("tr");
trEle.appendChild(nameTd);
trEle.appendChild(emailTd);
trEle.appendChild(telTd);
trEle.appendChild(aTd);

//增加tbody到table上
var tabEle = document.getElementById("usertable");
//为了跨浏览器而创建tbody
var tbodyEle=document.createElement("tbody");
tbodyEle.appendChild(trEle);
tabEle.appendChild(tbodyEle);
/*************************************************************/
//删除
aEle.onclick=function(){
//alert("hello");
return delTr(aEle);

}
/***************************************************************/
}
}

//删除行的函数
function delTr(aEle){
var name=aEle.parentNode.parentNode.firstChild.innerHTML;
var flag=window.confirm("你确定删除【"+name+"】吗");
if(!flag){
//使网页失效
return false;
}
//删除
//获取tbody
var tbodyEle=aEle.parentNode.parentNode.parentNode;
//获取tr
var trEle=aEle.parentNode.parentNode;
//删除
tbodyEle.removeChild(trEle);
//使网页失效
return false;
}
</script>
</head>

<body>
<center>
添加用户<br>
姓名:<input type="text" name="name" id="name">  
email:<input type="text" name="email" id="email">  
电话:<input type=""text" name="tel" id="tel"><br>
<button id="addUser">提交</button>
<br><br>
<hr>
<br><br>
<table id="usertable" border="1">
<tbody>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th> </th>
</tr>

<tr>
<td>lvy</td>
<td>11111@qq.com</td>
<td>8888888888</td>
<td><a href="tableTest.html?id=lvy">delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>