JavaScript DOM学習ノート5——作成と操作ノード

8411 ワード

JavaScript dom 削除挿入変更ノードの作成

DOMの様々なノードへのアクセス方法を以前に学習したが、DOMに含まれるコンテンツはそれだけではなく、DOMプログラミングは、DOMツリーが構築されたときにノードを追加することも含む.
   1.新しいノードを作成する
   documentオブジェクトには、様々なノードを作成する方法が複数含まれています.「JavaScript高級プログラム設計」では、各方法のプロトタイプ、役割、IE、Firefox、Opera、Safariなどのブラウザのサポート状況を説明するためのテーブルを設計しています.一見すると、ほとんどの人がサポートしてくれる方法です.
   ノードを作成するための最も有用な方法は主にCreateelement()、CreateText Node()であり、それぞれ勉強します.
   2.CreateElement()、CreateText Node()、apendChild()
   以下のような要求があります.HTMLのDOMツリーのロードが完了したら、「p」要素を追加します.元素のテキスト内容は「A New Element」です.
.オリジナルのhtmlは以下の通りです.

<html>
	<head>
		<title>createElement() Demo</title>
	</head>
	<body>
	</body>
</html>

今から

A New Element

をHTMLのbodyに追加します.ステップは以下の通りです

//   ：  p  
var oP = document.createElement("p");
//   ：      
var oTxt = document.createTextNode("A New Element");
//   ：       p         
oP.appendChild(oTxt);
//   ： p     body       
document.body.appendChild(oP);

追加の効果を表示するために、bodyにボタンを追加し、クリックしたら上記のコードを実行します.完全な例は以下の通りです.

<html>
	<head>
		<title>createElement() Demo</title>
		<script type="text/javascript">
			function createElementTest() {
				//   ：  p  
				var oP = document.createElement("p");
				//   ：      
				var oTxt = document.createTextNode("A New Element");
				//   ：       p         
				oP.appendChild(oTxt);
				//   ： p     body       
				document.body.appendChild(oP);
			}
		</script>
	</head>
	<body>
		<input type="button" value="  " onclick="createElementTest()"/>
	</body>
</html>

3.removeChild()、replacceChild()、insertBefore()の方法
ノードを追加できる以上、ノードを削除することもできる.ノードを削除するには、そのparent NodeのremoveChild()方法を呼び出してノードを削除することができます.依然として上の例で勉強します.

//   ：  p  
var oP = document.body.getElementsByTagName("p").item(0);
//   ：  p      
var pNode = oP.parentNode;
//   ：          
pNode.removeChild(oP);

完全なコードは以下の通りです.

<html>
	<head>
		<title>createElement() Demo</title>
		<script type="text/javascript">
			function createElementTest() {
				//   ：  p  
				var oP = document.createElement("p");
				//   ：      
				var oTxt = document.createTextNode("A New Element");
				//   ：       p         
				oP.appendChild(oTxt);
				//   ： p     body       
				document.body.appendChild(oP);
			}

			function removeChildTest() {
				//   ：  p  
				var oP = document.body.getElementsByTagName("p").item(0);
				//   ：  p      
				var pNode = oP.parentNode;
				//   ：          
				pNode.removeChild(oP);
			}
		</script>
	</head>
	<body>
		<input type="button" value="  " onclick="createElementTest()"/>
		<input type="button" value="  " onclick="removeChildTest()"/>
	</body>
</html>

また、ノードを削除せずに代替ノードだけを削除しても良い.もちろん、これも代替ノードの親ノードを呼び出す方法によって実現される必要がある.今からp元素の内容をハロー、ワールドに変えます.replacceChild()方法は、2つのパラメータがあります.新しいノードは、ノードに置き換えられます.コードは以下の通りです

//   ：         
var newTxt = document.createTextNode("Hello,World!");
//   ：         
var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
//   ：              
var oP = document.body.getElementsByTagName("p").item(0);
//   ：      
oP.replaceChild(newTxt,oldTxt);

もう一つのボタンを追加して、テキストの置換をトリガする方法:

<html>
	<head>
		<title>createElement() Demo</title>
		<script type="text/javascript">
			function createElementTest() {
				//   ：  p  
				var oP = document.createElement("p");
				//   ：      
				var oTxt = document.createTextNode("A New Element");
				//   ：       p         
				oP.appendChild(oTxt);
				//   ： p     body       
				document.body.appendChild(oP);
			}

			function removeChildTest() {
				//   ：  p  
				var oP = document.body.getElementsByTagName("p").item(0);
				//   ：  p      
				var pNode = oP.parentNode;
				//   ：          
				pNode.removeChild(oP);
			}
			function replaceChildTest() {
				//   ：         
				var newTxt = document.createTextNode("Hello,World!");
				//   ：         
				var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
				//   ：              
				var oP = document.body.getElementsByTagName("p").item(0);
				//   ：      
				oP.replaceChild(newTxt,oldTxt);
			}
		</script>
	</head>
	<body>
		<input type="button" value="  " onclick="createElementTest()"/>
		<input type="button" value="  " onclick="removeChildTest()"/>
		<input type="button" value="  " onclick="replaceChildTest()"/>
	</body>
</html>

最後に、他のノードをノードの前に挿入することもできます.これが方法insertBeforeの役割です.この方法には二つのパラメータがあります.新しいノードとどのノードの前に挿入されますか?上記の例に続き、最初のp要素の前にもう一つのp要素を挿入します.要素のテキストはa new elementです.
コードは以下の通りです

var newNode = document.createElement("p");
var newTxt = document.createTextNode("a new element");
newNode.appendChild(newTxt);
var oldNode = document.body.getElementsByTagName("p")[0];
var pNode = oldNode.parentNode;
pNode.insertBefore(newNode,oldNode);

完全なコードは以下の通りです.

<html>
	<head>
		<title>createElement() Demo</title>
		<script type="text/javascript">
			function createElementTest() {
				//   ：  p  
				var oP = document.createElement("p");
				//   ：      
				var oTxt = document.createTextNode("A New Element");
				//   ：       p         
				oP.appendChild(oTxt);
				//   ： p     body       
				document.body.appendChild(oP);
			}

			function removeChildTest() {
				//   ：  p  
				var oP = document.body.getElementsByTagName("p").item(0);
				//   ：  p      
				var pNode = oP.parentNode;
				//   ：          
				pNode.removeChild(oP);
			}
			function replaceChildTest() {
				//   ：         
				var newTxt = document.createTextNode("Hello,World!");
				//   ：         
				var oldTxt = document.body.getElementsByTagName("p").item(0).childNodes.item(0);
				//   ：              
				var oP = document.body.getElementsByTagName("p").item(0);
				//   ：      
				oP.replaceChild(newTxt,oldTxt);
			}
			function insertBeforeTest() {
				var newNode = document.createElement("p");
				var newTxt = document.createTextNode("a new element");
				newNode.appendChild(newTxt);
				var oldNode = document.body.getElementsByTagName("p")[0];
				var pNode = oldNode.parentNode;
				pNode.insertBefore(newNode,oldNode);
			}
		</script>
	</head>
	<body>
		<input type="button" value="  " onclick="createElementTest()"/>
		<input type="button" value="  " onclick="removeChildTest()"/>
		<input type="button" value="  " onclick="replaceChildTest()"/>
		<input type="button" value="  " onclick="insertBeforeTest()"/>
	</body>
</html>

参考図書目録:

『JavaScript高級プログラミング』

JavaScript入出力