2007-04-28

javascript控制html dom

关键字: javascript

逛了一下http://www.w3schools.com，得到几个比较有用的javascript函数：

1、新建一个dom元素，参数为标签名——document.createElement("tagName")

2、把一个元素添加到某个元素下面——parentElement.appendChild(childElement)

3、获得父元素——childElement.parentNode

4、获得第一个子元素——parentElement.firstChild

5、获得所有的标签为tag的子元素——parentElement.getElementsByTagName("tag")

6、还有就是大家熟悉的document.getElementById("xid")和document.getElementsByName("yname")

顺便写个例子巩固一下：

样例
  1. >  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE> javascript 测试 TITLE>  
  5.   <META NAME="Generator" CONTENT="EditPlus">  
  6.   <META NAME="Author" CONTENT="">  
  7.   <META NAME="Keywords" CONTENT="">  
  8.   <META NAME="Description" CONTENT="">  
  9.   <SCRIPT LANGUAGE="JavaScript">  
  10.   
  11.     //列表内容   
  12.     var listItems=['aaa','bbb','ccc','ddd','eee'];   
  13.   
  14.     //创建一个ol列表，上面的数组为每个li的内容   
  15.     function createList()   
  16.     {   
  17.         var myol=document.createElement("ol");   
  18.         for(var it in listItems)   
  19.         {   
  20.             var tli=document.createElement("li");   
  21.             tli.innerHTML=listItems[it];   
  22.   
  23.             //鼠标单击时调用changeColor函数   
  24.             tli.onclick=changeColor;   
  25.             //鼠标双击时调用removeMe函数   
  26.             tli.ondblclick=removeMe;   
  27.   
  28.             myol.appendChild(tli);   
  29.         }   
  30.         document.body.appendChild(myol);   
  31.     }   
  32.   
  33.     function changeColor()   
  34.     {   
  35.         //changeColor是自己加的，考虑到undefinded也是false，所以没有初始化。   
  36.         //动态语言就是好，对象的属性和方法可以随便加。   
  37.         if(this.changeColor)   
  38.         {   
  39.             this.style.background="yellow";   
  40.             this.changeColor=false;   
  41.         }   
  42.         else   
  43.         {   
  44.             this.style.background="lightgreen";   
  45.             this.changeColor=true;   
  46.         }   
  47.     }   
  48.   
  49.     function removeMe()   
  50.     {   
  51.         //先找到父节点，再用父节点删除自己   
  52.         var p=this.parentNode;   
  53.         p.removeChild(this);   
  54.   
  55.         //如果这个ul元素下的li子元素已经删除光了，就把这个ul元素也删掉。   
  56.         if(p.getElementsByTagName('li').length==0)   
  57.         {   
  58.             p.parentNode.removeChild(p);   
  59.         }   
  60.     }   
  61.   SCRIPT>  
  62.  HEAD>  
  63.   
  64.  <BODY>  
  65.     <button onclick="createList()">创建列表button>  
  66.  BODY>  
  67. HTML>  
评论
白发红颜 2007-04-30
Dom.这是Dom规范要实现的东西. 不只Javascript, 在.net里操作XML一样会用到getElementById()
just4you 2007-04-30
像getElementById(),getElementsByTagName()这类方法应该归到javascript里还是归到DOM里？
sp42 2007-04-28
w3cshcool办得不错，其文章言骇意简－－当初学XML，用WEBZIP把整个w3cshool拉下来
aninfeel
搜索本博客
博客分类
最近加入圈子
最新评论
评论排行榜