一般的なjs domノードの操作方法まとめ-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

一般的なjs domノードの操作方法まとめ

php中世界最好的语言

May 21, 2018 pm 02:58 PM

javascript 説明書要約する

今回はJS共通DOMノード操作方法のまとめと、JS共通DOMノード操作方法にまとめられている注意事項についてお届けします。以下は実践的なケースですので見ていきましょう。

DOM の意味: DOM は、ブラウザープログラミングに基づいた一連の API インターフェイスであり、Web ページが読み込まれるときに JS にノードを操作する機能を提供します。ブラウザはページのドキュメントオブジェクトモデルを作成します。

ノード: W3C の HTML DOM 標準に従って、HTML ドキュメント内のすべてのコンテンツは 1 つのノードです。 1. ドキュメント全体が 1 つのドキュメントノードです。各ノードは HTML 要素

です。

3. HTML 要素内のテキストは
属性ノードです。したがって、HTML DOM は HTML になります。は、ノードツリーと呼ばれるツリー構造とみなされます。 HTML DOM を通じて、ノードツリー内のすべてのノードにアクセスできます。

1. ノードを作成し、ノード
1 を追加します。 code>createElement (ラベル名) は要素ノード (特定の要素) を作成します

2. appendChild (node) ノードを追加します

3. text content)テキストノードを作成します

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var opText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。
op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666”
document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素

ログイン後にコピー

2. ノードを挿入します

1. appendChild (node) もノードを挿入することで追加できます。既存の要素。その要素を元の位置から新しい位置に移動します。 createElement（标签名）创建一个元素节点（具体的一个元素）。
2、appendChild（节点）追加一个节点。
3、createTextNode（节点文本内容）创建一个文本节点

var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var op1 = document.getElementById("p1");
document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

ログイン後にコピー

二、插入节点

1、appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
2、insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。

var removeChild = document.body.removeChild(p1);//移除document对象的方法p1

ログイン後にコピー

三、删除、移除节点

1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。

var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2

ログイン後にコピー

四、替换节点

1、replaceChild(插入的节点，被替换的节点) 2. insertBefore(a,b) は、ノードが前に挿入されることを意味します。 b ノード。

for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
  if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
    console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
  }
}

ログイン後にコピー

3. ノードを削除します

1. removeChild(node) によって返される削除されたノード。まだドキュメント内にありますが、その位置はドキュメント内ではなくなりました

4. ノードを置き換えます

1. replaceChild(Inserted node, replacenode) 。ノードを置換し、2 つのパラメーターを受け入れます。最初のパラメーターは挿入されるノードで、2 番目のパラメーターは置換されるノード

5 を返します。 childNodes

テキストノードと要素ノードの子ノードが含まれます。

var oList = document.getElementById('list');//oList是做的ul的对象
var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象
//通过子节点查找父节点//parentNode：获取父节点
console.log(oChild.parentNode);//在控制器日志中显示父节点
console.log(oList.children);//在控制器日志中显示oList子节点
console.log(children.length)//子节点的个数

ログイン後にコピー

2、

A、childrenも子ノードを取得でき、それぞれIE6-8B、parentNode

と互換性があります。 : 親ノードを取得します

//查找第一个子节点的封装函数
function firstChild(ele) {
  if (ele.firstElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
    return ele.firstElementChild;
  } else {
    return ele.firstChild;
  }
}
firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色

ログイン後にコピー

3、A、firstChild; 最初の子ノードを見つけます。ブラウザ互換性の問題があります: firstChild は IE と互換性がありますが、firstElementChild は IE と互換性がありません。

//查找最后一个子节点的封装函数
function lastChild(ele) {
  if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
    return ele.lastElementChild;
  } else {
    return ele.lastChild;
  }
}
lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色

ログイン後にコピー

B、lastChild; lastElementChild最後の子ノードを検索します。ブラウザ互換性の問題があります: lastChild は IE と互換性がありますが、lastElementChild は IE と互換性がありません。

//查找下一个兄弟节点的封装函数
function nextSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.nextElementSibling;
  } else {
    return ele.nextSibling;
  }
}
nextSibling(oMid).style.background = 'red';

ログイン後にコピー

C、nextSibling; nextElementSibling 次の兄弟ノードを検索します。互換性の問題もあります。

//查找上一个兄弟节点的封装函数
function previousSibling(ele) {
  if (ele.nextElementSibling) {
    return ele.previousElementSibling;
  } else {
    return ele.previousSibling;
  }
}
previousSibling(oMid).style.background = 'red';

ログイン後にコピー

D、

previousSibling

;

previousElementSibling前の兄弟ノードを検索します。互換性の問題
もあります。

rrreee

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

🎜Vue でスコープ付きを使用する手順の分析🎜🎜🎜🎜🎜Vue カスタムコンポーネントで v-model を使用する手順の詳細な説明🎜🎜🎜

以上が一般的なjs domノードの操作方法まとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1675

CakePHP チュートリアル

1429

Laravel チュートリアル

1333

PHP チュートリアル

1278

C# チュートリアル

1257

Related knowledge

DirectX修復ツールの使い方は？ DirectX修復ツールの詳しい使い方 Mar 15, 2024 am 08:31 AM

DirectX 修復ツールは専門的なシステムツールであり、その主な機能は現在のシステムの DirectX 状態を検出することであり、異常が見つかった場合は直接修復できます。 DirectX 修復ツールの使い方がわからないユーザーも多いと思いますので、以下の詳細なチュートリアルを見てみましょう。 1. 修復ツールソフトウェアを使用して修復検出を実行します。 2. 修復の完了後、C++ コンポーネントに異常な問題があることを示すメッセージが表示された場合は、[キャンセル] ボタンをクリックし、[ツール] メニューバーをクリックしてください。 3. [オプション] ボタンをクリックし、拡張機能を選択して、[拡張機能の開始] ボタンをクリックします。 4. 拡張が完了したら、再検出して修復します。 5. 修復ツールの操作が完了した後も問題が解決しない場合は、エラーを報告したプログラムをアンインストールして再インストールしてみてください。

