JavaScript が要素の属性、スタイル、クラス名を操作する方法の詳細な説明

#DOM - ドキュメント オブジェクト モデル

#ドキュメント ストリームを操作するためのプロパティとメソッドの完全なセット

• 操作ページのラベル(要素)

  操作ラベルの追加・削除・変更の確認
  操作ラベルの属性(id、class、type、…)
  操作ラベルのスタイル
  …
  

• コンテンツについて理解する

  -ドキュメント: ドキュメント フロー、ページ、ルート ノード、ただし要素 (タグ) は含まれません
  -html: すべてのタグを保持する最大の要素、ルート要素ノード
  -head: 特に現在のページの description タグを保持します。ここのコンテンツは通常、ページには表示されません
  -body: 特に保持します現在のページの表示タグ、Web ページに表示される実際のコンテンツ
  

要素の取得

変数を使用してページ内の 1 つまたは複数の要素を保存します

要素の取得方法は 2 つのカテゴリに分類されます
1. 型破りな要素の取得

html：document.documentElement
• head：document.head
• body ：document.body

2. 通常の要素の取得

• id ​​に基づいて要素を取得

  構文: document.getElementById
  戻り値: Ifページ上に id に対応する要素がある場合はこの要素、そうでない場合は null
  

• クラス名に基づいて要素を取得する

  構文: document.getElementsByClassName( '要素クラス名')
  戻り値:
  疑似配列である必要があります ページ上にクラス名に該当する要素があれば、あるだけ取得して配置します
  ページ上にクラス名に対応する要素がない場合、空の疑似配列になります
  

#タグ名に基づいて要素を取得
• 構文: document.getElementsByTagName('タグ名')

  戻り値:
  疑似配列である必要があります
  ページ上にタグ名に対応する要素がある場合、次のように取得します必要に応じていくつでも入力し、それらを擬似配列に入れて返します。 ページ上にタグ名に対応する要素がない場合は、空の擬似配列になります。
  
  

Getセレクターに基づくタグ
• 構文: document.querySelector('selector')

  戻り値: ページ上にセレクターに対応する要素がある場合、セレクターに対応する最初の要素を返します
  ページ要素に対応するセレクターがない場合は、null になります。
  
  

セレクターに基づいてタグのセットを取得します
• 構文: document.querySelectorAll('selector')

  戻り値:
  疑似配列である必要があります
  ページ上にセレクターに対応する要素が存在する場合は、それらをすべて取得し、疑似配列に入れて返します。ページ上にセレクターに対応する要素がない場合、空の疑似配列になります。 Array
  
  

  操作要素のスタイル

JSで操作する3種類の要素スタイル

1. 要素のインラインスタイルを取得(Inlineスタイルのみ取得可能)
• 2. 要素の非インラインスタイルを取得(インライン、非インラインを含む)

  3. 要素のスタイルを設定します (インライン スタイルのみ設定可能)
  注: 名前を付けるときにアンダースコアを含むスタイルが必要です
  キャメル ケースに変換します
  配列関連付け構文を使用します
  
  
  

  要素のインライン スタイルを取得します
構文: element.style.Style name

• 
  

  console.log(ele.style.width)
  console.log(ele.style.height) // 非行内样式
  console.log(ele.style.fontSize)
  console.log(ele.style['font-size'])

·要素の非インライン スタイルを取得します

構文: window.getComputedStyle (スタイルを取得する要素).スタイル名

• console.log(window.getComputedStyle(ele).width)
  console.log(window.getComputedStyle(ele).height)
  console.log(window.getComputedStyle(ele).fontSize)
  console.log(window.getComputedStyle(ele)['background-color'])

  
  
要素のスタイルを設定します(インライン スタイルのみ設定できます)

構文: 要素。 style.style name = style value

• ele.style.backgroundColor = 'red'

  
  操作要素のクラス名

目的: スタイルをバッチで変更する

className

操作ネイティブ属性の
• JS には class というキーがあるため、名前の変更を避けるために、 className という名前にします

  注: クラス名の値は string ですが、その文字列には複数のクラス名が含まれる場合があります
  
  
  

  classList
各要素ノードには classList
• という属性があり、素数グループに似たデータ構造になっており、要素のすべてのクラス名が格納されます

  、削除、変更、クエリはすべて classList に対する操作であり、専用の API が与えられます
  追加: element.classList.add(クラス名)
  削除: element.classList.remove(クラス名)
  Switch : element.classList.toggle(クラス名)
  - もともと存在する場合は削除し、以前に存在しない場合は追加します
  
  
  

  関連する推奨事項: [
JavaScriptVideoTutorial

]

以上がJavaScript が要素の属性、スタイル、クラス名を操作する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。