KnowHub

#ノードインターフェース

すべての DOM ノード オブジェクトは Node インターフェイスを継承し、いくつかの共通のプロパティとメソッドを持ちます。これが DOM 操作の基礎です。

プロパティ

Node.prototype.nodeType

nodeType 属性は、ノードのタイプを示す整数値を返します。

document.nodeType // 9

上記のコードでは、ドキュメント ノードのタイプ値は 9 です。

Node オブジェクトは、これらの型の値に対応するいくつかの定数を定義します。

document.nodeType === Node.DOCUMENT_NODE // true

上記のコードでは、ドキュメント ノードの nodeType 属性は定数 Node.DOCUMENT_NODE と等しくなります。

さまざまなノードの nodeType 属性値と対応する定数は次のとおりです。

  • ドキュメントノード (ドキュメント): 9、定数 Node.DOCUMENT_NODE に対応
  • 要素ノード (要素): 1、定数 Node.ELEMENT_NODE に対応
  • 属性ノード (attr): 2、定数 Node.ATTRIBUTE_NODE に対応
  • テキストノード (テキスト): 3、定数 Node.TEXT_NODE に対応
  • ドキュメントフラグメントノード (DocumentFragment): 11、定数 Node.DOCUMENT_FRAGMENT_NODE に対応
  • ドキュメント タイプ ノード (DocumentType): 10、定数 Node.DOCUMENT_TYPE_NODE に対応します。
  • コメントノード (Comment): 8、定数 Node.COMMENT_NODE に対応

ノード タイプを決定する場合、「nodeType」属性を使用するのが一般的な方法です。

var ノード = document.documentElement.firstChild;
if (node.nodeType === Node.ELEMENT_NODE) {
  console.log('このノードは要素ノードです');
}

Node.prototype.nodeName

nodeName プロパティはノードの名前を返します。

// HTMLコードは以下の通り
// <div id="d1">こんにちは</div>
var div = document.getElementById('d1');
div.nodeName // "DIV"

上記のコードでは、要素ノード <div> の nodeName 属性は、大文字のタグ名 DIV です。

各ノードのnodeName属性値は以下のとおりです。

  • ドキュメントノード(ドキュメント): #document ・要素ノード(要素)：大文字のタグ名
  • 属性ノード (attr): 属性の名前
  • テキストノード(テキスト): #text
  • ドキュメントフラグメントノード(DocumentFragment): #document-fragment
  • 文書タイプノード(DocumentType): 文書のタイプ
  • コメントノード(コメント): #comment

Node.prototype.nodeValue

nodeValue プロパティは、現在のノード自体のテキスト値を表す文字列を返します。このプロパティは読み取りおよび書き込み可能です。

テキスト ノード (text)、コメント ノード (comment)、属性ノード (attr) のみがテキスト値を持つため、これら 3 種類のノードの nodeValue は結果を返すことができ、他のタイプのノードは null を返します。同様に、nodeValue 属性の値を設定できるのはこれら 3 種類のノードのみであり、他の種類のノードの設定は無効です。

// HTMLコードは以下の通り
// <div id="d1">こんにちは</div>
var div = document.getElementById('d1');
div.nodeValue // null
div.firstChild.nodeValue // "こんにちは"

上記のコードでは、「div」は要素ノードであり、「nodeValue」属性は「null」を返します。 div.firstChild はテキスト ノードなので、テキスト値を返すことができます。

Node.prototype.textContent

textContent プロパティは、現在のノードとそのすべての子孫ノードのテキスト コンテンツを返します。

// HTMLコードは
// <div id="divA">これは<span>一部</span>のテキストです</div>

document.getElementById('divA').textContent
// これはテキストです

textContent 属性は、現在のノード内の HTML タグを自動的に無視し、すべてのテキスト コンテンツを返します。

この属性は読み取りおよび書き込み可能です。この属性の値を設定すると、元のすべての子ノードが新しいテキスト ノードに置き換えられます。また、HTML タグを自動的にエスケープできるという利点もあります。これは、ユーザーが投稿したコンテンツに適しています。

document.getElementById('foo').textContent = '<p>GoodBye!</p>';

上記のコードがテキストを挿入すると、<p> タグをタグとして扱うのではなく、テキストとして解釈します。

テキスト ノード (text)、コメント ノード (comment)、および属性ノード (attr) の場合、textContent 属性の値は nodeValue 属性と同じです。他のタイプのノードの場合、このプロパティは、各子ノード (注釈ノードを除く) の内容を連結して返します。ノードに子がない場合は、空の文字列が返されます。

文書ノード(document)と文書型ノード(doctype)のtextContent属性はnullです。ドキュメント全体の内容を読みたい場合は、document.documentElement.textContent を使用できます。

Node.prototype.baseURI

baseURI 属性は、現在の Web ページの絶対パスを表す文字列を返します。この属性に基づいて、ブラウザは Web ページ上の相対パス URL を計算します。このプロパティは読み取り専用です。

// 現在の Web ページの URL は
// http://www.example.com/index.html
document.baseURI
// "http://www.example.com/index.html"

Web ページの URL を読み取ることができない場合、baseURI 属性は null を返します。

この属性の値は通常、現在の Web サイトの URL (つまり、「window.location」属性) によって決まりますが、HTML の「」タグを使用してこの属性の値を変更できます。

<base href="http://www.example.com/page.html">

設定すると、baseURI 属性は <base> タグで設定された値を返します。

Node.prototype.ownerDocument

Node.ownerDocument プロパティは、現在のノードが配置されている最上位のドキュメント オブジェクト、つまり document オブジェクトを返します。

var d = p.ownerDocument;
d === ドキュメント // true

document オブジェクト自体の ownerDocument プロパティは、null を返します。

Node.prototype.nextSibling

Node.nextSibling プロパティは、現在のノードの直後にある最初の兄弟ノードを返します。現在のノードの後ろに兄弟ノードがない場合は、「null」が返されます。

// HTMLコードは以下の通り
// <div id="d1">こんにちは</div><div id="d2">世界</div>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');

d1.nextSibling === d2 // true

上記のコードでは、d1.nextSibling は、d1 の直後の兄弟ノード d2 です。

このプロパティにはテキスト ノードとコメント ノード (<!-- comment -->) も含まれることに注意してください。したがって、現在のノードの後に​​スペースがある場合、このプロパティはコンテンツをスペースとして含むテキスト ノードを返します。

nextSibling 属性を使用すると、すべての子ノードをトラバースできます。

var el = document.getElementById('div1').firstChild;

while (el !== null) {
  console.log(el.nodeName);
  el = el.nextSibling;
}

上記のコードは、「div1」ノードのすべての子ノードを走査します。

Node.prototype.previousSibling

previousSibling プロパティは、現在のノードの前にある最も近い兄弟ノードを返します。現在のノードの前に兄弟ノードがない場合は、「null」が返されます。

// HTMLコードは以下の通り
// <div id="d1">こんにちは</div><div id="d2">世界</div>
var d1 = document.getElementById('d1');
var d2 = document.getElementById('d2');

d2.previousSibling === d1 // true

上記のコードでは、d2.previousSibling は、d2 の前の兄弟ノード d1 です。

このプロパティにはテキスト ノードとコメント ノードも含まれることに注意してください。したがって、現在のノードの前にスペースがある場合、このプロパティはコンテンツをスペースとして含むテキスト ノードを返します。

Node.prototype.parentNode

parentNode プロパティは、現在のノードの親ノードを返します。ノードの場合、その親ノードは、要素ノード (element)、ドキュメント ノード (document)、およびドキュメント フラグメント ノード (documentfragment) の 3 つのタイプのみです。

if (node.parentNode) {
  ノード.parentNode.removeChild(ノード);
}