HTTP 525 ステータスコードの概要: その定義と応用を調べる Feb 18, 2024 pm 10:12 PM

HTTP 525 ステータスコードの概要: その定義と使用法を理解する HTTP (HypertextTransferProtocol) 525 ステータスコードは、SSL ハンドシェイク中にサーバーでエラーが発生し、安全な接続を確立できないことを意味します。 Transport Layer Security (TLS) ハンドシェイク中にエラーが発生すると、サーバーはこのステータスコードを返します。このステータスコードはサーバーエラーカテゴリに分類され、通常はサーバーの構成またはセットアップの問題を示します。クライアントが HTTPS 経由でサーバーに接続しようとすると、サーバーには

Linux システムでの system() 関数の使用法の概要 Feb 23, 2024 pm 06:45 PM

Linux での system() 関数の概要 Linux システムでは、system() 関数は非常に一般的に使用される関数であり、コマンドラインコマンドの実行に使用できます。この記事では、system() 関数を詳細に紹介し、いくつかの具体的なコード例を示します。 1. system() 関数の基本的な使用法 system() 関数の宣言は次のとおりです: intsystem(constchar*command); コマンドパラメーターは文字です。

Baidu Netdisk の使用方法 - Baidu Netdisk の使用方法 Mar 04, 2024 pm 09:28 PM

Baidu Netdisk の使い方をまだ知らない友人も多いので、以下では編集者が Baidu Netdisk の使い方を説明しますので、必要な場合は急いでご覧ください。ステップ 1: Baidu Netdisk をインストールした後、直接ログインします (図を参照); ステップ 2: 次に、ページのプロンプトに従って [マイ共有] と [転送リスト] を選択します (図を参照); ステップ 3: 「「友達共有」では、写真やファイルを友達と直接共有できます (図を参照); ステップ 4: 次に、「共有」を選択し、コンピューターファイルまたはネットワークディスクファイルを選択します (図を参照); 5 番目のステップ 1:次に、友達を見つけることができます (写真に示すように); ステップ 6: 「機能宝箱」で必要な機能を見つけることもできます (写真に示すように)。以上、編集者の意見です

KMS アクティベーションツールとは何ですか? KMS アクティベーションツールの使用方法は? KMS アクティベーションツールの使用方法は? Mar 18, 2024 am 11:07 AM

KMS ライセンス認証ツールは、Microsoft Windows および Office 製品のライセンス認証に使用されるソフトウェアツールです。 KMS は KeyManagementService の略で、鍵管理サービスです。 KMS ライセンス認証ツールは、KMS サーバーの機能をシミュレートして、コンピューターが仮想 KMS サーバーに接続して Windows および Office 製品をライセンス認証できるようにします。 KMS ライセンス認証ツールは、サイズが小さく、機能が強力です。ワンクリックで永続的にライセンス認証できます。インターネットに接続せずに、あらゆるバージョンのウィンドウシステムとあらゆるバージョンの Office ソフトウェアをライセンス認証できます。現在、最も成功しているツールです。頻繁に更新される Windows ライセンス認証ツール今日はそれを紹介します kms ライセンス認証作業を紹介します

ポットプレイヤーの使い方 - ポットプレイヤーの使い方 Mar 04, 2024 pm 06:10 PM

Potplayer は非常に強力なメディアプレーヤーですが、まだ Potplayer の使い方を知らない友達も多いので、今日は Potplayer の使い方を詳しく紹介して、皆さんのお役に立てればと思います。 1. PotPlayer のショートカットキー: PotPlayer プレーヤーのデフォルトの共通ショートカットキーは次のとおりです: (1) 再生/一時停止: スペース (2) 音量: マウスホイール、上下の矢印キー (3) 進む/戻る: 左右の矢印キー (4) ブックマーク: P- ブックマークの追加、H-ビューブックマーク (5) フルスクリーン/復元: Enter (6) 複数の速度: C-加速、7) 前/次のフレーム: D/

素早くコピー＆ペーストする方法を学ぶ Feb 18, 2024 pm 03:25 PM

コピー＆ペーストのショートカットキーの使い方コピー＆ペーストは、毎日パソコンを使っていると頻繁に遭遇する操作です。作業効率を向上させるためには、コピー＆ペーストのショートカットキーを使いこなすことが非常に重要です。この記事では、読者がコピーアンドペースト操作をより便利に実行できるように、一般的に使用されるコピーアンドペーストのショートカットキーをいくつか紹介します。コピーのショートカットキー: Ctrl+CCtrl+C はコピーのショートカットキーで、Ctrl キーを押しながら C キーを押すと、選択したテキスト、ファイル、画像などをクリップボードにコピーできます。このショートカットキーを使用するには、

ショートカットキーを使ってセルを結合する方法 Feb 26, 2024 am 10:27 AM

セルを結合するためのショートカットキーの使用方法日常業務では、表の編集や書式設定が必要になることがよくあります。セルの結合は、表の美しさと情報の表示効果を向上させるために、隣接する複数のセルを 1 つのセルに結合する一般的な操作です。 Microsoft ExcelやGoogle Sheetsなどの主流の表計算ソフトでは、セルの結合操作は非常に簡単でショートカットキーで実現できます。この2つのソフトでセルを結合するショートカットキーの使い方を紹介します。存在する

See all articles

一般的なjs domノードの操作方法まとめ

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック