さらに詳しいJavaScript DOM学習メモ_JavaScriptスキル
多くの js dom 学習資料を読んだ後、これが非常に詳細であることがわかったので、
1. DOM の基本
1. ノード レベル
について学ぶために再版しました。 Document -- the most 他のすべてのノードが接続される最上位ノード。
DocumentType - DTD 参照のオブジェクト表現 ( 構文を使用)。子ノードを含めることはできません。
DocumentFragment - Document などの他のノードを保存できます。
要素 -
Attr - 属性名と属性値のペアを表します。このノード タイプには子ノードを含めることはできません。
Text - XML ドキュメント内の開始タグと終了タグの間の通常のテキスト、または CDataSection に含まれるテキストを表します。このノード タイプには子ノードを含めることはできません。
CDataSection - のオブジェクト表現。このノード タイプには、子ノードとしてテキスト ノード Text のみを含めることができます。
Entity - DTD 内のエンティティ定義を表します ( など)。このノード タイプには子ノードを含めることはできません。
EntityReference - 「」などのエンティティ参照を表します。このノード タイプには子ノードを含めることはできません。
Processingstruction - PI を表します。このノード タイプには子ノードを含めることはできません。
Comment - XML コメントを表します。このノード
表記 - DTD で定義された表記を表します。
ノード インターフェイスは、すべてのノード タイプに含まれるプロパティとメソッドを定義します。
DOM は、ノードに加えて、ノードとともに使用できるいくつかのヘルパー オブジェクトも定義しますが、DOM ドキュメントの必須の部分ではありません。
NodeList - 要素の子ノードを表すために使用される値に従ってインデックス付けされたノード配列。
NamedNodeMap - 要素の特性を表すために使用される値と名前の両方によってインデックス付けされたノード テーブル。
2. 関連ノードにアクセスします
次のセクションでは、次の HTML ページについて検討します
<html> <head> <title>DOM Example</title> </head> <body> <p>Hello World!</p> <p>Isn't this exciting?</p> <p>You're learning to use the DOM!</p> </body> </html>
変数 oHtml には、
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
childNodes 属性を使用して同じジョブを実行することもできます。角括弧でマークされた通常の JavaScript 配列として扱うだけです:
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
角括弧は実際にはJavaScript での NodeList の単純な実装。実際、childNodes リストから子ノードを取得する正式な方法は、 item() メソッドを使用することです。
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item( 1);
HTML DOM ページは、
var oBody = document.body;
3 つの変数 oHtml、oHead、oBody を使用して、それらの間の関係を判断できます。
alert(oHead.parentNode==oHtml);
alert (oBody.parentNode==oHtml);
alert(oBody.previousSibling==oHead);
alert(bHead.nextSibling==oBody);
alert(oHead.ownerDocument==document); >上記はすべて「true」を出力します。
3. 属性の処理
前述したように、Node インターフェースにはすでに属性メソッドがあり、すべてのタイプのノードに継承されていますが、
Element ノードのみが属性を持つことができます。 Element ノードのattributes 属性は、実際には NameNodeMap であり、そのコンテンツにアクセスして処理するためのメソッドがいくつか用意されています:
getNamedItem(name)--nodename 属性値が name と等しいノードを返します;
removeNamedItem(name) --delete ノード名属性値が name と等しいノード。
setNamedItem(node) -- ノードをリストに追加し、nodeName 属性に従ってインデックスを付けます。
item(pos) -- NodeList と同様に、位置 pos のノード ;
注: これらのメソッドは属性値ではなく、Attr ノードを返すことに注意してください。
NamedNodeMap オブジェクトには、含まれるノードの数を示す length 属性もあります。
NamedNodeMap が属性を表すために使用され、各ノードが Attr ノードである場合、nodeName 属性は属性名に設定され、nodeValue 属性は属性値に設定されます。たとえば、次のような要素があるとします。
Hello world!
同時に、変数 oP があるとします。この要素へのポインタが含まれています。したがって、次のように id 属性の値にアクセスできます:
var sId = oP.attributes.getNamedItem("id").nodeValue;
もちろん、id 属性に数値的にアクセスすることもできますが、これは少し直感的ではありません:
var sId = oP.attributes.item(1).nodeValue;
nodeValue 属性に新しい値を割り当てることで id 属性を変更することもできます:
oP.attributes.getNamedItem( "id").nodeValue=" newId";
Attr ノードには、nodeValue 属性と完全に同等 (かつ完全に同期) する value 属性もあり、nodeName 属性と同期する name 属性もあります。これらのプロパティを自由に使用して、プロパティを変更または変更できます。
このメソッドはやや面倒であるため、DOM では属性へのアクセスを支援する 3 つの要素メソッドが定義されています。
getAttribute(name) - attributes.getNamedItem(name).value と同等
setAttribute(name,newvalue) -- attribute.getNamedItem(name).value=newvalue;
removeAttribute(name) と等しい --attribute.removeNamedItem(name) と等しい。
4. 指定されたノードにアクセスします。
(1)
getElementsByTagName()
コア (XML) DOM は、すべての A を含む tagName() を返す getElementsByTagName() メソッドを定義します。タグ名) 属性が指定された値と等しい要素の NodeList。 Element オブジェクトでは、tagName 属性は常に、不等号の直後の名前と等しくなります。たとえば、
var oImgs = document.getElementsByTagName("img");すべてのグラフィックを oImgs に保存した後は、角かっこを使用します。または、Item() メソッド (getElementsByTagName() は childNodes と同じ NodeList を返します) を使用すると、子ノードにアクセスするのと同じように、これらのノードに 1 つずつアクセスできます。
ページの最初の段落にあるすべての画像のみを取得したい場合は、次のように最初の段落要素で getElementsByTagName() を呼び出すことで取得できます。
var oPs = document.getElementByTagName("p ") ;
var oImgsInp = oPs[0].getElementByTagName("img");
アスタリスク メソッドを使用してドキュメント内のすべての要素を取得できます:
var oAllElements = document.getElementsByTagName("* " );
パラメータがアスタリスクの場合、IE6.0 はすべての要素を返しません。代わりに Document.all を使用する必要があります。
(2)
getElementsByName()
HTML DOM は getElementsByName() を定義します。これは、name 属性が指定された値と等しいすべての要素を取得するために使用されます。 (3)
getElementById()这是HTML DOM定义的第二种方法,它将返回id特性等于指定值的元素。在HTML中,id特性是唯一的--这意味着没有两个元素可以共享同一个id。毫无疑问这是从文档树中获取单个指定元素最快的方法。
注:如果给定的ID匹配某个元素的name特性,IE6.0还会返回这个元素。这是一个bug,也是必须非常小心的一个问题。
5.创建新节点
最常用到的几个方法是
createDocumentFragment()--创建文档碎片节点
createElement(tagname)--创建标签名为tagname的元素
createTextNode(text)--创建包含文本text的文本节点
createElement()、createTextNode()、appendChild()
<html> <head> <title>createElement() Example</title> <script type="text/javascript"> function createMessage() { var oP = document.createElement("p"); var oText = document.createTextNode("Hello World!"); oP.appendChild(oText); document.body.appendChild(oP); } </script> </head> <body onload="createMessage()"> </body> </html>
removeChild()、replaceChild()、insertBefore()
删除节点
<html> <head> <title>removeChild() Example</title> <script type="text/javascript"> function removeMessage() { var oP = document.body.getElementsByTagName("p")[0]; oP.parentNode.removeChild(oP); } </script> </head> <body onload="removeMessage()"> <p>Hello World!</p> </body> </html>
替换
<html> <head> <title>replaceChild() Example</title> <script type="text/javascript"> function replaceMessage() { var oNewP = document.createElement("p"); var oText = document.createTextNode("Hello Universe!"); oNewP.appendChild(oText); var oOldP = document.body.getElementsByTagName("p")[0]; oOldP.parentNode.replaceChild(oNewP, oOldP); } </script> </head> <body onload="replaceMessage()"> <p>Hello World!</p> </body> </html>
新消息添加到旧消息之前
<html> <head> <title>insertBefore() Example</title> <script type="text/javascript"> function insertMessage() { var oNewP = document.createElement("p"); var oText = document.createTextNode("Hello Universe!"); oNewP.appendChild(oText); var oOldP = document.getElementsByTagName("p")[0]; document.body.insertBefore(oNewP, oOldP); } </script> </head> <body onload="insertMessage()"> <p>Hello World!</p> </body> </html>
createDocumentFragment()
一旦把节点添加到document.body(或者它的后代节点)中,页面就会更新并反映出这个变化。对于少量的更新,这是很好的,然而,当要向document添加大量数据时,如果逐个添加这些变动,这个过程有可能会十分缓慢。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中,假如想创建十个新段落。
<html> <head> <title>insertBefore() Example</title> <script type="text/javascript"> function addMessages() { var arrText = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"]; var oFragment = document.createDocumentFragment(); for (var i=0; i < arrText.length; i++) { var oP = document.createElement("p"); var oText = document.createTextNode(arrText[i]); oP.appendChild(oText); oFragment.appendChild(oP); } document.body.appendChild(oFragment); } </script> </head> <body onload="addMessages()"> </body> </html>
6.让特性像属性一样
大部分情况下,HTML DOM元素中包含的所有特性都是可作为属性。
假设有如下图像元素:
如果要使用核心的DOM来获取和设置src和border特性,那么要用getAttribute()和setAttribute()方法:
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","mypicture2.jpg");
oImg.setAttribute("border",1);
然而,使用HTML DOM,可以使用同样名称的属性来获取和设置这些值:
alert(oImg.src);
alert(oImg.border);
oImg.src="mypicture2.jpg";
oImg.border ="1";
唯一的特性名和属性名不一样的特例是class属性,它是用来指定应用于某个元素的一个CSS类,因为class在ECMAScript中是一个保留字,在javascript中,它不能被作为变量名、属性名或都函数名。于是,相应的属性名就变成了className;
注:IE在setAttribute()上有很大的问题,最好尽可能使用属性。
7.table方法
为了协助建立表格,HTML DOM给
给
特性/方法 | 说明 |
caption | 指向 |
tBodies | |
tFoot | 指向 |
tHead | 指向元素(如果存在) |
rows | 表格中所有行的集合 |
createTHead() | 创建元素并将其放入表格 |
createTFood() | 创建 |
createCpation() | 创建 |
deleteTHead() | 删除元素 |
deleteTFood() | 删除 |
deleteCaption() | 删除 |
deleteRow(position) | 删除指定位置上的行 |
insertRow(position) | 在rows集合中的指定位置上插入一个新行 |
特性/方法 | 说明 |
rows | |
deleteRow(position) | 删除指定位置上的行 |
insertRow(position) | 在rows集合中的指定位置上插入一个新行 |
特性/方法 | 说明 |
cells | |
deleteCell(postion) | 删除给定位置上的单元格 |
insertCell(postion) | 在cells集合的给点位置上插入一个新的单元格 |
8. DOM を走査します
NodeIterator、TreeWalker
DOM Level2 関数。これらの関数は Mozilla と Konqueror/Safari でのみ利用できるため、ここでは紹介しません。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript で HTTP ステータス コードを取得する方法の紹介: フロントエンド開発では、バックエンド インターフェイスとの対話を処理する必要があることが多く、HTTP ステータス コードはその非常に重要な部分です。 HTTP ステータス コードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータス コードとは何ですか? HTTP ステータス コードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが
