JS で DOM ノードを使用する方法

今回はJSでDOMノードを使う方法と、JSでDOMノードを使う際の注意点を紹介します。実際の事例を見てみましょう。

DOM操作は、JSでは非常に一般的であると言えます。一部の要素の追加や削除など、Webページの多くの小さな機能の実装はJSで実装できます。それでは、いくつかの関数を実装するには DOM で何を知る必要があるのでしょうか?今日の記事では、JS での DOM 操作について簡単に紹介します。 ！

1. DOM ツリーのノード

1. DOM ノードは、要素ノード (ラベル ノード)、属性ノード、テキスト ノードの 3 つのカテゴリに分類されます。

属性ノードとテキストノードは両方とも要素ノードの子ノードです。 したがって、操作する場合は、最初に要素ノードを選択し、次に属性とテキストを変更する必要があります。

【要素ノードの表示】

1. getElementシリーズメソッドを使用します:

具体的なHTMLコードは次のとおりです:

//通过ID来查看元素属性
var li = document.getElementById("first"); 
//通过类名来查看元素属性
var lis1 = document.getElementsByClassName("cls");
//通过名字来查看元素属性
var lis2 = document.getElementsByName("name");
//通过标签名来查看元素属性
var lis3 = document.getElementsByTagName("li");

注:

① IDが重複する場合、同じ名前を持つことはできません。 、最初の 1 つだけを取得できます。

② 要素ノードを取得する際は、DOMツリーが読み込まれるまで待つ必要があります。

2 つの処理方法:

a. ドキュメントの最後に JS を記述します。

b. コードを window.onload 関数に記述します。

③ getElements シリーズを通じて取得されたデータは配列形式である必要があります。演算中に取得 各要素は演算可能ですが、配列を直接演算することはできません。

document.getElementsByTagName("li")[0].click = function(){}

④ この一連のメソッドでは、最初に DOM ノードを選択し、選択した DOM ノードから必要なノードを選択することもできます:

document.getElementById("p1").getElementsByTagName("li");

[querySelector シリーズのメソッドを通じて]

① セレクター名を渡して返す最初に見つかった要素。 通常、ID:

var dq1 = document.querySelector("#id");

を検索するために使用されます。② セレクター名を渡し、見つかった要素をすべて返します。 見つかった数に関係なく、配列形式で返されます。この方法はより汎用性が高く、あらゆる属性を正確に見つけることができます。

var dqs1 = document.querySelectorAll("#p1 li");

【設定された属性ノードの表示】

1. 属性ノードの表示: .getAttribute("属性名");

2. 属性ノードの設定: .setAttribute("属性名", "属性値") ;

注: .setAttribute() は古いバージョンの IE では互換性の問題がある可能性があるため、代わりに . シンボルを使用できます。

【JSでCSSを変更する様々な方法】

1. setAttributeを使用してクラスとスタイルを設定します。

document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");

2. .className を使用してクラス セレクターを追加します。

document.getElementById("first").className = "class1";

3. .style.style を使用して、単一のスタイルを直接変更します。 スタイル名にはキャメルケース表記を使用する必要があることに注意してください。

document.getElementById("first").style.fontSize = "18px";

4. .style または .style.cssText を使用してシリアルレベルのスタイルを追加します:

// IE不兼容
document.getElementById("first").style = "color:red;"; 
//所有浏览器兼容
document.getElementById("first").style.cssText = "color:red;";

【テキストノードの表示/設定】

1. .innerHTML: ノード内の HTML コードを取得または設定します。

2. .innerText: HTML コードのテキストを取得または設定することはできません。

2. 階層ノードの操作

1. .childNodes: 現在のノードのすべての子ノードを取得します (要素ノードとテキスト ノードを含む)。

.children: 現在のノードのすべての要素の子ノードを取得します (テキスト ノードを除く)。

2. .parentNode: 現在のノードの親ノードを取得します。

3. .firstChild: 改行などのテキスト ノードを含む最初の子ノードを取得します。

.firstElementChild: 最初の要素ノードを取得します。 テキスト ノードは含まれません。

.lastChild: 改行などのテキスト ノードを含む最後の子ノードを取得します。 .previousSibling: を取得します。現在のノードの前の兄弟ノード (テキスト ノードを含む)

.previousElementSibling: 現在のノードの前の要素の兄弟ノードを取得します。

.nextSibling: テキスト ノードを含む、現在のノードの次の兄弟ノードを取得します。

.nextElementSibling: 現在のノードの次の要素の兄弟ノードを取得します。

5. 現在のノードのすべての属性ノードを取得します。 配列形式を返します。

【新しいノードの作成と追加】

1. document.createElement("ラベル名"): 新しいノードを作成し、作成された新しいノードを返します。

新しいノードの属性を設定するには、.setAttribute() と連携する必要があります。

2. 親ノード.insertBefore(新しいノード、ターゲット ノード): 親ノードで、ターゲット ノードの前に新しいノードを挿入します。

親ノード.appendChild (新しいノード): 親ノードの最後に新しいノードを挿入します。

3. ソースnode.cloneNode(true): ノードのクローンを作成します。

true を渡すと、ソース ノードとそのソース ノードのすべての子ノードが複製されることを意味し、

false が渡されるかどうかは、現在のノードのみが複製され、子ノードは複製されないことを意味します。

【ノードの削除、置換】

1. 親ノード.removeChild(子ノード): 指定した子ノードを親ノードから削除します。

2. 親ノード.replaceChild(新しいノード、古いノード): 親ノードから、古いノードを新しいノードに置き換えます。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSを使わずにメニューを開閉する

vueを操作してIDで一覧ページから詳細ページにジャンプする方法

以上がJS で DOM ノードを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。