使用javascript操作DOM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META CONTENT="EditPlus">
<META CONTENT="">
<META CONTENT="">
<META CONTENT="">
</HEAD>
<style language="javascript" type="text/css">
 .declared{
  color:red;
  font-family: arial;
  font-weight: normal;
  font-size: 16px;
 }
 .programmed{
  color: blue;
  font-family: helvetica;
  font-size: 10px;
 }
</style>
<BODY>
<p >hello</p>
<div ></div>
</BODY>
<script language="javascript">
 window.onload=function(){
  var hello = document.getElementById('hello');
  hello.className='declared';

  var empty = document.getElementById('empty');
  addNode(empty,"reader of");
  addNode(empty,"Ajax in Action!");

  var children = empty.childNodes;
  for (var i=0;i<children.length;i++){
   children[i].className='programmed';
  }

  empty.style.border = 'solid green 2px';//直接为节点设置样式
  empty.style.width = '200px';
 }

 function addNode(el,text){
  var childEl = document.createElement("div");//创建新元素
  el.appendChild(childEl);
  var txtNode = document.createTextNode(text); //创建文本元素
  childEl.appendChild(txtNode);
 }
</script>
</HTML>
posted @ 2007-12-30 17:47  xin478  阅读(213)  评论(0编辑  收藏  举报