Dom初步

最新推荐文章于 2025-08-22 13:39:56 发布

cxzhq2002

最新推荐文章于 2025-08-22 13:39:56 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript table function html border xmlhttprequest

本文链接：https://blog.youkuaiyun.com/cxzhq2002/article/details/839329

本文介绍了多个关于DOM操作的示例，包括节点遍历、插入数据、节点替换及翻转等，并展示了如何使用Microsoft.XMLDOM对象读取XML文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//Dom初步

<HTML>
<HEAD>
<TITLE> Simple DOM Demo </title>
</HEAD>
<BODY ID="bodyNode"><P ID = "p1Node">This is paragraph 1.</P>
This is the document body
<P ID = "p2Node"> </P>
<P ID = "p3Node"></P>
<SCRIPT LANGUAGE="JavaScript">
alert(
"bodyNode.firstChild.nodeName = " + bodyNode.firstChild.nodeName + "/n" +
"bodyNode.firstChild.data = " + bodyNode.childNodes[0].childNodes[0].nodeValue + "/n" +
"bodyNode.childNodes[0].nodeName = " + bodyNode.childNodes[0].nodeName + "/n" +
"bodyNode.childNodes[1].nodeName = " + bodyNode.childNodes[1].nodeName + "/n" +
"bodyNode.childNodes[1].data = " + bodyNode.childNodes[1].data + "/n" +
"bodyNode.childNodes[3].nodeName = " + bodyNode.childNodes[3].nodeName + "/n" +
"bodyNode.childNodes[4].nodeName = " + bodyNode.childNodes[4].nodeName + "/n" +
"p1Node.nextSibling.nodeName = " + p1Node.nextSibling.nodeName + "/n" +
"p1Node.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nodeName + "/n" +
"p1Node.nextSibling.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nextSibling.nodeName+ "/n" +
"p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName = " +
p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].data + "/n" +
"p1Node.parentNode.nodeName = " + p1Node.parentNode.nodeName + "/n" +
"p2Node.parentNode.nodeName = " + p2Node.parentNode.nodeName + "/n" +
"p3Node.parentNode.nodeName = " + p3Node.parentNode.nodeName + "/n" +
"bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName = " +
bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName + "/n");
</SCRIPT>
</BODY>
</HTML>

//用递归遍历整个书

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset = gb2312">
<TITLE> New Document </TITLE>
<script language="javascript">
var elementName="";

//采用recursion
function countTotalElement(node){
var total=0;
if(node.nodeType == 1){
total++;
elementName = elementName + node.tagName +"/r/n";
}
var childrens = node.childNodes; //递归

for(var i=0; i< childrens.length; i++){//childrens.length是出口，即如果到页项后，length是0
total += countTotalElement(childrens[i]);//到子树项
}
return total;
}
</script>
</HEAD>
<BODY>
<p><br>adf</p>asdf
<a href="javascript: void(0)" onClick ="alert('标记总数：' + countTotalElement(document.documentElement) + '/r/n全部标记如下:/r/n' + elementName); elementName='';">开始统计</a>
</BODY>
</HTML>

//用dom插入数据

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset = gb2312">
<TITLE> New Document </TITLE>
<script language="javascript">
function insertStr(){
var f = document.form1;
var value = f.str.value;
if(value !=""){
var text = document.createTextNode(value); //textNode
var td = document.createElement("td");
var tr = document.createElement("tr");
var tbody = document.createElement("tbody");
td.appendChild(text);
tr.appendChild(td);
tbody.appendChild(tr);
var parNode = document.getElementById("table1");
parNode.insertBefore(tbody, parNode.firstChild); //insertBefor on 最前面
//parNode.appendChild(tbody);

alert(parNode.innerHTML)
}
}
</script>
</HEAD>
<BODY>
<form name="form1" method="post" action="">
<input name="str" type="text" id="str">
<input name="insert" type="button" id="insert" value="留言" onClick="insertStr();">
</form>
<table width="400" border="1" id="table1">
<tbody>
<tr>
<td>网友留言列表</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>

//用Dom插入节点

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset = gb2312">
<TITLE> New Document </TITLE>
<script language="javascript">
function replaceContent(){
var table1=document.getElementsByTagName("table")[0];
var table2=document.getElementsByTagName("table")[1];
var kid1=table1.firstChild.firstChild.firstChild
var kid2=table2.firstChild.firstChild.firstChild;
//var reKid1 = kid1.firstChild; //replace
//var reKid2 = kid1.firstChild;

var tempK1=kid1.firstChild;
var tempK2=kid2.firstChild;
try{
var c1 = kid1.removeChild(tempK1); //retrun removeChild
var c2 = kid2.removeChild(tempK2); //retrun removeChild
kid2.appendChild(c1);
kid1.appendChild(c2);

//kid1.replaceChild(repKid2, repKid1); //如果采用替换只能一个，因为表格二已经被改变，由此所知，replace相当于重新赋值.a=1;a=2;
//而MSSQL update有点不一样，先del, 然后insert
//kid2.replaceChild(repKid1, repKid2);
}
catch(e)
{
alert(e);
}
}
</script>
</HEAD>
<BODY>
<table width="200" border="1" cellpadding="4" cellspacing="0" id=aa>
<tr>
<td>表格一</td>
</tr>
</tr>
</table>
<table width="200" border="1" cellpadding="4" cellspacing="0">
<tr>
<td>表格二</td>
</tr>
</tr>
</table>
<br>
<input type="button" name="reverse" value="开始颠倒" onClick="replaceContent()">
</BODY>
</HTML>

