JavaScript は dom 要素を取得するために何を使用しますか?

dom 要素を取得する Javascript メソッド: 1. getElementById() を使用して ID に基づいて要素を取得します; 2. getElementsByName() を使用して name 属性に基づいて要素を取得します; 3. getElementsByTagName() を使用しますタグ名に基づいて要素を取得するには getElementsByClassName() を使用し、クラス名に基づいて要素を取得します; 5. querySelector() を使用して、指定されたセレクターに基づいて最初の要素オブジェクトを返します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

js は 3 つの部分で構成されます:

• ECMAScript: js 構文

• DOM: ドキュメント オブジェクト モデル

• BOM: ブラウザ オブジェクト モデル

WebApi は W3C 組織によって開発された標準です。WebApi では主にDOM と BOM の学習も webapi の js の固有の部分ですが、js 自体の固有のカテゴリでも、js 学習の一部でもありません。ただし、WebApiを学ぶ前に、WebApiを学ぶ基礎となるjsの基礎が必要です。

DOM

DOM はじめに: ドキュメント オブジェクト モデル (DOM) は、拡張可能なマークアップ言語 (HTML または XML) を処理するために w3c グループによって推奨される標準プログラミング インターフェイスです。w3c は一連の DOM を定義しています。 Web ページのコンテンツ、構造、スタイルを変更できるインターフェイス。

• Document: ページはドキュメントです。ドキュメントは DOM で使用されて表現されます。

• 要素: ページ内のすべてのタグは要素です。 DOM 要素を使用して

• ノードを表す: Web ページ内のすべてのコンテンツはノード (ラベル、属性、テキスト、コメントなど) と見なされます。 DOM 内のノードを使用して表す

DOM 要素の取得

要素の取得方法

• ID に基づいて取得、 getElementById () メソッドを使用して、id 要素を持つオブジェクトを取得します。

sj
 

• name 属性に基づいて取得します。 getElementsByName( ) メソッドを使用して、指定された名前属性のオブジェクト コレクションを返します。

document.getElementsByName('name')

• タグ名に基づいて取得します。getElementsByTagName() メソッドを使用して、属性のコレクションを返します。指定されたタグ名のオブジェクト。

 
 
花海
 
晴天
 
七里香
 
花海
 
晴天
 
 
 
花海2
 
晴天2
 
七里香2
 
花海2
 
晴天2
 
  

注: 取得するのはオブジェクトのコレクションであるため、要素を操作したい場合はトラバースする必要があります。取得される要素オブジェクトは動的です

HTML5の新しいメソッドで取得されます

• getElementsByClassName('Type')クラス名に従って要素を取得します

// 1、使用 getElementByClassName 获取 class类名元素 var box = document.getElementsByClassName("box"); // 可以获取全部的 class名为 box的元素 console.log(box);

• querySelector('selector') 指定されたセレクターに基づいて最初の要素オブジェクトを返します

// 2、querySelector 返回指定选择器的第一个元素对象 切记：里面选择器需要添加 .box #nav var firstBox = document.querySelector('.box') // 只能获取第一个class名为 box 的元素 console.log(firstBox); var nav = document.querySelector('#nav') console.log(nav); var li = document.querySelector('li') // 获取的也是第一个 li 元素 console.log(li);

• querySelectorAll('selector') 指定されたすべてのセレクターを返します要素オブジェクトのコレクション

// 3、querySelectorAll 返回 全部的 li 元素 var allBox = document.querySelectorAll('li') console.log(allBox);

特殊要素取得(body, html)

• body要素の取得

// 1. 获取 body 元素 var bodyEle = document.body; console.log(bodyEle)

• HTML 要素の取得

// 2. 获取 HTML 元素 var htmlEle = document.documentElement; console.log(htmlEle)

注: 重要な点は、通常の要素を取得するいくつかの方法を覚えておくことです。 body と html は一般的には使用されません。理解するためだけに使用されます。

【関連する推奨事項:JavaScript ビデオ チュートリアル、基本プログラミング ビデオ]

以上がJavaScript は dom 要素を取得するために何を使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。