JavaScriptのHTML DOMノード共通のユーザーインターフェイス要素

ドキュメントオブジェクトモデル（DOM）において、各ノードはオブジェクトです。DOMノードには、3つの重要なプロパティがあります。

ノードの名称：1のnodeName

2.のnodeValue：値ノード

3.のnodeType：ノード・タイプ

ノードタイプ：エレメント1、プロパティ2、テキスト3、注8、9ドキュメント。

まず、ノード（HTML要素）を追加および削除

図1に示すように、ノードを作成します

1）要素（エレメントノード）を作成します。

2）既存の要素に要素を追加します。

構文：のappendChild（newnode）

例えば：

<DIV ID = "DIV1"> 
<P ID = "P1">これは段落</ P>は
<P ID = "P2は">これは別の段落</ P>は
</ DIV> 

<SCRIPT> 
のvarパラdocument.createElement =（ "P"）; 
VAR = document.createTextNodeノード（ "これは新しい段落です。"）; 
para.appendChild（ノード）; 

VAR =のdocument.getElementById要素（ "DIV1"）; 
element.appendChildを（パラ）; 
</ SCRIPT>

document.createElement（「タグ名」）; //要素ノードを作成します。

document.createTextNode（「テキスト」）; //テキストノードを作成します。

appendChild（）; //最後のノードに子ノードを追加する方法。また、要素から別の要素への可動要素ののappendChild（）メソッドを使用してもよいです。使用法：a.appendChild（B）に追加B。

2.ノードの追加

appendChild（）; //指定されたノードリストのノードの最後の子の後に新しい子ノードを追加します。

文法、例えば：同上。

insertBefore（）; //のinsertBefore（）メソッドは、既存の子ノードの新しい子ノードの前に挿入することができます。

语法：insertBefore(newnode,node);

例えば：

<UL ID = "テスト"> 
<LI>のJavaScript </ LI> 
<LI> HTML </ LI> 
</ UL> 

<スクリプトタイプ= "テキスト/ javascriptの"> 
VAR otest =のdocument.getElementById（ "試験"）。
VAR newli =のdocument.createElement（ "李"）; 
newli.innerHTML = "PHP"。
//otest.insertBefore(newli,otest.lastChild）; 
otest.insertBefore（newli、otest.childNodes [1]）。
</ SCRIPT>

3.ノードの削除

子ノードのリストからノードを削除するためのremoveChild（）//のremoveChild（）メソッド。削除が成功したような、この方法は、このような障害として、除去されたノードを返し、NULLが返されます。

语法：nodeObject.removeChild(node)

例えば：

<DIV ID = "DIV1"> 
<P ID = "P1">これは段落です。</ P> 
<P ID = "P2">これは、別の段落です。</ P> 
</ div> 

<SCRIPT> 
VAR親=のdocument.getElementById（ "DIV1"）; 
VAR =子供のdocument.getElementById（ "P1"）; 
parent.removeChild（子）; 
</ SCRIPT>

DOMは、要素とその親要素を除去する必要性を認識する必要があります。まず、削除したい子要素を見つけ、その後はparentNode親要素を見つけるために、そのプロパティを使用します。

4.ノードを交換します

replaceChild //別の子ノードに子ノード内の指定された親要素を交換してください。

構文：referencre = element.replaceChild（newChildで、oldChild）; //にnewChild：置換対象oldChildに必要です。oldChild：必ずしも、newChildでオブジェクト交換すること。

例えば：

<DIV> 
<B ID = "oldNodeが"> JavaScriptの</ B>は、一般的に使用される技術である、動的ページ構成されています。</ div> 
<a href="javascript:replaceMessage()" rel="external nofollow">太字のイタリック</a>の

<スクリプトタイプ= "テキスト/ JavaScriptを"> 
関数replaceMessage（）{ 
　　VARのB = document.getElementById（ "oldNodeが"）; 
　　VAR = newNodeのdocument.createElement（ "I"）; 
　　newNode.innerHTML = b.innerHTML; 
　　b.parentNode.replaceChild（newNode、B）; 
} 
</ SCRIPT>

注意：oldnewを交換すると、コンテンツに関連付けられたすべての属性が削除されます。newChildが最初に確立されなければなりません。

