javascript的一些总结(7)
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”;
显示和隐藏对象的例子
<body>
在页面中修改文本的例子
</head>
<body>
为页面中添加文本的例子
创建导航树的小例子
访问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;