基本的なDOMチュートリアル：DOMを使用します

著者：Eve Cole 更新時間：2025-06-10 07:48:02

DOM（テキストオブジェクトモデル）のフレームワークとノードを理解した後、最も重要なことは、これらのノードを使用してHTML Webページを処理することです

DOMノードノードの場合、使用する一連のプロパティと方法があります。一般的に使用されるのは、次の表です。

改善：http：//www.w3school.com.cn/xmldom/dom_element.asp

1。アクセスノード

BOMは、ノードにアクセスするためのいくつかの境界メソッドを提供します。一般的に使用されるのは、getElementsByTagname（）とgetElementById（）です。

コードコピーは次のとおりです。

function searchdom（）{

var oli = document.getElementsByTagname（ "li"）;

var j = oli.length;

var j2 = oli [5] .tagname;

var j3 = oli [0] .childnodes [0] .nodevalue;

document.write（j+"<br>"+j2+"<br>"+j3+"<br>"）;

}

</script>

<body>

<ul>クライアント言語

<li> javascript </li>

</ul>

<ul>サーバーサイド言語

</ul>

</body>

document.getElementById（）

コードコピーは次のとおりです。

window.onload = function（）{

function findid（）{

var j4 = oli2.tagname;

document.write（j4）;

}

var oli2 = document.getElementById（ "inn"）;

oli2.onclick = findId;

}

</script>

コードコピーは次のとおりです。

<html>

x = document.getElementsByTagname（ 'div'）[0];

document.write（ "div css class：" + x.classname）;

document.write（ "<br />"）;

document.write（ "代替方法："）;

document.write（document.getElementById（ 'myid'）。className）;

</script>

</body>

</html>

// id get className

2。ノードタイプを検出します

ノードタイプは、ノードのノードタイプで検出でき、1つのパラメーターは12の整数値を返します。

document.nodetypeなどの式形式

本当に有用なのは、DOM（i）モデルのモデルノードで言及されている3つのタイプです

要素ノード、テキストノード、属性ノード

1.要素ノードは要素ノードの値を1です

2。属性ノードは属性ノードの値を2です

3。テキストノードの返信値は3です

コードコピーは次のとおりです。

window.onload = function（）{

function findid（）{

var j5 = oli2.nodetype;

document.write（ "nodeType：" + j5 + "<br>"）;

}

var oli2 = document.getElementById（ "inn"）;

oli2.onclick = findId;

}

</script>

返品：nodeType：1

これは、一部のノードを個別に処理できることを意味します。これは、ノードを検索するときに非常に実用的です。後で説明します。

3.父子兄弟関係を使用して、ノードを見つける

最初のセクションアクセスノードでは、ノードのChildNodes属性を使用して、要素ノードに含まれるテキストノードにアクセスします。

このセクションでは、ノードの父と兄弟関係を使用してノードを見つけます

*HasChildNodesとChildNodes属性を使用して、このノードに含まれるすべてのノードを取得します

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function mydomispector（）{

var oul = document.getElementById（ "mylist"）; // <ul>タグを取得します

var domstring = "";

if（oul.haschildnodes（））{//子ノードがあるかどうかを判断します

var och = oul.childnodes;

for（var i = 0; i <och.length; i ++）// 1つずつ検索します

domstring + = och [i] .nodename + "<br>";

}

document.write（domstring）;

}

</script>

</head>

<body>

<li>甘くて酸っぱいrib骨</li>

<li>ケージ蒸し豚</li>

<li>栗のローストチキン</li>

<li> mapo豆腐</li>

</ul>

</body>

4.DOMは、ノードの親ノードを取得します

コードコピーは次のとおりです。

<スクリプト言語= "javascript">

window.onload = function（）{

var food = document.getElementById（ "mydarfood"）;

document.write（food.parentnode.tagname）

}

</script>

</head>

<body>

<ul>

<li>甘くて酸っぱいrib骨</li>

<li>ケージ蒸し豚</li>

<li id = "mydearfood">栗のローストチキン</li>

<li> mapo豆腐</li>

</ul>

// ulに戻ります

親ノードを使用して、指定されたノードの親ノードが正常に取得されました

5。ParentNodeプロパティを使用します

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function（）{

var food = document.getElementById（ "mydarfood"）;

var parentelm = food.parentnode;

while（parentelm.classname！= "Colorful" && parentelm！= document.body）

parentelm = parentelm.parentnode; //ずっと調べます

document.write（ "tagename："+parentelm.tagname+"<br>"）;

document.write（ "claaname："+parentelm.classname+"<br>"）;

document.write（ "typeof："+typeof（food）+"<br>"）;

}