5.アクセスサブノード

要素ノードの下に、選択したすべての子ノードのリストにアクセス//のchildNodesは、戻り値が配列として見ることができる、彼はlengthプロパティがあります。

構文：elementNode.childNodes //利用可能なのchildNodes [i]はいくつかのサブ要素の配列を表します

例えば：

<div> 
JavaScriptの
<P>ジャバスクリプト</ P> 
の<div> jQueryの</ div> 
<H5> PHP </ H5> 
</ div> 
<スクリプトタイプ= "テキスト/ javascriptの"> 
のvar int型= document.getElementsByTagName（」 DIV "）[0] .childNodes。
（私は++; iはint.lengthを<VAR I = 0）のための
{ 
（：+ INT [I] .nodeName + "<BR>" "名字"）; document.writeを 
} 
のdocument.write（ "子节点个数：" + int.length + "<BR>"）。
</ SCRIPT>

6.最初と最後の項のアクセス子ノード

firstChild //戻り値「のchildNodes」最初の子の配列。選択したノードに子がない場合は、このプロパティはNULLを返します。

構文：node.firstChild //とelementNode.childNodesは[0]と同じ効果です。

lastChild //戻り値「のchildNodes」最初の子の配列。選択したノードに子がない場合は、このプロパティはNULLを返します。

構文：node.lastChild //とelementNode.childNodes [elementNode.childNodes.length-1]と同じ効果です。

例えば：

<DIV ID = "詐欺"> 
<P>ジャバスクリプト</ P> 
の<div> jQueryの</ div> 
<H5> PHP </ H5> 
</ div> 
<スクリプトタイプ= "テキスト/ javascriptの"> 
VARのx =文書.getElementById（ "CON"）。
document.write（ "第一个子节点：" + x.firstChild.nodeName + "<BR>"）; 
document.write（ "最后一个子节点：" + x.lastChild.nodeName）。
</ SCRIPT>

7.アクセス親

parentNode //ノードの親を取得します。

语法：elementNode.parentNode

例えば：

<DIV ID = "テキスト"> 
<P ID = "CON">のparentNode获取指点节点的父节点</ P> 
</ div> 
<スクリプトタイプ= "テキスト/ javascriptの"> 
するvar MYNODE =のdocument.getElementById（ "CON 「）; 
document.write（mynode.parentNode.nodeName）。
</ SCRIPT>

注：唯一の親は、ブラウザの互換性の問題、ブラウザタブクロムは、Firefox、等との間のギャップは、テキスト・ノードとみなすことができます。

8.アクセス兄弟

（同じツリー階層内の）ノードに戻ります// nextSibling後に続きます。

構文：nodeObject.nextSibling

（同じツリー階層で）返すことができpreviousSiblingは//ノードの前に続きます。

構文：nodeObject.previousSibling

例えば：

<ulの上記のid = "はmyList"> 
<上記のid = "ITEM1"を言及したLI>コーヒー</ LI> 
<LI上記ID = "ITEM2">ティーます。</ li> 
</ ulの> 
<P-上記ID = "デモ"言及>取得するにはボタンをクリックします同胞の最初のプロジェクトの下で。</ P> 
<ボタンのonclick = "MyFunctionを（）">試みる</ボタン> 
<SCRIPT> 
関数MyFunctionを（）
{ 
VAR X =のdocument.getElementById（ "デモ"）; 
x.innerHTML =のdocument.getElementById（「ITEM1 「）.nextSibling.innerHTML; 
} 
</ SCRIPT>

注意：いいえ、そのようなノードの場合、このプロパティはnullを返します。ノードによって取得された2つの性質。Internet Explorerは、他のブラウザは無視されませんが（例えば、改行）は、ノード間に発生する空白テキストノードを無視します。

問題の解決策：ノードのnodeType 1、要素ノードの場合は、スキップするかどうかを決定します。

すなわち、この記事のためにすべてです、私は学習を支援したいです

また、記事に興味がある可能性があります。

記事の同時リリース： https://www.geek-share.com/detail/2775368631.html

JavaScriptのHTML DOMノード共通のユーザーインターフェイス要素

また、記事に興味がある可能性があります。

おすすめ