javascriptのまとめ(7)

7700 ワード

JavaScript html

15.W 3 C DOM
DOMのノードにアクセス
parent Node()この方法は親ノードにアクセスできます.
firstChild()この方法は、ノードの第1のサブノードにアクセスし、存在しないまま空に戻ることができる.
nextSibling()この方法は次の兄弟ノードにアクセスでき、存在しないなら空に戻ります.
previous Sibling().この方法は前の兄弟ノードにアクセスでき、存在しないなら空に戻ります.
文書の方法
getElements ByTagName:取得したのはファイルまたは一部のファイルにあります.
名前のすべての要素のリスト;このようなNodeListを作成すると、インデックスを通じてこれらの命にアクセスできます.
名になったノードです.
createElement()メソッド:新しい要素のタグ名をパラメータにして、作成した要素オブジェクトを接続できます.
属性と取得値を指定します.
createdocument Fragment()メソッド:document Fragmentノードを作成します.
createText Node()、createComment()とcreateCDATASection()方法:それらのように作成する.
名前が示すノードでは、それらのパラメータはノードの内容の文字列となります.
ノードの方法
insertBefore()方法:新しいサブノードを参照サブノードに挿入し、new(u)に戻す.node:
dummy=node_object.insertBefore(newuunode、referenceunode)
このときdummyは挿入されたノードのコピーを含む.
replacceChild()方法:サブノードを置換し、置換されたノードを返す.
dummy=node_object.replace Child(newuunode,referenceunode)
このときdummyは挿入されたノードのコピーを含む.
RemoveChild()方法:参照されたサブノードを削除し、削除されたノードに戻る.
dummy=node_object.removeChild(reference unode)
このときdummyは削除されたノードの部分を含む.
apped＿Child()方法:新しいノードを他のサブノードの後ろに入れて、新しいノードに戻る.
dummy=node_Object.apendChild(new node)
このときdummyは、新しいノードのコピーを含む.
hasChildNodes()方法:与えられたノードがサブノードを持っているかどうかのテスト結果であるブール値を返します.
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>

＜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学習ノート(13)--windowブラウザの対象モデル