javascript的一些总结(7)

[b]15.W3C DOM[/b]
访问DOM中的节点
parentNode( ).这个方法可以访问父节点。
firstChild( ).这个方法可以访问该节点的第一个子节点，不存在就返回空。
nextSibling( ). 这个方法可以访问下一个兄弟节点，不存在就返回空。
previousSibling( ). 这个方法可以访问上一个兄弟节点，不存在就返回空。
文档方法
getElementsByTagName(elementname):取得一个在文件或是某一部分文件中具有这
个名字的所有元素的列表；创建了这样的NodeList,就可以通过索引来访问这些命
名了的节点了。
createElement( )方法：将新元素的标记名做为参数，所创建的元素对象可以接
受属性及取值。
createDocumentFragment( )方法：创建一个documentFragment节点。
createTextNode( )、createComment( )和createCDATASection( )方法：创建如它们
名字所示的节点，它们的参数将成为节点内容的字符串。
节点的方法
insertBefore( )方法：将新的子节点插入到引用子节点并返回new_node:
dummy = node_object.insertBefore(new_node,reference_node)
这时dummy包含被插入的节点的一个副本。
replaceChild( )方法：替换子节点并返回被替换的节点
dummy = node_object.replaceChild(new_node,reference_node)
这时dummy包含被插入的节点的一个副本。
removeChild( )方法：删除被引用的子节点并返回被删除的节点
dummy = node_object.removeChild(reference_node)
这时dummy包含被删除的节点的部分。
appendChild( )方法：将新节点加入到其他子节点的后面并返回新节点
dummy = node_object.appendChild(new_node)
这时dummy包含新节点的一个副本。
hasChildNodes( )方法：返回一个布尔值，它是给定节点是否有子节点的测试结果。
cloneNode( )方法：建立被Clone节点的一个副本，用true和false做为参数
True：除Clone元素本身外，还Clone它的所有内容
False：仅Clone元素本身。
Clone的节点是一个孤儿。
显示和隐藏对象
Object.style.visibility = “hidden”;
Object.style.visibility = “visible”;
显示和隐藏对象的例子

<script language="Javascript" type="text/javascript">
function ShowHide() {
if (!document.getElementById) return;
   var head1 = document.getElementById("head1");
   var head2 = document.getElementById("head2");
   var showhead1 = document.form1.head1.checked;
   var showhead2 = document.form1.head2.checked;
   head1.style.visibility=(showhead1) ? "visible" : "hidden";
   head2.style.visibility=(showhead2) ? "visible" : "hidden";
}
</script>
</head>

<body>

<h1 ID="head1">This is the first heading</h1>
<h1 ID="head2">This is the second heading</h1>
<p>Using the W3C DOM, you can choose
whether to show or hide the headings on
this page using the checkboxes below.</p>
<form name="form1">
<input type="checkbox" name="head1"
   checked onClick="ShowHide();">
<b>Show first heading</b><br>
<input type="checkbox" name="head2"
   checked onClick="ShowHide();">
<b>Show second heading</b><br>
</form>

在页面中修改文本的例子

<script language="Javascript" type="text/javascript">
function ChangeTitle() {
   if (!document.getElementById) return;
  var newtitle = document.form1.newtitle.value;
   var head1 = document.getElementById("head1");
   head1.firstChild.nodeValue=newtitle;
}
</script>

</head>
<body>

<h1 ID="head1">Dynamic Text in JavaScript</h1>
<p>Using the W3C DOM, you can dynamically
change the heading at the top of this
page. Enter a new title and click the
Change button.</p>
<form name="form1">
<input type="text" name="newtitle" size="25">
<input type="button" value="Change!"
  onClick="ChangeTitle();">
</form>

为页面中添加文本的例子

<title>Adding to a page</title>
<script language="Javascript" type="text/javascript">
function AddText() {
   if (!document.getElementById) return;
   var sentence=document.form1.sentence.value;
   var node=document.createTextNode(" " + sentence);
   document.getElementById("p1").appendChild(node);
   document.form1.sentence.value="";
}
</script>
</head>
<body>
<h1>Create Your Own Content</h1>
<p ID="p1">Using the W3C DOM, you can dynamically
add sentences to this paragraph. Type a sentence
and click the Add button.</p><form name="form1">
<input type="text" name="sentence" size="65">
<input type="button" value="Add" onClick="AddText();">
</form>

创建导航树的小例子

<html>
<head><title>Creating a Navigation Tree</title>
<style>
   A {text-decoration: none;}
   #productsmenu,#supportmenu,#contactmenu {
     display: none;
     margin-left: 2em;
   }
</style>
</head>
<body>
<h1>Navigation Tree Example</h1>
<p>The navigation tree below allows you to expand and
collapse items.</p>
<ul>
 <li><a id="products" href="#">[+] Products</a>
   <ul ID="productsmenu">
      <li><a href="prodlist.html">Product List</a></li>      <li><a href="order.html">Order Form</a></li>
      <li><a href="pricelist.html">Price List</a></li>
   </ul>
 </li>
 <li><a id="support" href="#">[+] Support</a>
   <ul id="supportmenu">
      <li><a href="scontact.html">Contact Support</a></li>
   </ul>
 </li>
 <li><a ID="contact" href="#">[+] Contact Us</a>
   <ul id="contactmenu">
      <li><a href="contact1.html">Service Department</a></li>
      <li><a href="contact2.html">Sales Department</a></li>
   </ul>
 </li>
</ul>
<script language="javascript" type="text/javascript"
   src="tree.js">
</script>
</body>
</html>

function Toggle(e) {
   // Don't try this in old browsers
   if (!document.getElementById) return;
   // Get the event object
   if (!e) var e = window.event;
   // Which link was clicked?
   whichlink = (e.target) ? e.target.id : e.srcElement.id;
   // get the menu object
 obj=document.getElementById(whichlink+"menu");
 // Is the menu visible?   visible=(obj.style.display=="block")
   // Get the key object (the link itself)
   key=document.getElementById(whichlink);
   // Get the name (Products, Contact, etc.)
 keyname = key.firstChild.nodeValue.substring(3);
  if (visible) {     // hide the menu
     obj.style.display="none";
     key.firstChild.nodeValue = "[+]" + keyname;
   } else {
     // show the menu
     obj.style.display="block";
     key.firstChild.nodeValue = "[-]" + keyname;
   }
}
document.getElementById("products").onclick=Toggle;
document.getElementById("support").onclick=Toggle;
document.getElementById("contact").onclick=Toggle;