【JavaScript】DOMノードの一般的な使い方紹介02
19178 ワード
DOMノードの一般的な方法紹介02
1.ノードの置換
replacceChild()
与えられた親要素のサブノードを別のサブノードに置き換える.
var reference=element.replacceChild(newChild,oldChild)
戻り値は、置換されたサブノードを指す参照ポインタである.
挿入されたサブノードがサブノードである場合、それらのサブノードもターゲットノードに挿入される.
例:
get Attribute()
与えられた要素の属性ノードの値を返します.
var atributeValue=element.get Attribute(atributeName);
与えられた属性の名前は、文字列で方法に伝えられます.
与えられた属性の値は文字列で返されます.指定された属性が存在しない場合、getAttribute()は空の文字列を返します.
属性で属性ノードを取得します.
get AttributeNode(属性の名前)--Node
例:
set Attribute()
与えられた要素ノードに新しい属性値を追加したり、既存の属性の値を変更したりします.
element.set Attribute(atributeName、atributeValue);
属性の名前と値は文字列で渡さなければなりません.
この属性が既に存在する場合、その値は更新されます.
もし存在しないなら、setAttribute()方法はまずそれを作成してからそのために賦課します.
例:
createElement()
与えられたラベル名に基づいて新しい要素ノードを作成します.メソッドにはパラメータが一つしかありません.作成される要素の名前は文字列です.
var reference=document.create Element;
方法の戻り値は、新規ノードを指す参照ポインタです.戻り値は要素ノードですので、そのnodeType属性値は1になります.
新しい要素ノードは自動的にドキュメントに追加されません.新しいノードにはnodePart属性がありません.JavaScriptコンテキストに存在するオブジェクトです.
var pElement=document.create Element("p")
5.テキストノードの作成
createText Node()
与えられたテキストを含む新しいテキストノードを作成します.この方法の戻り値は、新しいテキストノード参照ポインタを指します.
var text Node=document.create Text Node(text)
方法は一つのパラメータしかありません.テキストノードに含まれるテキスト文字列を新規作成します.
方法の戻り値は、新規ノードを指す参照ポインタです.テキストノードですので、nodeType属性は3.
新しい要素ノードは自動的にドキュメントに追加されません.新しいノードにはnodePart属性がありません.
var pElement Text=document.creat Element(「li」);
var textElement=document.create Text Node(南京);
pElement Text.apendChild(textElement)
6.ノード1を挿入する
apped Child()
与えられた要素にサブノードを追加します.
var newreference=element.apendChild(newChild)
固定サブノードnewChildには、所与の要素ノードelementの最後のサブノードとなる.
方法の戻り値は、新規サブノードへの参照ポインタである.
この方法は通常、createelement()createText Node()と配合して使用されます.
新しいノードは、ドキュメント内の任意の要素に追加できます.
4と5、6の総合例:
4と5、6例2:
insertBefore()
与えられたノードを固定子ノードの前に挿入する.
var reference= element.insertBefore(newNode,taget Node);
ノードnewNodeは、要素ノードelementに挿入され、ノードtarget Nodeの前面に表示される.
ノードtarget Nodeは、element要素のサブノードでなければならない.
この方法は通常、createelement()とcreateText Node()と組み合わせて使用されます.
例:
DOMはinsertAfter()方法を提供していません.
私たちは自分の実現方式でinsertAfter()に似た方法を実現します.
例1:
removeChild()
与えられた要素からサブノードを削除します.
var reference=element.removeChild(node)
戻り値は、削除されたサブノードへの参照ポインタです.
あるノードがremoveChild()方法で削除されると、このノードに含まれるすべてのサブノードが同時に削除されます.
例:
(1)遍歴
ChildNodes:与えられた要素ノードのサブノードからなる配列を返します.
var nodeList=node.childNodes;
テキストノードと属性ノードは、任意のサブノードを含むことができません.したがって、それらのChildNodes属性は常に空の配列に戻ります.
もしある元素がサブノードがあるかどうかを知りたいなら、ハスチルノメソッドを使ってもいいです.
いくつかの要素にサブノードがあるかを知りたいなら、childNodes配列のlength属性を使ってもいいです.
childNodes属性は読み取り専用の属性です.
(2)第1のサブノードを取得する
firstChild:属性は、所与の要素ノードの第1のサブノードに戻り、このノードオブジェクトのポインタを返す.
var reference=node.first Child;
テキストノードと属性ノードは、すべてのサブノードを含むことができないので、それらのfirstChild属性は常にnullに戻ります.
ある要素のfirstChild属性は、この要素のchild Nodesノードのセットの最初のノードに相当する.
var reference=node.ChildNodes[0]
first Child属性は読み取り専用の属性です.
(2)最後のサブノードを取得する
lastChild:first Childの属性に対応します.
nextSibling:与えられたノードの次の兄弟ノードを返します.
parent Node:与えられたノードの親ノードを返します.
parent Node属性が戻ってくるノードは、要素ノードのみがサブノードを含む可能性があるため、常に1つの要素ノードである.
documentノードの親ノードがありません.
previous Sibling:与えられたノードの前の兄弟ノードを返します.
例:
ブラウザはほとんどこの属性をサポートしていますが、DOM規格の構成部分ではありません.
innerHTML属性は、与えられた要素の中のHTML内容を読むために使用できます.
例:(div層に今日 )を挿入します.
古い方法:
1.ノードの置換
replacceChild()
与えられた親要素のサブノードを別のサブノードに置き換える.
var reference=element.replacceChild(newChild,oldChild)
戻り値は、置換されたサブノードを指す参照ポインタである.
挿入されたサブノードがサブノードである場合、それらのサブノードもターゲットノードに挿入される.
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
:<br>
<ul>
<li id="bj" value="beijing"> </li>
<li id="sh" value="shanghai"> </li>
<li id="cq" value="chongqing"> </li>
</ul>
:<br>
<ul>
<li id="fk" value="fangkong"> <p>xxx</p></li>
<li id="ms" value="moshou"> </li>
<li id="cq" value="chuanqi"> </li>
</ul>
<script language="javascript">
// ，
// onclick
document.getElementById("bj").onclick=function(){
//
var fkElement=document.getElementById("fk");
//
var bjParentElement=this.parentNode;
// ( xxx )
var oldElement=bjParentElement.replaceChild(fkElement,this);
//
alert(oldElement.getAttribute("value"));
}
</script>
</body>
</html>
get Attribute()
与えられた要素の属性ノードの値を返します.
var atributeValue=element.get Attribute(atributeName);
与えられた属性の名前は、文字列で方法に伝えられます.
与えられた属性の値は文字列で返されます.指定された属性が存在しない場合、getAttribute()は空の文字列を返します.
属性で属性ノードを取得します.
get AttributeNode(属性の名前)--Node
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
:<br>
<ul>
<li id="bj" value="beijing"> </li>
<li id="sh" value="shanghai"> </li>
<li id="cq" value="chongqing"> </li>
</ul>
:<br>
<ul>
<li id="fk" value="fangkong"> </li>
<li id="ms" value="moshou"> </li>
<li id="xj" value="xingji"> </li>
</ul>
<script language="javascript">
// " " value
var xjElement=document.getElementById("xj");
alert(xjElement.getAttribute("value"));
</script>
</body>
</html>set Attribute()
与えられた要素ノードに新しい属性値を追加したり、既存の属性の値を変更したりします.
element.set Attribute(atributeName、atributeValue);
属性の名前と値は文字列で渡さなければなりません.
この属性が既に存在する場合、その値は更新されます.
もし存在しないなら、setAttribute()方法はまずそれを作成してからそのために賦課します.
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
:<br>
<ul>
<li id="bj" value="beijing"> </li>
<li id="sh" value="shanghai"> </li>
<li id="cq" value="chongqing"> </li>
</ul>
:<br>
<ul>
<li id="fk" value="fangkong"> </li>
<li id="ms" value="moshou"> </li>
<li id="xj" value="xingji"> </li>
</ul>
<script language="javascript">
// " " ， name
var xjElement=document.getElementById("xj");
//
alert(xjElement.getAttribute("name"));
//
xjElement.setAttribute("name","xingjizhengba");
//
alert(xjElement.getAttribute("name"));
</script>
</body>
</html>
createElement()
与えられたラベル名に基づいて新しい要素ノードを作成します.メソッドにはパラメータが一つしかありません.作成される要素の名前は文字列です.
var reference=document.create Element;
方法の戻り値は、新規ノードを指す参照ポインタです.戻り値は要素ノードですので、そのnodeType属性値は1になります.
新しい要素ノードは自動的にドキュメントに追加されません.新しいノードにはnodePart属性がありません.JavaScriptコンテキストに存在するオブジェクトです.
var pElement=document.create Element("p")
5.テキストノードの作成
createText Node()
与えられたテキストを含む新しいテキストノードを作成します.この方法の戻り値は、新しいテキストノード参照ポインタを指します.
var text Node=document.create Text Node(text)
方法は一つのパラメータしかありません.テキストノードに含まれるテキスト文字列を新規作成します.
方法の戻り値は、新規ノードを指す参照ポインタです.テキストノードですので、nodeType属性は3.
新しい要素ノードは自動的にドキュメントに追加されません.新しいノードにはnodePart属性がありません.
var pElement Text=document.creat Element(「li」);
var textElement=document.create Text Node(南京);
pElement Text.apendChild(textElement)
6.ノード1を挿入する
apped Child()
与えられた要素にサブノードを追加します.
var newreference=element.apendChild(newChild)
固定サブノードnewChildには、所与の要素ノードelementの最後のサブノードとなる.
方法の戻り値は、新規サブノードへの参照ポインタである.
この方法は通常、createelement()createText Node()と配合して使用されます.
新しいノードは、ドキュメント内の任意の要素に追加できます.
4と5、6の総合例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
:<br>
<ul id="city">
<li id="bj" value="beijing"> </li>
<li id="sh" value="shanghai"> </li>
<li id="cq" value="chongqing"> </li>
</ul>
:<br>
<ul>
<li id="fk" value="fangkong"> </li>
<li id="ms" value="moshou"> </li>
<li id="xj" value="xingji"> </li>
</ul>
<script language="javascript">
// <li id="tj" value="tianjing"> </li>
//<li></li>
var liElement=document.createElement("li");
// <li id="tj" value="tianjing"></li>
liElement.setAttribute("id","tj");
liElement.setAttribute("value","tianjing");
// " "
var textElement=document.createTextNode(" ");
// " " <li id="tj" value="tianjing"></li> <li id="tj" value="tianjing"> </li>
liElement.appendChild(textElement);
//
var cityElement=document.getElementById("city");
// <li id="tj" value="tianjing"> </li>
cityElement.appendChild(liElement);
</script>
</body>
</html>
4と5、6例2:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
<select name="edu" id="edu">
<option value=" "> ^^^^^</option>
<option value=" "> ^^^^^</option>
<option value=" "> ^^^^^</option>
<option value=" "> ^^^^^</option>
</select>
<script language="javascript">
// <option value=" "> ^^^^^</option>
// <option value=" "> ^^^^^</option>
var optionElement=document.createElement("option");
optionElement.setAttribute("value"," ");
var textElement=document.createTextNode(" ^^^^^");
optionElement.appendChild(textElement);
// id="edu"
var eduElement=document.getElementById("edu");
//
eduElement.appendChild(optionElement);
</script>
</body>
</html>
insertBefore()
与えられたノードを固定子ノードの前に挿入する.
var reference= element.insertBefore(newNode,taget Node);
ノードnewNodeは、要素ノードelementに挿入され、ノードtarget Nodeの前面に表示される.
ノードtarget Nodeは、element要素のサブノードでなければならない.
この方法は通常、createelement()とcreateText Node()と組み合わせて使用されます.
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
<ul>
<li id="bj" name="beijing"> </li>
<li id="sh" name="shanghai"> </li>
<li id="cq" name="chongqing"> </li>
</ul>
<script language="javascript">
// <li id="tj" name="tianjin"> </li>
// <li id="cq" name="chongqing"> </li>
// <li id="tj" name="tianjin"> </li>
var tjElement=document.createElement("li");
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjing");
var textElement=document.createTextNode(" ");
tjElement.appendChild(textElement);
// <li id="cq" name="chongqing"> </li>
var cqElement=document.getElementById("cq");
//
var ulElement=cqElement.parentNode;
//
ulElement.insertBefore(tjElement,cqElement);
</script>
</body>
</html>
DOMはinsertAfter()方法を提供していません.
私たちは自分の実現方式でinsertAfter()に似た方法を実現します.
例1:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
<ul>
<li id="bj" name="beijing"> </li>
<li id="sh" name="shanghai"> </li>
<li id="cq" name="chongqing"> </li>
</ul>
<script language="javascript">
// <li id="tj" name="tianjin"> </li>
// <li id="cq" name="chongqing"> </li>
// <li id="tj" name="tianjin"> </li>
var tjElement=document.createElement("li");
tjElement.setAttribute("id","tj");
tjElement.setAttribute("value","tianjing");
var textElement=document.createTextNode(" ");
tjElement.appendChild(textElement);
// <li id="cq" name="chongqing"> </li>
var shElement=document.getElementById("sh");
//
var nextElement=shElement.nextSibling;
//
var shParentElement=shElement.parentNode;
//
shParentElement.insertBefore(tjElement,nextElement);
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
<ul>
<li id="cq" name="chongqing"> </li>
<li id="bj" name="beijing"> </li>
<li id="sh" name="shanghai"> </li>
</ul>
<script language="javascript">
// <li id="tj" name="tianjin"> </li> <li id="sh" name="shanghai"> </li>
// <li id="sh" name="shanghai"> </li> ，
//
// <li id="tj" name="tianjin"> </li>
var liElement=document.createElement("li");
liElement.setAttribute("id","tj");
liElement.setAttribute("name","tianjin");
var textElement=document.createTextNode(" ");
liElement.appendChild(textElement);
//
var shElement=document.getElementById("sh");
//
var shParentElement=shElement.parentNode;
//
var lastChildParentElement=shParentElement.childNodes[5];
//
if(shElement == lastChildParentElement){
// ， ，
shParentElement.appendChild(liElement);
}else{
// ， ，
shParentElement.insertBefore(liElement,shElement);
}
</script>
</body>
</html>
removeChild()
与えられた要素からサブノードを削除します.
var reference=element.removeChild(node)
戻り値は、削除されたサブノードへの参照ポインタです.
あるノードがremoveChild()方法で削除されると、このノードに含まれるすべてのサブノードが同時に削除されます.
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
<ul>
<li id="cq" name="chongqing"> </li>
<li id="bj" name="beijing"> </li>
<li id="sh" name="shanghai"> </li>
</ul>
<script language="javascript">
// <ul id="city"> <li id="bj" name="beijing"> </li> </ul>
//
var bjElement=document.getElementById("bj");
//
var cityElement=bjElement.parentNode;
//
var oldElement=cityElement.removeChild(bjElement);
//
alert(" id :"+oldElement.getAttribute("id"));
</script>
</body>
</html>
(1)遍歴
ChildNodes:与えられた要素ノードのサブノードからなる配列を返します.
var nodeList=node.childNodes;
テキストノードと属性ノードは、任意のサブノードを含むことができません.したがって、それらのChildNodes属性は常に空の配列に戻ります.
もしある元素がサブノードがあるかどうかを知りたいなら、ハスチルノメソッドを使ってもいいです.
いくつかの要素にサブノードがあるかを知りたいなら、childNodes配列のlength属性を使ってもいいです.
childNodes属性は読み取り専用の属性です.
(2)第1のサブノードを取得する
firstChild:属性は、所与の要素ノードの第1のサブノードに戻り、このノードオブジェクトのポインタを返す.
var reference=node.first Child;
テキストノードと属性ノードは、すべてのサブノードを含むことができないので、それらのfirstChild属性は常にnullに戻ります.
ある要素のfirstChild属性は、この要素のchild Nodesノードのセットの最初のノードに相当する.
var reference=node.ChildNodes[0]
first Child属性は読み取り専用の属性です.
(2)最後のサブノードを取得する
lastChild:first Childの属性に対応します.
nextSibling:与えられたノードの次の兄弟ノードを返します.
parent Node:与えられたノードの親ノードを返します.
parent Node属性が戻ってくるノードは、要素ノードのみがサブノードを含む可能性があるため、常に1つの要素ノードである.
documentノードの親ノードがありません.
previous Sibling:与えられたノードの前の兄弟ノードを返します.
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
<ul>
<li id="cq" name="chongqing"> </li>
<li id="bj" name="beijing"> </li>
<li id="sh" name="shanghai"> </li>
</ul>
<script language="javascript">
//
// ul
var ulELement=document.getElementsByTagName("ul");
// ul
var ulChildNodes=ulELement[0].childNodes;
//
for(var i=0;i< ulChildNodes.length;i++){
alert(ulChildNodes[i].nodeName);
}
</script>
</body>
</html>
ブラウザはほとんどこの属性をサポートしていますが、DOM規格の構成部分ではありません.
innerHTML属性は、与えられた要素の中のHTML内容を読むために使用できます.
例:(div層に
古い方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
<div id="city"></div>
<script language="javascript">
// div <h1> </h1>
// <h1> </h1>
var jintianElement=document.createElement("h1");
var textElement=document.createTextNode(" ");
jintianElement.appendChild(textElement);
// div
var divElement=document.getElementById("city");
//
divElement.appendChild(jintianElement);
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js </title>
</head>
<body>
<div id="city"></div>
<script language="javascript">
// div <h1> </h1>
document.getElementById("city").innerHTML="<h1> </h1>";
</script>
</body>
</html>