上記のコードでは、「node」ノードが「node.parentNode」プロパティを通じてドキュメントから削除されます。

文書ノード (document) と文書フラグメント ノード (documentfragment) の親ノードは両方とも「null」です。さらに、生成後に DOM ツリーに挿入されていないノードについては、親ノードも「null」になります。

Node.prototype.parentElement

parentElement プロパティは、現在のノードの親要素ノードを返します。現在のノードに親ノードがない場合、または親ノードのタイプが要素ノードでない場合は、「null」が返されます。

if (node.parentElement) {
  ノード.parentElement.style.color = '赤';
}

上記のコードでは、親要素ノードのスタイルが赤に設定されています。

親ノードは、要素ノード、ドキュメント ノード (document)、ドキュメント フラグメント ノード (documentfragment) の 3 つのタイプのみであるためです。 parentElement 属性は、後者の 2 種類の親ノードを除外することと同じです。

Node.prototype.firstChild、Node.prototype.lastChild

firstChild プロパティは、現在のノードの最初の子ノードを返すか、現在のノードに子ノードがない場合は null を返します。

// HTMLコードは以下の通り
// <p id="p1"><span>最初のスパン</span></p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "スパン"

上記のコードでは、「p」要素の最初の子ノードは「span」要素です。

要素ノードに加えて、firstChild が返すものはテキスト ノードまたはコメント ノードである場合もあることに注意してください。

// HTMLコードは以下の通り
// <p id="p1">
// <span>最初のスパン</span>
// </p>
var p1 = document.getElementById('p1');
p1.firstChild.nodeName // "#text"

上記のコードでは、「p」要素と「span」要素の間に空白文字があるため、「firstChild」はテキスト ノードを返します。

lastChild プロパティは、現在のノードの最後の子ノードを返すか、現在のノードに子ノードがない場合は null を返します。使い方は firstChild 属性と同じです。

Node.prototype.childNodes

childNodes プロパティは、現在のノードのすべての子ノードをメンバーに含む配列のようなオブジェクト (NodeList コレクション) を返します。

var Children = document.querySelector('ul').childNodes;

上記のコードでは、「children」はすべて「ul」要素の子ノードです。

このプロパティを使用すると、ノードのすべての子ノードをトラバースできます。

var div = document.getElementById('div1');
var Children = div.childNodes;

for (var i = 0; i < Children.length; i++) {
  // ...
}

ドキュメント ノード (document) には、ドキュメント タイプ ノード (docType) と HTML ルート要素ノードの 2 つの子ノードがあります。

var Children = document.childNodes;
for (var i = 0; i < Children.length; i++) {
  console.log(children[i].nodeType);
}
// 10
// 1

上記のコードでは、文書ノードの最初の子ノードのタイプは 10 (つまり、文書タイプ ノード)、2 番目の子ノードのタイプは 1 (つまり、要素ノード) です。

要素ノードに加えて、childNodes プロパティの戻り値にはテキスト ノードとコメント ノードも含まれることに注意してください。現在のノードに子ノードが含まれていない場合は、空の NodeList コレクションが返されます。 NodeList オブジェクトは動的コレクションであるため、子ノードが変更されると、返される結果に即座に反映されます。

Node.prototype.isConnected

isConnected プロパティは、現在のノードがドキュメント内にあるかどうかを示すブール値を返します。

var test = document.createElement('p');
test.isConnected // false

document.body.appendChild(テスト);
test.isConnected // true

上記のコードでは、「test」ノードはスクリプトによって生成されたノードです。ドキュメントが挿入される前は、「isConnected」プロパティは「false」を返し、挿入後は「true」を返します。

方法

Node.prototype.appendChild()

appendChild() メソッドは、ノード オブジェクトをパラメータとして受け取り、それを最後の子ノードとして現在のノードに挿入します。このメソッドの戻り値は、挿入されたドキュメントの子ノードです。