</script>

</head>

<body>

<div>

<ul>

<span>

<li>甘くて酸っぱいrib骨</li>

<li>ケージ蒸し豚</li>

<li id = "mydearfood">栗のローストチキン</li>

<li> mapo豆腐</li>

</span>

</ul>

</div>

</body> <br> // output <br> // tagename：div <br> claaname：colorful <br> typeof：object

子ノードから始めて、ノードのクラス名が「カラフル」になるまで、親ノードを上方に検索します

6.ドムの兄弟愛

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function（）{

var foods = document.getElementById（ "mydarfood"）;

var nextf = foods.nextsibling;

alert（ "nextsibling：" +nextf.tagname +"<br>"）;

}

</script>

</head>

<body>

<div>

<ul>

<span>

<li>甘くて酸っぱいrib骨</li>

<li>ケージ蒸し豚</li>

<li id = "mydearfood">栗のローストチキン</li>

<li> mapo豆腐</li>

</span>

</ul>

</div>

</body>

次のシーリングと以前のプロパティを使用して、兄弟ノードにアクセスするのは素晴らしいことです。

ただし、IEブラウザでのみ機能します

コードとの適切な互換性を持つためには、判断を下すためにnodeTypeを使用する必要があります

以下は互換性です。

コードコピーは次のとおりです。

<head>

<スクリプト言語= "javascript">

function nextsib（node）{

var templast = node.parentnode.lastchild;

//それが最後のノードであるかどうかを判断してください。もしそうなら、nullを返します

if（node ==テンプラスト）

nullを返します。

var tempobj = node.nextsibling;

//要素ノードが見つかるまで、後続の兄弟ノードを1つずつ検索します

while（tempobj.nodetype！= 1 && tempobj.nextsibling！= null）

tempobj = tempobj.nextsibling;

// 3点演算子、それが要素ノードの場合、ノード自体を返し、それ以外の場合はnullを返します

return（tempobj.nodetype == 1）？tempobj：null;

}

関数prevsib（node）{

var tempfirst = node.parentnode.firstchild;

//最初のノードであるかどうかを判断してください。もしそうなら、nullを返します

if（node == tempfirst）

nullを返します。

var tempobj = node.previoussibling;

//要素ノードが見つかるまで、前の兄弟ノードを1つずつ検索します

while（tempobj.nodetype！= 1 && tempobj.previoussibling！= null）

tempobj = tempobj.previoussibling;

return（tempobj.nodetype == 1）？tempobj：null;

}

mydomispectorを機能させる（）{

var myitem = document.getElementById（ "mydearfood"）;

//次の要素兄弟ノードを取得します

var nextlistitem = nextsib（myitem）;

//前の要素兄弟ノードを取得します

var preatristitem = prevsib（myitem）;

alert（ "last item：" +（（nextlistitem！= null）？nextlistitem.firstchild.nodevalue：null） + "preatristitem：" +（（perristitem！= null）？preatristitem.firstchild.nodevalue：null））;

}

</script>

</head>

<ul>

<li>甘くて酸っぱいrib骨</li>

<li>ケージ蒸し豚</li>

<li id = "mydearfood">栗のローストチキン</li>

<li> mapo豆腐</li>

</ul>

</body>

7.ノードプロパティを設定します

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function（）{

//写真を取得します

var imgdatabe = document.getElementsByTagname（ "IMG"）[0];

//画像のタイトル属性を取得します

imgdatabe.setattribute（ "src"、 "02.gif"）;

imgdatabe.setattribute（ "title"、 "Friendly Slope"）;

document.write（imgdatabe.getattribute（ "title"））;

document.write（imgdatabe.getattribute（ "alt"））;

document.write（imgdatabe.getattribute（ "node-data"））;

document.write（imgdatabe.getattribute（ "node_data"））;

}

</script>

</head>

<body>

<div>

</body>