//翻转整棵树

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset = gb2312">
<TITLE> New Document </TITLE>
<script language="javascript">
function reverseTable(){
var node = document.getElementsByTagName("table")[0];
var child = node.getElementsByTagName("tr");
var newChild = new Array(); //temp, save textNode
for(var i=0; i<child.length; i++){
newChild[i] = child[i].firstChild.innerHTML;//innerHTML and innerText only IE
}

node.removeChild(node.childNodes[0]);//tbody
var header= node.createTHead(); //thead, 不是很明白
for(var i=0; i<newChild.length;i++){
var headerrow = header.insertRow(i); //tr
var cell = headerrow.insertCell(0); //td
cell.appendChild(document.createTextNode(newChild[newChild.length-i-1])); //textNode, 翻转整树,只需翻转根节点的一级子节点即可
}
}
</script>
</HEAD>
<BODY>
<table width="200" border="1" cellpadding="4" cellspacing="0">
<tr>
    <td>第一行</td>
</tr>
<tr>
    <td>第二行</td>
</tr>
<tr>
    <td>第三行</td>
</tr>
<tr>
    <td>第四行</td>
</tr>
</table>
<br>
<input type="button" name="reverse" value="开始颠倒" onClick="reverseTable()">
</BODY>
</HTML>

//用Microsoft.XMLDOM对象读取xml文件

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//HTML中加入xml可使用三种方法1.用Javascript创建ActiveXObjcet对象,然后open send, Ajax必须是IIS Application
//2.<object WIDTH="0" HEIGHT="0"
//CLASSID="clsid:550dda30-0541-11d2-9ca9-0060b0ec3d39" ID="xmldso">
//</object>
// 3. <xml></xml>数据岛
xmlDoc.async="false";
xmlDoc.load("employees.xml");
nodes = xmlDoc.documentElement.childNodes[0];
name.innerText = nodes.getAttributeNode("name").nodeValue;
job.innerText = nodes.getElementsByTagName("job")[0].firstChild.data;
salary.innerText = nodes.getElementsByTagName("salary")[0].firstChild.data;
</script>

<title>在HTML中调用XML数据</title>
</head>
<body bgcolor="#FFFFFF">
<b>名字: </b>
<span id="name"> </span>
<b>职位: </b>
<span id="job"></span>
<b>薪水: </b>
<span id="salary"></span>
</body>
</html>

//employees.xml

<?xml version="1.0" encoding="gb2312"?>
<employees>
<employee name="J.Doe">
<job>Programmer</job>
<salary>32768</salary>
</employee>
<employee name="A.Baker">
<job>Sales</job>
<salary>7000</salary>
</employee>
</employees>

//另外一种方法,是用Ajax获取,然后用xmldoc来加载数据

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset = gb2312">
<TITLE> xmldom </TITLE>
<script language="javascript">
function loadXML(handler){
var url="http://localhost/employees.xml";
if(document.implementation && document.implementation.createDocument){
var xmldoc = document.implementation.createDocument("","",null);
xmldoc.onload=handler(xmldoc,url);
xmldoc.load(url);
}
else if(window.ActiveXOject){
var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.onreadystatechange = function(){
if(xmldoc.readyState ==4) handle(xmldoc,url);
}
xmldoc.load(url);
}
}

function makeTable(xmldoc,url){
var table =document.createElement("table");
table.setAttribute("border", "1");
table.setAttribute("width", "600");

var caption ="Employee Data From" + url;
table.createCaption().appendChild(document.createTextNode(caption));
var header = table.createTHead();
var headerrow = header.insertRow(0);
headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
headerrow.insertCell(1).appendChild(document.createTextNode("职业"));
headerrow.insertCell(2).appendChild(document.createTextNode("工资"));
var employees = xmldoc.getElementsByTagName("employee");
for(var i=0; i<employees.length;i++){
var e=employees[i];
var name = e.getAttribut("name");
var job = e.getElementsByTagName("job")[0].firstChild.data;
var salary =e.getElementsByTagName("salary")[0].firstChid.data;
var row = table.insert(i+1);
row.insertCell(0).appendChild(document.createTextNode(name));
row.insertCell(1).appendChild(document.createTextNode(job));
row.insertCell(2).appendChild(document.createTextNode(salary));
}
}
</script>
</HEAD>
<BODY onload="loadXML(makeTable)">
</BODY>
</HTML>

//invokeEmployees.html, 用Responsexml获取xml数据...

HTML
HEAD
meta http-equiv=Content-Type content=texthtml; charset = gb2312
TITLE xmldom TITLE
script language=javascript
var http_request=false;
function send_request(method,url){
http_request=false;

inital HttpRequest
if(window.XMLHttpRequest){Mozilla
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType){set MIME
http_request.overrideMimeType(textxml);
}END SET MIME
}
else if(window.ActiveXObject){IE Browser，Use Lasted version

if(!http_request){Error, Creat object fail
window.alert(Cannot create an XMLHTTP instance)
return false;
}
http_request.onreadystatechange = processRequest;
get post or head, and asychFlag
http_request.open(method, url,true);
http_request.send(null);
} End send_request()