var p = document.createElement('p');
document.body.appendChild(p);

上記のコードは、新しい <p> ノードを作成し、それを document.body の末尾に挿入します。

パラメータ ノードが DOM 内にすでに存在するノードである場合、appendChild() メソッドはそれを元の位置から新しい位置に移動します。

var div = document.getElementById('myDiv');
document.body.appendChild(div);

上記のコードでは、既存のノード「myDiv」が挿入され、その結果、ノードは元の位置から「document.body」の末尾に移動されます。

appendChild() メソッドのパラメータが DocumentFragment ノードの場合、DocumentFragment ノード自体ではなく、DocumentFragment のすべての子ノードが挿入されます。戻り値は空の​​ DocumentFragment ノードです。

Node.prototype.hasChildNodes()

hasChildNodes メソッドは、現在のノードに子ノードがあるかどうかを示すブール値を返します。

var foo = document.getElementById('foo');

if (foo.hasChildNodes()) {
  foo.removeChild(foo.childNodes[0]);
}

上記のコードは、「foo」ノードに子ノードがある場合、最初の子ノードを削除することを示しています。

子ノードには、要素ノードだけでなく、すべてのタイプのノードが含まれることに注意してください。ノードにスペースが 1 つだけ含まれている場合でも、hasChildNodes メソッドは true を返します。

ノードに子ノードがあるかどうかを確認するにはさまざまな方法があります。そのうちの 3 つを紹介します。

  • node.hasChildNodes()
  • node.firstChild !== null
  • node.childNodes && node.childNodes.length > 0

hasChildNodes メソッドは、firstChild 属性と nextSibling 属性を組み合わせて、現在のノードのすべての子孫ノードを走査します。

関数 DOMComb(親, コールバック) {
  if (parent.hasChildNodes()) {
    for (var ノード = 親.firstChild; ノード; ノード = ノード.nextSibling) {
      DOMComb(ノード、コールバック);
    }
  }
  コールバック(親);
}

// 使用法
DOMComb(document.body, console.log)

上記のコードでは、「DOMComb」関数の最初のパラメータは指定されたノードで、2 番目のパラメータはコールバック関数です。このコールバック関数は、指定されたノードと、指定されたノードのすべての子孫ノードに順番に作用します。

Node.prototype.cloneNode()

cloneNode メソッドはノードのクローンを作成するために使用されます。子ノードのクローンを同時に作成するかどうかを示すパラメーターとしてブール値を受け取ります。戻り値は複製された新しいノードです。

var cloneUL = document.querySelector('ul').cloneNode(true);

この方法を使用する場合、いくつかの注意事項があります。

(1) ノードのクローンを作成すると、ノードのすべての属性がコピーされますが、addEventListener メソッドと on- 属性 (すなわち、node.onclick = fn) が失われ、これにイベント コールバック関数が追加されます。ノード。

(2) このメソッドによって返されるノードはドキュメント内にありません。つまり、親ノードを持たないため、「Node.appendChild」などのメソッドを使用してドキュメントに追加する必要があります。

(3) ノードのクローンを作成した後、同じ id 属性 (つまり id="xxx") を持つ 2 つの Web ページ要素が DOM に表示される場合があります。この場合、要素の 1 つの id 属性が必要です。変更される。元のノードに「name」属性がある場合は、それも変更する必要がある場合があります。

Node.prototype.insertBefore()

insertBefore メソッドは、親ノード内の指定された位置にノードを挿入するために使用されます。

var selectedNode =parentNode.insertBefore(newNode,referenceNode);

insertBefore メソッドは 2 つのパラメータを受け取ります。最初のパラメータは挿入されるノード newNode であり、2 番目のパラメータは親ノード parentNode 内の子ノード referenceNode です。 newNode は子ノード referenceNode の前に挿入されます。戻り値は、挿入された新しいノード newNode です。

var p = document.createElement('p');
document.body.insertBefore(p, document.body.firstChild);