setattribute（）メソッドを使用して、ノード属性を設定します

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function（）{

var bkk = document.getElementById（ "new5"）;

var clickbk = document.getElementById（ "Qiehuan"）;

clickbk.onclick = dsqiehuan;

関数dsqiehuan（）{

bkk.setattribute（ "class"、 "xxx"）

}

</script>

<style>

.xxx {color：#ddd}

</style>

</head>

<body>

555

</div>

<em id = "qiehuan"> switch </em>

</body>

8.CreateElement（）作成ノードを作成します

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function（）{

var op = document.createelement（ "p"）;

var otext = document.createTextNode（ "domを使用してノードを作成する"）;

var otext1 = document.createTextNode（ "domを使用してノード123を作成する"）;

Op.AppendChild（OTEXT）;

Op.AppendChild（OTEXT1）;

document.body.appendChild（op）;

}

</script>

</head>

<body>

<p>ここには元々pがcreateElement（）</p>をテストしました

</body>

9.RemoveChildはノードを削除します

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function（）{

var op = document.getElementsByTagname（ "P"）[0];

op.parentnode.removechild（op）; //エンディングは.removechild（op）、not not .RemoveChild（ "OP"）です。

}

</script>

</head>

<body>

<p>ここには元々pがcreateElement（）</p>をテストしました

</body>

10. insertbefore（）特定のノードの前にノードを挿入します

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function（）{

var opold = document.getElementsByTagname（ "P"）[0];

var opnew = document.createelement（ "p"）;

var otext = document.createTextNode（ "new Node"）

opnew.appendchild（otext）;

opold.parentnode.insertbefore（opnew、opold）; // 2つのパラメーターを受信します。1つは新しいパラメーター、もう1つは古いノードパラメーターです

}

</script>

</head>

<body>

<p>元々p </p>がありました

</body>

11.特定のノードの後に新しい要素を挿入します（2015年1月9日追加）

DOMが提供するメソッドは、InsertBefore（）を使用してターゲット要素の前に新しい要素を追加することができます。または、appendChild（）メソッドを使用して、親要素の子供の末尾の最後に新しい要素を追加します（例：アドレス）。

実際には、特定の要素の最後に新しい要素を追加するためによく使用されます。 DOMメソッドにはinsertBefore（）メソッドはありませんが、既存の知識を使用することを使用して書き込むことができます。

コードのアイデアは次のとおりです

コードコピーは次のとおりです。

関数intersuter（newElement、TargetElement）{

var outdoor = targetelement.parentnode; //ターゲット要素の親要素を見つけます

if（adarent.lastchild == targetelement）//ターゲットが最後の要素の場合

Autdoor.AppendChild（NewElement）; //最後の要素に直接追加します

else //次の要素の親要素ノードに挿入する前に

outdoor.insertbefore（newElement、targetelement.nextsibling）

例：（要素の外側に追加）元のインスタンス：アドレス

コードコピーは次のとおりです。

<head>

<メタcharset = "utf-8">

</head>

<p id = "ターゲット"> second </p>

関数intersuter（newElement、TargetElement）{

var outdoor = targetelement.parentnode; //ターゲット要素の親要素を見つけます

if（adarent.lastchild == targetelement）//ターゲットが最後の要素の場合

Autdoor.AppendChild（NewElement）; //最後の要素に直接追加します

else //次の要素の親要素ノードに挿入する前に

outdoor.insertbefore（newElement、targetelement.nextsibling）

}

関数interp（）{

var oooparent = document.getElementById（ "ターゲット"）;

var ooonewp = document.createelement（ "a"）;

oonewp.setattribute（ "href"、 "http://www.qq.com"）;

var ootextp = document.createTextNode（ "link"）;

oonewp.appendchild（ooetextp）;

intersuter（ooonewp、ooparent）;

}

</script>

</body>

例：要素に追加されました

12.ドキュメントの断片化を追加して、実行効率を向上させます

コードコピーは次のとおりです。

<head>

<Title> ChildNodes </title>

<スクリプト言語= "javascript">

window.onload = function（）{

var opold = document.getElementsByTagname（ "P"）[0];

var acolors = ["Red"、 "Green"、 "Blue"、 "Magenta"、 "Yellow"、 "Chocolate"、 "Black"、 "Aquamarine"、 "Lime"、 "Fuchsia"、 "Brass"、 "Azure"、 "Brown"、 "ブロンズ "、" deeppink "、" aliceblue "、"灰色 "、"銅 "、" coral "、" feldspar "、" orange "、" Orchid "、" Pink "、" plum "、" Quartz "、"紫色 "];

var ofragment = document.createdocumentfragment（）; //ドキュメントの断片化を作成します

for（var i = 0; i <acolors.length; i ++）{

var op = document.createelement（ "p"）;

var otext = document.createTextNode（acolors [i]）;

Op.AppendChild（OTEXT）;

Ofragment.AppendChild（OP）; //最初にフラグメントにノードを追加します

}

//document.body.appendChild(ofragment）; //最後にページに追加されました

opold.parentnode.insertbefore（ofragment、opold）; // insertedBefeedと組み合わせて、ノードにドキュメントフラグメントを追加する

}

</script>

</head>

<body>

<p>元々p </p>がありました

</body>