JavaScript基礎操作まとめ(二)
10032 ワード
1.要素ノードを作成します.
1)createElement():与えられたラベル名に基づいて新しい要素ノードを作成します.
メソッドにはパラメータが一つしかありません.作成された要素ノードの名前は、文字列です.
方法の戻り値は、新規ノードを指す参照ポインタです.戻り値は要素ノードであり、
したがって、そのnodeType属性値は1.
＊新しい要素ノードは自動的にドキュメントに追加されません.JavaScriptコンテキストに存在するオブジェクトです.
3.要素ノードにサブノードを追加します.
1).apendChild():
var reference=element.apendChild(newChild)
固定サブノードnewChildには、所与の要素ノードelementの最後のサブノードとなる.
方法の戻り値は、新規サブノードへの参照ポインタである.
4.テキストノードを作成します.
1)createTextNode():与えられたテキストを含む新しいテキストノードを作成します.
この方法の戻り値は、新しいテキストノード参照ポインタを指します.
テキストノードですので、nodeType属性は3.
方法は一つのパラメータしかありません.テキストノードに含まれるテキスト文字列を新規作成します.新しい要素ノードは自動的にドキュメントに追加されません.
1)replacceChild():与えられた親要素ノードのうちの1つのサブノードを別のサブノードに置き換える.
var reference=element Node.replacceChild(newChile,oldChild)
戻り値は、置換されたサブノードを指す参照ポインタです.
2)ノードは、代替機能以外にも移動機能があります.
3)この方法は一方向の置換しかできません.双方向の置換が必要な場合はカスタム関数が必要です.
1)createElement():与えられたラベル名に基づいて新しい要素ノードを作成します.
メソッドにはパラメータが一つしかありません.作成された要素ノードの名前は、文字列です.
方法の戻り値は、新規ノードを指す参照ポインタです.戻り値は要素ノードであり、
したがって、そのnodeType属性値は1.
＊新しい要素ノードは自動的にドキュメントに追加されません.JavaScriptコンテキストに存在するオブジェクトです.
3.要素ノードにサブノードを追加します.
1).apendChild():
var reference=element.apendChild(newChild)
固定サブノードnewChildには、所与の要素ノードelementの最後のサブノードとなる.
方法の戻り値は、新規サブノードへの参照ポインタである.
4.テキストノードを作成します.
1)createTextNode():与えられたテキストを含む新しいテキストノードを作成します.
この方法の戻り値は、新しいテキストノード参照ポインタを指します.
テキストノードですので、nodeType属性は3.
方法は一つのパラメータしかありません.テキストノードに含まれるテキスト文字列を新規作成します.新しい要素ノードは自動的にドキュメントに追加されません.
//1. document.createElement(elementTagName)
// ，
//<li></li>
var liNode = document.createElement("li");
// " "
//<li> </li>
var xaNode = document.createTextNode(" ");
liNode.appendChild(xaNode);
var cityNode = document.getElementById("city");
//2. elementNode.appendChild(newChild): element
// newChild ， elementNode
cityNode.appendChild(liNode); 1： submit ， type， ：" "
（ ）， ， ：" "
， ul li
2. li onclick ，
<script type="text/javascript">
window.onload = function(){
function showContent(liNode){
alert("^_^" + liNode.firstChild.nodeValue);
}
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
showContent(this);
}
}
//1. #submit submitBtn
var submitBtn = document.getElementById("submit");
//2. submitBtn onclick
submitBtn.onclick = function(){
//4. type， ：" "
//4.1 name = "type" types
var types = document.getElementsByName("type");
//4.2 types， type checked ，
var typeVal = null
for(var i = 0; i < types.length; i++){
// type : if( . )
if(types[i].checked){
typeVal = types[i].value;
break;
}
}
//4.3 type ， ：" ". ，return false;
if(typeVal == null){
alert(" ");
return false;
}
//5. name="name" ： value ： nameVal
var nameEle = document.getElementsByName("name")[0];
var nameVal = nameEle.value;
//6. nameVal
var reg = /^\s*|\s*$/g;
nameVal = nameVal.replace(reg, "");
// name
nameEle.value = nameVal;
//7. nameVal "" ， "" ， " "， return false
if(nameVal == ""){
alert(" ");
return false;
}
//8. li
var liNode = document.createElement("li");
//9. nameVal
var textNode = document.createTextNode(nameVal);
// li
liNode.onclick = function(){
showContent(this);
}
//10. 9 8
liNode.appendChild(textNode);
//11. 8 type ul
document.getElementById(typeVal).appendChild(liNode);
//3. onclick return false，
return false;
}
}
</script>
<form action="dom-4.html" name="myform">
<input type="radio" name="type" value="city">
<input type="radio" name="type" value="game">
name: <input type="text" name="name"/>
<input type="submit" value="Submit" id="submit"/>
</form>1)replacceChild():与えられた親要素ノードのうちの1つのサブノードを別のサブノードに置き換える.
var reference=element Node.replacceChild(newChile,oldChild)
戻り値は、置換されたサブノードを指す参照ポインタです.
2)ノードは、代替機能以外にも移動機能があります.
3)この方法は一方向の置換しかできません.双方向の置換が必要な場合はカスタム関数が必要です.
//
function replaceEach(aNode, bNode){
//1. aNode bNode ， parentNode
var aParent = aNode.parentNode;
var bParent = bNode.parentNode;
if(aParent && bParent){
//2. aNode bNode
var aNode2 = aNode.cloneNode(true);
//3. aNode bNode replaceChild()
bParent.replaceChild(aNode2, bNode);
aParent.replaceChild(bNode, aNode);
}
}
*************************************************************************************
// ： li onclick
// city game
window.onload = function(){
//
function replaceEach(aNode, bNode){
//1. aNode bNode ， parentNode
var aParent = aNode.parentNode;
var bParent = bNode.parentNode;
if(aParent && bParent){
//2. aNode bNode
var aNode2 = aNode.cloneNode(true);
// onclick
aNode2.onclick = aNode.onclick;
// index
aNode2.index = aNode.index;
//3. aNode bNode replaceChild()
bParent.replaceChild(aNode2, bNode);
aParent.replaceChild(bNode, aNode);
}
}
//1. li
var liNodes = document.getElementsByTagName("li");
//2. li onclick
for(var i = 0; i < liNodes.length; i++){
liNodes[i].index = i;
liNodes[i].onclick = function(){
//3. li
var targetIndex = 0;
if(this.index < 4){
targetIndex = 4 + this.index;
}else{
targetIndex = this.index - 4;
}
// index
var tempIndex = this.index;
this.index = liNodes[targetIndex].index;
liNodes[targetIndex].index = tempIndex;
//4.
replaceEach(this, liNodes[targetIndex]);
}
}
}6. ：
1). removeChild():
var reference = element.removeChild(node);
。
removeChild() ，
， ，parentNode
// li confirm（ ）： xx
// ，
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
var flag = confirm(" " +
this.firstChild.nodeValue + " ？");
if(flag){
this.parentNode.removeChild(this);
}
}
}
<script type="text/javascript">
/*
* #employeetable a onclick
* 1. ： xx ？ xx a td tr
* td ，
* 2. " "， a
*
* ：
* 1. a ， onclick false，
* 2. tr tbody， table
* 3. trim(str) 。
* 2： #addEmpButton onclick
*1. #name， #email， #salary
*2. 1 3 ， tr 。 3 td
* tr
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
</tr>
*3. td ：<td><a href="deletEmp?id=001">Delete</a></td>
*4. 3 td tr
*5. tr #employeetable tbody
*6. tr a onclick ， 。
*/
window.onload = function(){
function removeTr(aNode){
var trNode = aNode.parentNode.parentNode;
var textContent = trNode.getElementsByTagName("td")[0]
.firstChild.nodeValue;
//
textContent = trim(textContent);
var flag = confirm(" " + textContent + " ？");
if(flag){
trNode.parentNode.removeChild(trNode);
}
return false;
}
// delete （ tr）
var aNodes = document.getElementById("employeetable")
.getElementsByTagName("a");
for(var i = 0; i < aNodes.length; i++){
aNodes[i].onclick = function(){
removeTr(this);
return false;
}
}
//*************************** 2
document.getElementById("addEmpButten").onclick = function(){
//value: HTML ；nodeValue：
var nameVal = document.getElementById("name").value;
var emailVal = document.getElementById("email").value;
var salaryVal = document.getElementById("salary").value;
var nameTd = document.createElement("td");
nameTd.appendChild(document.createTextNode(nameVal));
var emailTd = document.createElement("td");
emailTd.appendChild(document.createTextNode(emailVal));
var salaryTd = document.createElement("td");
salaryTd.appendChild(document.createTextNode(salaryVal));
var tr = document.createElement("tr");
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(salaryTd);
var aNode = document.createElement("a");
aNode.href = "deletEmp?id=xxx";
aNode.appendChild(document.createTextNode("Delete"));
var aTd = document.createElement("td");
aTd.appendChild(aNode);
tr.appendChild(aTd);
aNode.onclick = function(){
removeTr(this);
return false;
}
document.getElementById("employeetable")
.getElementsByTagName("tbody")[0]
.appendChild(tr);
}
//
function trim(str){
var reg = /^\s*|\s*$/g;
return str.replace(reg, "");
}
}
</script>
<body>
<center>
<br></br> <br></br>
name:<input type="text" name="name" id="name"/>
email:<input type="text" name="email" id="email"/>
salary:<input type="text" name="salary" id="salary"/>
<br></br>
<button id="addEmpButten" value="abc">Submit</button>
<br></br>
<hr>
<br></br>
<table id="employeetable" border="1" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deletEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deletEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>15000</td>
<td><a href="deletEmp?id=003">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>