上記のコードでは、新しい <p> ノードを作成し、それを document.body.firstChild の前に挿入します。これが document.body の最初の子ノードになります。

insertBefore メソッドの 2 番目のパラメータが null の場合、新しいノードは現在のノード内の最後の位置に挿入されます。つまり、最後の子ノードになります。

var p = document.createElement('p');
document.body.insertBefore(p, null);

上記のコードでは、p が document.body の最後の子ノードになります。これは、「insertBefore」の 2 番目のパラメータが省略できないことも示しています。

挿入されるノードが現在の DOM 内の既存のノードである場合、そのノードは元の位置から削除され、新しい位置に挿入されることに注意してください。

「insertAfter」メソッドがないため、新しいノードを親ノードの子ノードの後ろに挿入する場合は、「insertBefore」メソッドと「nextSibling」属性を組み合わせて使用​​してシミュレートできます。

parent.insertBefore(s1, s2.nextSibling);

上記のコードでは、「parent」は親ノード、「s1」は新しいノード、「s2」は「s1」ノードを「s2」ノードの後ろに挿入できることを意味します。 s2 が現在のノードの最後の子ノードである場合、 s2.nextSibling は null を返します。このとき、s1 ノードは現在のノードの最後に挿入され、現在のノードの最後の子ノードになります。現在のノード。これは直後のノードに等しい。その後に s2 が続きます。

挿入されるノードのタイプが DocumentFragment である場合、DocumentFragment ノード自体ではなく、DocumentFragment のすべての子ノードが挿入されます。戻り値は空の​​ DocumentFragment ノードになります。

Node.prototype.removeChild()

removeChild メソッドは子ノードをパラメータとして受け取り、現在のノードから子ノードを削除するために使用されます。戻り値は削除された子ノードです。

var divA = document.getElementById('A');
divA.parentNode.removeChild(divA);

上記のコードは、「divA」ノードを削除します。このメソッドは、「divA」ではなく、「divA」の親ノードで呼び出されることに注意してください。

現在のノードのすべての子ノードを削除する方法は次のとおりです。

var 要素 = document.getElementById('top');
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

削除されたノードはメモリ内にまだ存在しますが、DOM の一部ではなくなります。したがって、ノードを削除した後も、別のノードの下に挿入するなどして、引き続き使用できます。

パラメータ ノードが現在のノードの子ノードではない場合、removeChild メソッドはエラーを報告します。

Node.prototype.replaceChild()

replaceChild メソッドは、現在のノードの子ノードを新しいノードに置き換えるのに使用されます。

var replaceNode =parentNode.replaceChild(newChild, oldChild);

上記のコードでは、replaceChild メソッドは 2 つのパラメーターを受け取ります。最初のパラメーター newChild は置換に使用される新しいノードであり、2 番目のパラメーター oldChild は置換される子ノードです。戻り値は、置換されたノード oldChild です。

var divA = document.getElementById('divA');
var newSpan = document.createElement('span');
newSpan.textContent = 'Hello World!';
divA.parentNode.replaceChild(newSpan, divA);

上記のコードは、指定されたノード divA を置き換える方法です。

Node.prototype.contains()

「contains」メソッドは、パラメータ ノードが次の 3 つの条件のいずれかを満たすかどうかを示すブール値を返します。

  • パラメータ ノードは現在のノードです。
  • パラメータ ノードは現在のノードの子ノードです。
  • パラメータ ノードは、現在のノードの子孫ノードです。
document.body.contains(ノード)

上記のコードは、パラメータ ノード node が現在のドキュメントに含まれているかどうかをチェックします。

現在のノードが「contains」メソッドに渡され、「true」を返すことに注意してください。

nodeA.contains(nodeA) // true

Node.prototype.compareDocumentPosition()

compareDocumentPosition メソッドの使用法は、contains メソッドとまったく同じで、パラメーター ノードと現在のノードの間の関係を示す 6 ビットのバイナリ値を返します。

バイナリ値 | 10 進値 | --------|------|----- 000000 | 両方のノードが同じです 000001 | 2 つのノードが同じドキュメント内にありません (つまり、1 つのノードが現在のドキュメント内にありません) 000010 | パラメータ ノードは現在のノードの前にあります。 000100 | パラメータ ノードは現在のノードの後ろにあります 001000 | パラメータ ノードには現在のノードが含まれます。 010000 | 16 現在のノードにはパラメータ ノードが含まれています 100000 | ブラウザ内部使用

// HTMLコードは以下の通り
// <div id="mydiv">
// <form><input id="test" /></form>
// </div>

var div = document.getElementById('mydiv');
var input = document.getElementById('test');

div.compareDocumentPosition(input) // 20
input.compareDocumentPosition(div) // 10

上記のコードでは、ノード div にはノード input (バイナリ 010000) が含まれており、ノード input はノード div (バイナリ 000100) の後ろにあるため、最初の compareDocumentPosition メソッドは20(バイナリ010100、つまり010000 + 000100)を返し、2番目のcompareDocumentPositionメソッドは10(バイナリ001010)を返します。

CompareDocumentPosition の戻り値の意味はビットごとに定義されているため、特定の意味を確認したい場合はビットごとの演算子を使用する必要があります。

var head = document.head;
var body = ドキュメント.ボディ;
if (head.compareDocumentPosition(body) & 4) {
  console.log('ドキュメント構造は正しいです');
} それ以外 {
  console.log('<body> を <head> の前に置くことはできません');
}

上記のコードでは、compareDocumentPosition の戻り値は 4 (マスクとも呼ばれます) と AND 演算 (&) され、<head> が <body の前にあるかどうかを示すブール値が取得されます。 >。

Node.prototype.isEqualNode()、Node.prototype.isSameNode()

isEqualNode メソッドは、2 つのノードが等しいかどうかをチェックするために使用されるブール値を返します。いわゆる等しいノードとは、同じタイプ、同じ属性、同じ子ノードを持つ 2 つのノードを指します。

var p1 = document.createElement('p');
var p2 = document.createElement('p');

p1.isEqualNode(p2) // true

isSameNode メソッドは、2 つのノードが同じノードであるかどうかを示すブール値を返します。

var p1 = document.createElement('p');
var p2 = document.createElement('p');

p1.isSameNode(p2) // false
p1.isSameNode(p1) // true

Node.prototype.normalize()

normalize メソッドは、現在のノード内のすべてのテキスト ノード (テキスト) をクリーンアップするために使用されます。空のテキスト ノードが削除され、隣接するテキスト ノードが 1 つにマージされます。これは、空のテキスト ノードと隣接するテキスト ノードが存在しないことを意味します。

var ラッパー = document.createElement('div');

Wrapper.appendChild(document.createTextNode('パート 1 '));
Wrapper.appendChild(document.createTextNode('パート 2 '));

Wrapper.childNodes.length // 2
ラッパー.ノーマライズ();
Wrapper.childNodes.length // 1

上記のコードで normalize メソッドを使用する前、wrapper ノードには 2 つの隣接するテキスト子ノードがあります。 「normalize」メソッドを使用した後、2 つのテキスト子ノードが 1 つにマージされます。

このメソッドは Text.splitText の逆メソッドです。詳細については、「テキスト ノード オブジェクト」の章を参照してください。

Node.prototype.getRootNode()

getRootNode() メソッドは、現在のノードが配置されているドキュメントのルート ノード document を返します。これは、ownerDocument 属性と同じ効果があります。

document.body.firstChild.getRootNode() === ドキュメント
// 真実
document.body.firstChild.getRootNode() === document.body.firstChild.ownerDocument
// 真実

このメソッドは、document.ownerDocument とは異なり、document ノード自体で使用できます。

document.getRootNode() // ドキュメント
document.ownerDocument // null

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章