JavaScriptのノードとリストの操作例まとめ_JavaScriptスキル
この記事の例では、JavaScript のノード操作とリスト操作のメソッドを要約しています。皆さんの参考に共有してください。詳細は以下の通りです。
(1) 新しいノードを作成します
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点
(2) 追加、削除、置換、挿入
appendChild() removeChild() replaceChild() insertBefore()
(3) 検索
getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性
このセクションで使用する HTML の例
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
1. 要素ノードを作成します
document.createElement() メソッドは要素の作成に使用され、作成される要素のタグ名である 1 つのパラメーターを受け取り、作成された要素ノードを返します
var div = document.createElement("div"); //创建一个div元素
div.id = "myDiv"; //设置div的id
div.className = "box"; //设置div的class
要素を作成した後、その要素をドキュメント ツリーに追加する必要もあります
2. 要素ノードを追加します
appendChild() メソッドは、childNodes リストの末尾にノードを追加するために使用され、追加される要素ノードを返します
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML = "项目四"; //向li内添加文本
ul.appendChild(li); //把li 添加到ul子节点的末尾追加後:
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
appendChild() メソッドは、既存の要素を追加し、その要素を元の位置から新しい位置に移動することもできます
var ul = document.getElementById("myList"); //获得ul
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
実行後 (IE):
<ul id="myList"> <li>项目二</li> <li>项目三</li> <li>项目一</li> </ul>
insertBefore() メソッド。ノードを最後に挿入せず、特定の位置に配置したい場合は、このメソッドを使用します。1 つ目は挿入されるノード、もう 1 つは 2 つのパラメーターです。 2 番目は参照ノードで、追加される要素ノードを返します
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前
追加後:
<ul id="myList"> <li>项目四</li> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul>
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾
追加後:
<ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li>项目四</li> </ul>
var ul = document.getElementById("myList"); //获得ul
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前
追加後:
<ul id="myList"> <li>项目一</li> <li>项目四</li> <li>项目二</li> <li>项目三</li> </ul>
3. 要素ノードを削除します
removeChild() メソッドは、ノードの削除に使用され、削除されるノードを 1 つのパラメータとして受け取り、削除されたノードを返します。削除されたノードはドキュメント内にまだ存在しますが、その位置はドキュメント内に存在しません。文書
var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
var ul = document.getElementById("myList"); //获得ul
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一个li，与上面不同，要考虑浏览器之间的差异
4. 要素ノードを置き換えます
replaceChild() メソッドは、ノードの置換に使用され、2 つのパラメーターを受け入れます。最初のパラメーターは挿入されるノード、2 番目のパラメーターは置換されるノードで、置換されたノードを返します
var ul = document.getElementById("myList"); //获得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
var ul = document.getElementById("myList"); //获得ul;
var li = document.createElement("li"); //创建li
li.innerHTML= "项目四"; //向li内添加文本
var lis = ul.getElementsByTagName("li") //获取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li
5. ノードをコピーします
cloneNode() メソッドはノードのコピーに使用され、ブール値パラメータを受け入れます。true はディープ コピー (ノードとそのすべての子ノードをコピー) を意味し、false は浅いコピー (子ノードをコピーするのではなく、ノード自体をコピーします) を意味します。 🎜>
var ul = document.getElementById("myList"); //获得ul
var deepList = ul.cloneNode(true); //深复制
var shallowList = ul.cloneNode(false); //浅复制
この JavaScript コードは、リスト項目の表示と作成、子ノードのコピー、ノード ツリーのコピーを行います。これは非常に便利な例であり、ツリー メニューを作成する場合に特に役立ちます。
操作効果は以下の通りです:
<html>
<head>
<title>建立列表项目</title>
<script language="JavaScript">
function printChilds(objNode) {
var strMsg = "节点名称 =" + objNode.nodeName + "\n";
if (objNode.hasChildNodes()){
var nodeCount = objNode.childNodes.length;
strMsg += "子节点数 = " + objNode.childNodes.length + "\n";
for(var i = 0; i < nodeCount; i++)
strMsg += "标记名称 = " + objNode.childNodes[i].nodeName + "\n";
alert(strMsg);
}
}
function copyNode(objNode, objDupNode, deep){
var tempNode = objDupNode.cloneNode(deep);
objNode.appendChild(tempNode);
}
</script>
</haed>
<body id="myBody">
<h2>建立列表项目</h2>
<hr>
<ul id="myUL">
<li>项目1
<li>项目2
<ol id="myOL">
<li>次项目1
<li>次项目2
</ol>
<li>项目3
</ul>
<form>
<input type="button" value="显示列表的子节点" onclick="printChilds(myUL)">
<input type="button" value="复制节点" onclick="copyNode(myUL, myUL.childNodes[1], false)">
<input type="button" value="复制节点树" onclick="copyNode(myUL.lastChild, myOL, true)">
</form>
</body>
</html>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7627
15
1389
52
89
11
31
140
PyCharm の使用法チュートリアル: 操作の実行方法を詳しく説明します
Feb 26, 2024 pm 05:51 PM
PyCharm は非常に人気のある Python 統合開発環境 (IDE) であり、Python 開発をより効率的かつ便利にするための豊富な機能とツールを提供します。この記事では、PyCharm の基本的な操作方法を紹介し、読者がすぐに使い始めてツールの操作に習熟できるように、具体的なコード例を示します。 1. PyCharm をダウンロードしてインストールします。 まず、PyCharm 公式 Web サイト (https://www.jetbrains.com/pyc) にアクセスする必要があります。
sudo とは何ですか?なぜ重要ですか?
Feb 21, 2024 pm 07:01 PM
sudo (スーパーユーザー実行) は、一般ユーザーが root 権限で特定のコマンドを実行できるようにする、Linux および Unix システムの重要なコマンドです。 sudo の機能は主に次の側面に反映されています。 権限制御の提供: sudo は、ユーザーにスーパーユーザー権限を一時的に取得することを許可することで、システム リソースと機密性の高い操作を厳密に制御します。一般のユーザーは、必要な場合にのみ sudo を介して一時的な権限を取得できるため、常にスーパーユーザーとしてログインする必要はありません。セキュリティの向上: sudo を使用すると、日常的な操作中に root アカウントの使用を回避できます。すべての操作に root アカウントを使用すると、誤った操作や不注意な操作には完全な権限が与えられるため、予期しないシステムの損傷につながる可能性があります。そして
Linux Deployの操作手順と注意事項
Mar 14, 2024 pm 03:03 PM
LinuxDeploy の操作手順と注意事項 LinuxDeploy は、ユーザーが Android デバイスにさまざまな Linux ディストリビューションを迅速に展開できるようにする強力なツールで、ユーザーはモバイル デバイスで完全な Linux システムを体験できます。この記事では、LinuxDeploy の操作手順と注意事項を詳しく紹介し、読者がこのツールをより効果的に使用できるように、具体的なコード例を示します。操作手順: Linux のインストールDeploy: まず、インストールします
Win10 起動パスワードの F2 キーを押すのを忘れた場合の対処方法
Feb 28, 2024 am 08:31 AM
おそらく多くのユーザーは、自宅に未使用のコンピュータを複数台持っており、長期間使用していなかったためにパワーオン パスワードを完全に忘れてしまったため、パスワードを忘れた場合の対処方法を知りたいと考えています。それでは、一緒に見てみましょう。 win10 起動パスワードの F2 キーを押し忘れた場合の対処方法 1. コンピューターの電源ボタンを押し、コンピューターの電源を入れるときに F2 キーを押します (コンピューターのブランドによって、BIOS に入るボタンが異なります)。 2. BIOS インターフェイスで、セキュリティ オプションを見つけます (コンピューターのブランドによって場所が異なる場合があります)。通常は上部の設定メニューにあります。 3. 次に、「SupervisorPassword」オプションを見つけてクリックします。 4. この時点で、ユーザーは自分のパスワードを確認できると同時に、その横にある [有効] を見つけて [無効] に切り替えることができます。
Huawei Mate60 Proのスクリーンショット操作手順の共有
Mar 23, 2024 am 11:15 AM
スマートフォンの普及に伴い、スクリーンショット機能は携帯電話を日常的に使用する上で必須のスキルの 1 つになりました。 Huaweiの主力携帯電話の1つであるHuawei Mate60Proのスクリーンショット機能は、当然のことながらユーザーの注目を集めています。今日は、誰もがより便利にスクリーンショットを撮れるように、Huawei Mate60Pro携帯電話のスクリーンショットの操作手順を共有します。まず、Huawei Mate60Pro携帯電話はさまざまなスクリーンショット方法を提供しており、個人の習慣に応じて自分に合った方法を選択できます。以下は、一般的に使用されるいくつかのインターセプトの詳細な紹介です。
PHP PDO チュートリアル: 基本から習得までの上級ガイド
Feb 19, 2024 pm 06:30 PM
1. PDO の概要 PDO は、データベースを操作するためのオブジェクト指向の方法を提供する PHP の拡張ライブラリです。 PDO は、Mysql、postgresql、oracle、SQLServer などのさまざまなデータベースをサポートします。 PDO を使用すると、開発者は統合 API を使用してさまざまなデータベースを操作できるため、さまざまなデータベースを簡単に切り替えることができます。 2. PDO はデータベースに接続します PDO を使用してデータベースに接続するには、まず PDO オブジェクトを作成する必要があります。 PDO オブジェクトのコンストラクターは、データベース タイプ、ホスト名、データベース ユーザー名、およびパスワードの 3 つのパラメーターを受け取ります。たとえば、次のコードは、mysql データベースに接続するオブジェクトを作成します。 $dsn="mysq
PHP 文字列操作: スペースを効果的に削除する実用的な方法
Mar 24, 2024 am 11:45 AM
PHP 文字列操作: スペースを効果的に削除する実用的な方法 PHP 開発では、文字列からスペースを削除する必要がある状況によく遭遇します。スペースを削除すると文字列がきれいになり、その後のデータ処理と表示が容易になります。この記事では、スペースを削除するための効果的かつ実践的な方法をいくつか紹介し、具体的なコード例を添付します。方法1: PHP組み込み関数trim()を使用する PHP組み込み関数trim()を使用すると、文字列の両端のスペース(スペース、タブ、改行などを含む)を削除でき、非常に便利で簡単です。使用します。
WeChat を Ele.me にバインドする方法
Apr 01, 2024 pm 03:46 PM
Ele.me は、さまざまな珍味を集めたソフトウェアです。オンラインで選択して注文できます。販売者は注文を受けてすぐに作成します。ユーザーはソフトウェアを通じて WeChat をバインドできます。具体的な内容を知りたい場合は、操作方法については、PHP 中国語 Web サイトを忘れずに確認してください。 WeChat を Ele.me にバインドする方法の手順: 1. まず Ele.me ソフトウェアを開き、ホームページに入った後、右下隅の [My] をクリックします; 2. 次に、My ページで、左上隅の[アカウント]; 3. 次に、携帯電話、WeChat、Alipay、および淘宝網をバインドできる個人情報ページに移動します. ここで、[WeChat] をクリックします; 4. 最後のクリック後、WeChat アカウントを選択しますこれは WeChat 認証ページでバインドする必要があり、[許可] をクリックするだけです。
