概述：DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言
方式视图：
一、节点详解
a) 元素节点
只有元素节点有childNodes，只有它有子节点
nodeName：元素标签名称 nodeType：1 nodeValue：null
b) 属性节点
nodeName：属性名 nodeType：2 nodeValue：属性值
c) 文本节点
nodeName：#text nodeType：3 nodeValue：文本内容
二、主要的方法：
根据id属性获取节点：getElementById()
根据name属性获取节点集合：getElementsByName() 只能是document调用
根据标签名获取节点集合：getElementsByTagName()
判断此元素节点是否有子节点：hasChildNodes()
把一个给定父元素里的一个子节点替换为另一个子节点 replaceChild(new,old)
获取指定的属性节点的值 getAttribute(attibutename)
设置指定的属性节点的值 setAttribute(attibutename,value)
按照给定的标签名创建一个元素节点 createElement(elementname)
按照给定的文本内容创建一个文本节点 createTextNode()
为给定元素增加一个子节点 appendChild(node)
把一个给定节点插入到一个给定元素节点的给定子节点的前面 insertBefore(new,target)
从一个给定元素中删除一个子节点removeChild(node)
三、主要的属性：
documentElement 返回的是根节点 也就是html标签的节点
nodeName 返回节点的名称
nodeType 返回节点的类型
nodeValue 返回节点的值
childNodes 返回一个数组，这个数组由给定元素的子节点构成
firstChild 返回一个给定元素节点的第一个子节点
lastChild： 返回一个给定元素节点的最后一个子节点
nextSibling: 返回一个给定节点的下一个兄弟节点
parentNode：返回一个给定节点的父节点
previousSibling：返回一个给定节点的上一个兄弟节点
innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。
四、做了一个关于dom实现的分页操作实例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>example01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div align="center">
<div>
<h1>
添加用户
</h1>
用户名:
<input type="text" name="uname" id="uname" />
<br />
性别:
<input type="text" name="usex" id="usex" />
<br />
年龄:
<input type="text" name="uage" id="uage" />
<br />
<input type="button" value="添加" id="add" />
</div>
<div id="showUsers">
<table id="tuses" border="1px" bordercolor="red">
<thead>
<tr>
<th>
用户名
</th>
<th>
性别
</th>
<th>
年龄
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="users">
</tbody>
</table>
<!-- 作业实现 -->
<div id="page"></div>
</div>
</div>
</body>
<script type="text/javascript">
<!--
var countSize=0;//总记录
var countPage=0;//总页数
var startSize=0;//开始记录数
var endSize=0;//结束的记录数
var nowpage=1; //当前页
var pagesize=3;//每页显示的记录数
var arrTR =[];//声明添加的数组
//当窗体 加载完毕之后 触发匿名函数
window.onload = function (){
//获取按钮
var addNode = get("add");
//获取要添加的父节点
var usersNode=get("users");
//获取分页实现的父节点
var pageNode = get("page");
//注册按钮事件
addNode.onclick = function (){
//创建每条记录所对应的行数
createTr(usersNode);
//添加分页的实现操作
if(countSize>0&&(!pageNode.hasChildNodes())){
//创建分页模块
//首页
var startPageNode = document.createElement("a");
startPageNode.setAttribute("href","#");
startPageNode.appendChild(document.createTextNode("首页"));
//上一页
var backPageNode = document.createElement("a");
backPageNode.setAttribute("href","#");
backPageNode.appendChild(document.createTextNode("上一页"));
//下一页
var nextPageNode = document.createElement("a");
nextPageNode.setAttribute("href","#");
nextPageNode.appendChild(document.createTextNode("下一页"));
//末页
var lastPageNode = document.createElement("a");
lastPageNode.setAttribute("href","#");
lastPageNode.appendChild(document.createTextNode("末页"));
var spanNode = document.createElement("span");
spanNode.setAttribute("id","pageSpan");
var data = "当前是"+nowpage+"页,总共"+countSize+"条记录";
spanNode.innerHTML=data;
//将分页节点添加到指定的父节点中
pageNode.appendChild(startPageNode);
pageNode.appendChild(backPageNode);
pageNode.appendChild(nextPageNode);
pageNode.appendChild(lastPageNode);
pageNode.appendChild(spanNode);
//为每个连接 ===添加点击事件
//首页
startPageNode.onclick =function(){
//改变当前页
nowpage=1;
//合理计算出 开始的记录数和结束的记录数
//计算出开始记录数
startSize=(nowpage-1)*pagesize;
//计算出结束记录数
//判断 当前页是否为最后一页 //3
if(nowpage==countPage){
endSize=countSize-1;
}else{
endSize=(nowpage-1)*pagesize+2;
}
//在这里合理显示即可
showUsers(startSize,endSize,usersNode);
changeText();
};
//上一页
backPageNode.onclick =function(){
//改变当前页
nowpage=nowpage-1;
if(nowpage<=1){
nowpage=1;
}
//合理计算出 开始的记录数和结束的记录数
//计算出开始记录数
startSize=(nowpage-1)*pagesize;
//计算出结束记录数
//判断 当前页是否为最后一页
if(nowpage==countPage){
endSize=countSize-1;
}else{
endSize=(nowpage-1)*pagesize+2;
}
//在这里合理显示即可
showUsers(startSize,endSize,usersNode);
//改变文本
changeText();
};
//下一页
nextPageNode.onclick =function(){
nowpage=nowpage+1;
if(nowpage>=countPage){
nowpage=countPage;
}
//合理计算出 开始的记录数和结束的记录数
//计算出开始记录数
startSize=(nowpage-1)*pagesize;
//计算出结束记录数
//判断 当前页是否为最后一页
if(nowpage==countPage){
endSize=countSize-1;
}else{
endSize=(nowpage-1)*pagesize+2;
}
//在这里合理显示即可
showUsers(startSize,endSize,usersNode);
//改变文本
changeText();
};
//最后一页
lastPageNode.onclick =function(){
nowpage=countPage;
//合理计算出 开始的记录数和结束的记录数
//计算出开始记录数
startSize=(nowpage-1)*pagesize;
//计算出结束记录数
//判断 当前页是否为最后一页
if(nowpage==countPage){
endSize=countSize-1;
}else{
endSize=(nowpage-1)*pagesize+2;
}
//在这里合理显示即可
showUsers(startSize,endSize,usersNode);
//改变文本
changeText();
};
//这里也需要添加 计算出的开始记录数，结束记录数， 调用 showUsers方法 并传递相应的参数
}else{
changeText();
}
};
};
//显示tr
function showUsers(startSize,endSize,usersNode){
//清空node
// usersNode.childNodes.length=0;
usersNode.innerHTML="";
//在这里实现显示的效果
for(var i=startSize;i<=endSize;i++){
usersNode.appendChild(arrTR[i]);
}
}
//改变显示的文本内容
function changeText(){
var data = "当前是"+nowpage+"页,总共"+countSize+"条记录";
//重新获取
var spanNode = document.getElementById("pageSpan");
spanNode.innerHTML=data;
}
//获取指定的id的节点对象
function get(id){
return document.getElementById(id);
}
//创建tr对象
function createTr(usersNode){
//创建tr对象
var tr = document.createElement("tr");
//创建td对象
var td1 = document.createElement("td");
//创建td的文本对象
var td1Text = document.createTextNode(get("uname").value);
//文本对象添加到td中
td1.appendChild(td1Text);
var td2 = document.createElement("td");
//创建td的文本对象
var td2Text = document.createTextNode(get("usex").value);
//文本对象添加到td中
td2.appendChild(td2Text);
//创建td的文本对象
var td3 = document.createElement("td");
//创建td的文本对象
var td3Text = document.createTextNode(get("uage").value);
//文本对象添加到td中
td3.appendChild(td3Text);
var td4 = document.createElement("td");
//添加按钮
//创建按钮
var delNode = document.createElement("button");
// delNode.setAttribute("value","删除");
delNode.appendChild(document.createTextNode("删除"));
//删除事件
delNode.onclick = function(){
var nowTr=this.parentNode.parentNode;
startSize=(nowpage-1)*pagesize;
if(nowTr.previousSibling){
if(nowTr.previousSibling.previousSibling){
//表示此行为第三行
arrTR=remove(arrTR,startSize+2);
}else{
//表示此行为第二行
//arrTR.splice(startSize+1,startSize+1);
arrTR=remove(arrTR,startSize+1);
}
}else{
//表示此行为第一行
arrTR=remove(arrTR,startSize);
//arrTR.splice(startSize,startSize);
}
countSize=arrTR.length;
countPage=Math.ceil(countSize/pagesize);
if(nowpage>countPage){
nowpage=countPage;
}
//计算出开始记录数
startSize=(nowpage-1)*pagesize;
//计算出结束记录数
//判断 当前页是否为最后一页
if(nowpage==countPage){
endSize=countSize-1;
}else{
endSize=(nowpage-1)*pagesize+2;
}
//在这里合理显示即可
showUsers(startSize,endSize,usersNode);
changeText();
// usersNode.removeChild(this.parentNode.parentNode);//tr;
};
var upNode = document.createElement("button");
//upNode.setAttribute("value","修改");
upNode.appendChild(document.createTextNode("修改"));
//修改操作完成
upNode.onclick = function(){
var td_age=this.parentNode.previousSibling;
td_age.replaceChild(createInput(td_age),td_age.childNodes[0]);
var td_sex=td_age.previousSibling;
td_sex.replaceChild(createInput(td_sex),td_sex.childNodes[0]);
var td_name=td_sex.previousSibling;
inputNode=document.createElement("input");
td_name.replaceChild(createInput(td_name),td_name.childNodes[0]);
//注册文本框事件监听
};
td4.appendChild(delNode);
td4.appendChild(upNode);
//把td添加到tr中
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
/*把tr添加到tbody中
usersNode.appendChild(tr);
//获取里边的所有的tr节点对象
var trs = usersNode.getElementsByTagName("tr");
//获取总记录数
countSize = trs.length;
*/
//把tr添加到数组中
countSize = arrTR.push(tr);
//alert(countSize);
countPage=Math.ceil(countSize/pagesize);
//计算出开始记录数
startSize=(nowpage-1)*pagesize;
//计算出结束记录数
if(nowpage==pagesize){
endSize=countSize-1;
}else{
endSize=(nowpage-1)*pagesize+2;
}
showUsers(startSize,endSize,usersNode);
}
//创建文本框的方法
function createInput(node){
var inputNode=document.createElement("input");
inputNode.setAttribute("type", "text");
inputNode.setAttribute("name", "update");
inputNode.setAttribute("value", node.childNodes[0].nodeValue);
inputNode.οnblur=function(){
var value=this.value;
node.replaceChild(document.createTextNode(value),this);
};
return inputNode;
}
//自定义方法，用来计算开始记录数与结束记录数。并调用显示方法
//此方法没有被调用，可以删除，也可以在分页和删除中调用来精简代码
function compute(startSize,endSize,usersNode){
//计算出开始记录数
startSize=(nowpage-1)*pagesize;
//计算出结束记录数
//判断 当前页是否为最后一页
if(nowpage==countPage){
endSize=countSize-1;
}else{
endSize=(nowpage-1)*pagesize+2;
}
//在这里合理显示即可
showUsers(startSize,endSize,usersNode);
changeText();
}
//删除数组指定坐标的元素并返回新的数组
function remove(arr,index){
var array=[];
for(var i=0;i<arr.length;i++){
if(i!=index){
array.push(arr[i]);
}
}
return array;
}
//-->
</script>
</html>
267
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
