JSがHTML DOM元素を取得する8つの方法
HTML DOMとは
文書オブジェクトモデル(Dcument Object Model)は、W 3 C組織が推奨する処理を拡張するための標準的なプログラミングインターフェースです.簡単に理解すると、HTML DOMはHTML要素をどのように取得、変更、追加または削除するかに関する基準です.私たちはJavaScriptを使ってウェブページのすべての操作をDOMで行います.
この文章は深く研究しないで、いろいろな使い方と穴を一つにまとめてみます.
JSがDOM元素を取得する方法(8種類) IDにより取得される .経由でname属性 タグ名(getElements ByTagName)による クラス名(getElements ByClass Name) .htmlの取得方法 bodyを取得する方法(Dcument.body) セレクタによって一つの要素 を取得する.セレクタによって要素のセットを取得し、説明を開始します. 1.IDで取得(getElementById)
坑～坑坑坑坑坑坑坑:1.複数のidがあれば最初のもの、つまり最初に出現するものはどれですか?普通は同じIDがページに二回も現れません.2.フォーム要素のnameは、IE 6、7でID値として取得されます.ですから、これらを定義する時は注意してください.3.IE 6、7では大文字と小文字は区別しない.4.要素のIDを直接使用してこの要素を表すことができます.(項目では推奨しない)5.IDで要素を取得するコンテキストは、documentだけです.なぜ文脈はdocumentでなければならないのですか?getElement ByIdという方法はDcument類の原型の上にあるので、あなたは聞き取れなかったかもしれません.
2.name属性を通じて(getElementsByName)
坑～坑坑坑坑坑坑坑坑坑坑坑坑坑:1.取得した結果はクラス配列であり、配列ではない.2.IEブラウザではフォーム要素しか入手できません.もちろん、フォーム要素だけを取得するのは一般的です.ie 10からフォーム要素だけでなくてもいいです.3.文脈はdocumentだけで、原因はgetElement ByIdと同じです.
3.ラベル名(getElementsByTagName)による
坑～坑坑坑坑坑坑坑坑坑坑坑:1.取得した結果はクラス配列です.2.文脈は必ずしもdocumentではなく、getElement ByTagName方法はDcument類のプロトタイプだけでなく、Element類のプロトタイプにもあるので、documentも元素もこの方法を使用することができます.まだわからないなら、文章の最後にもう一度説明します.
4.クラス名(getElements ByClass Name)による
使い方(getElementsByTagNameと似ています):1.文脈はdocumentでもいいし、要素でもいいです.2.パラメータは元素の類名です.3.戻り値はクラスの配列で、戻り空の配列が見つかりませんでした.
坑～坑坑坑坑坑坑坑坑坑坑坑:1.取得した結果はクラス配列です.2.IE 8および以前のバージョンは互換性がない.このような使いやすい方法は互換性がないのが残念です.
5.htmlの取得方法(document.documentElement)
document.documentElementはhtmlというラベルを専門に取得したものです.
6.bodyを取得する方法(Dcument.body)
Dcument.bodyはもっぱらbodyというラベルを取得したのです.
7.選択器で要素を取得する(querySelector)
使い方:1.文脈はdocumentでもいいし、要素でもいいです.2.パラメータはセレクタで、例えば「div.classiname」です.3.戻り値は1つの要素だけを取得します.
坑～坑坑坑坑坑坑坑坑坑坑:この方法はIE 7及び以前のバージョンに対応していません.今はIE 7対応の会社も考えていないようです.
8.選択器で要素のセットを取得する(querySelectorAll)
使い方はquerySelectorと似ています.1.コンテキストはdocumentでもいいし、要素でもいいです.2.パラメータはセレクタで、例えば「div.classiname」です.3.戻り値はクラスの配列です.
坑～坑坑坑坑坑坑坑:同querySelector、互換性がないIE 7.
原生JSを使ってDOM元素を獲得する8つの方法を説明しました.次に、なぜある方法がdocumentでしか使えないのかを説明します.
divで栗を挙げます.divはHTMLDivElement類の一例です.documentはHTMLDocumentの例です.
彼らの相続関係:HTMLDivElement＞HTMLEment＞Element＞Node＞EventTarget HTMLDocument＞Dcument＞Node＞EventTarget
私達はすべて知っています.子類は父類の属性と方法を使うことができます.彼らの同じ継承関係はNodeとEventTarget、つまり彼らはNodeとEventTarget上の方法を使うことができます.Node上のnodeName、parent Nodeなど、EventTarget上のaddEvent Listenerなどです.getElement ByIdはDcument類の原型のみでHTMLDivElementはDcument類を継承していませんので、divはgetElement ById法を使用することができません.getElements ByTagNameは、Dcument類の原型にもElement類の原型にありますので、divとdocumentは、getElementメソッドを使用することができます.その他同理
本文の内容は全部自分で整理して検証していないので、間違いがあれば、他の人を誤解しないように指摘してください.転載を歓迎しますが、出典を明記してください.
文書オブジェクトモデル(Dcument Object Model)は、W 3 C組織が推奨する処理を拡張するための標準的なプログラミングインターフェースです.簡単に理解すると、HTML DOMはHTML要素をどのように取得、変更、追加または削除するかに関する基準です.私たちはJavaScriptを使ってウェブページのすべての操作をDOMで行います.
この文章は深く研究しないで、いろいろな使い方と穴を一つにまとめてみます.
JSがDOM元素を取得する方法(8種類)
document.getElementById('id')
坑～坑坑坑坑坑坑坑:1.複数のidがあれば最初のもの、つまり最初に出現するものはどれですか?普通は同じIDがページに二回も現れません.2.フォーム要素のnameは、IE 6、7でID値として取得されます.ですから、これらを定義する時は注意してください.3.IE 6、7では大文字と小文字は区別しない.4.要素のIDを直接使用してこの要素を表すことができます.(項目では推奨しない)5.IDで要素を取得するコンテキストは、documentだけです.なぜ文脈はdocumentでなければならないのですか?getElement ByIdという方法はDcument類の原型の上にあるので、あなたは聞き取れなかったかもしれません.
2.name属性を通じて(getElementsByName)
document.getElementsByName('name')
坑～坑坑坑坑坑坑坑坑坑坑坑坑坑:1.取得した結果はクラス配列であり、配列ではない.2.IEブラウザではフォーム要素しか入手できません.もちろん、フォーム要素だけを取得するのは一般的です.ie 10からフォーム要素だけでなくてもいいです.3.文脈はdocumentだけで、原因はgetElement ByIdと同じです.
3.ラベル名(getElementsByTagName)による
document.getElementsByTagName('p');
var oDiv = document.getElementById('divId');
oDiv.getElementsByTagName('p');
坑～坑坑坑坑坑坑坑坑坑坑坑:1.取得した結果はクラス配列です.2.文脈は必ずしもdocumentではなく、getElement ByTagName方法はDcument類のプロトタイプだけでなく、Element類のプロトタイプにもあるので、documentも元素もこの方法を使用することができます.まだわからないなら、文章の最後にもう一度説明します.
4.クラス名(getElements ByClass Name)による
使い方(getElementsByTagNameと似ています):1.文脈はdocumentでもいいし、要素でもいいです.2.パラメータは元素の類名です.3.戻り値はクラスの配列で、戻り空の配列が見つかりませんでした.
坑～坑坑坑坑坑坑坑坑坑坑坑:1.取得した結果はクラス配列です.2.IE 8および以前のバージョンは互換性がない.このような使いやすい方法は互換性がないのが残念です.
5.htmlの取得方法(document.documentElement)
document.documentElementはhtmlというラベルを専門に取得したものです.
6.bodyを取得する方法(Dcument.body)
Dcument.bodyはもっぱらbodyというラベルを取得したのです.
7.選択器で要素を取得する(querySelector)
使い方:1.文脈はdocumentでもいいし、要素でもいいです.2.パラメータはセレクタで、例えば「div.classiname」です.3.戻り値は1つの要素だけを取得します.
坑～坑坑坑坑坑坑坑坑坑坑:この方法はIE 7及び以前のバージョンに対応していません.今はIE 7対応の会社も考えていないようです.
8.選択器で要素のセットを取得する(querySelectorAll)
使い方はquerySelectorと似ています.1.コンテキストはdocumentでもいいし、要素でもいいです.2.パラメータはセレクタで、例えば「div.classiname」です.3.戻り値はクラスの配列です.
坑～坑坑坑坑坑坑坑:同querySelector、互換性がないIE 7.
原生JSを使ってDOM元素を獲得する8つの方法を説明しました.次に、なぜある方法がdocumentでしか使えないのかを説明します.
divで栗を挙げます.divはHTMLDivElement類の一例です.documentはHTMLDocumentの例です.
彼らの相続関係:HTMLDivElement＞HTMLEment＞Element＞Node＞EventTarget HTMLDocument＞Dcument＞Node＞EventTarget
私達はすべて知っています.子類は父類の属性と方法を使うことができます.彼らの同じ継承関係はNodeとEventTarget、つまり彼らはNodeとEventTarget上の方法を使うことができます.Node上のnodeName、parent Nodeなど、EventTarget上のaddEvent Listenerなどです.getElement ByIdはDcument類の原型のみでHTMLDivElementはDcument類を継承していませんので、divはgetElement ById法を使用することができません.getElements ByTagNameは、Dcument類の原型にもElement類の原型にありますので、divとdocumentは、getElementメソッドを使用することができます.その他同理
本文の内容は全部自分で整理して検証していないので、間違いがあれば、他の人を誤解しないように指摘してください.転載を歓迎しますが、出典を明記してください.