DOM动态操作HTML标签

最新推荐文章于 2024-08-11 00:22:53 发布

原创最新推荐文章于 2024-08-11 00:22:53 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #xmlhttprequest #function #date #email #null

Web2.0 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用JavaScript从XML文件中获取数据的方法，并演示了如何动态操作HTML页面元素及创建HTML标签。此外，还展示了利用XMLHttpRequest对象实现异步调用的过程。

下面几个简单的小例子，是我在学习JS时常用到的几个典例，IE和FF兼容。望对大家有所帮助。

//使用JS获取XML中的数据
function getXmlData(){
var e=(window.ActiveXObject?true:false);
var dom;
if(e){
  dom=new ActiveXObject("Microsoft.XMLDOM");
}else{
  dom=document.implementation.createDocument("","",null);
}
  dom.async=false;
  dom.load("test.xml");//该XML文件和该页面放在同一目录中，否则要写对路径
  try{
   var nodes=dom.getElementsByTagName("book");
   for(var i=0;i<nodes.length;i++){
    var title= dom.getElementsByTagName("title")[i].childNodes[0].nodeValue;
    var author= dom.getElementsByTagName("author")[i].childNodes[0].nodeValue;
    var email =dom.getElementsByTagName("email")[i].childNodes[0].nodeValue;
    var date = dom.getElementsByTagName("date")[i].childNodes[0].nodeValue;
    document.getElementById("title").innerHTML=title;
    document.getElementById("author").innerHTML=author;
    document.getElementById("email").innerHTML=email;
    document.getElementById("date").innerHTML=date;
   }

  }catch(E){alert(E);}
}
//动态操作页面元素
function nodeDemo(){
  //getElementsByTagName不能使用TagName属性
  var node=document.getElementById("div2");

  //判断该节点是否有子节点
  if(node.hasChildNodes()){
  var cnode=node.childNodes;//获取该节点下的所有子节点集合，返回的是一个数组
   for(var i=0;i<cnode.length;i++){
    //获取某子节点下的文本节点的值
    document.getElementById("1").innerHTML=cnode[i].childNodes[0].nodeValue;
    //获取子节点的你节点名称
    document.getElementById("2").innerHTML=cnode[i].parentNode.tagName;
    //获取子节点下的某属性的值
    document.getElementById("3").innerHTML=cnode[i].getAttributeNode("title");
    }
   }
     }
//使用JS创建HTML页面标签
function CreadeNodeDemo(){
   var divs=document.createElement("div");
   var spans=document.createElement("span");
    spans.setAttribute("title","abc");
    spans.text="这是通过代码赋值";
    alert(spans.text);
   divs.appendChild(spans);
   document.getElementById("createNode").appendChild(divs);
  }
//使用XMLHttpRequest对象进行异步调用
function createXmlHttpRequest(){
var httpRequest;

if (window.ActiveXObject) {
  httpRequest = new ActiveXObject("Microsoft.XMLHTTP")
}
else if (window.XMLHttpRequest) {
   httpRequest = new XMLHttpRequest();
}
  httpRequest.open("GET", "url", true);
  httpRequest.onreadystatechange=function(){
   if(httpRequest.status==200 && httpRequest.readyState==4){

   }
  }
  httpRequest.send(null);
}