javascript的一些总结(7)

DoubleEO

浏览: 158084 次
性别:
来自: 北京

最近访客更多访客>>

linyanzhuo

huangyongyou

nepenthe

eiengwch

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript HTML

15.W3C DOM
访问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;

分享到：

javascript的一些总结(8) | javascript的一些总结(6)

2008-12-23 23:38
浏览 1164
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论