JS の基礎 (4)

ドム

DOM: ドキュメントオブジェクトモデル。
ドキュメント: HTML Web ページドキュメント全体;
オブジェクト: オブジェクトは、Web ページのすべての部分がオブジェクトに変換されることを意味します;
モデル: モデルを使用してオブジェクト間の関係を表現し、オブジェクトを簡単に取得できるようにします;
DOM 機能: DOM を介して JS で HTML ドキュメントを操作し、Web ページを自由に操作します。

ノード

ノード: Web ページを構成する最も基本的なコンポーネントであり、Web ページ内の各部分をノードと呼ぶことができます。HTML文書を構成する最も基本的な単位

ノード分類

要素ノード: HTML ドキュメント内の HTML タグ
属性ノード: 要素の属性
テキストノード: HTML タグ内のテキストコンテンツ

ノードプロパティ

nodeName
nodeType
nodeValue
ここに画像の説明を挿入
The browser has provided us with the document node object document, which is a property of window object and can be used directly in the page. ドキュメントノードは Web ページ全体を表します。

DOM クエリ

要素ノードを取得

ドキュメントオブジェクトを介して呼び出されます

getElementById(): id 属性を介して要素ノードオブジェクトを取得します。
getElementsByTagName():タグ名で要素ノードオブジェクトのセットを取得します。配列のようなオブジェクトが返され、クエリされたすべての要素がこのオブジェクトにカプセル化されます。クエリされた要素が 1 つしかない場合でも、それは配列して返されます。
getElementsByName(): name属性を介して一連の要素ノードオブジェクトを取得します
getElementsByClassName():要素のクラス属性値に従って要素ノードオブジェクトのセットを照会します(IE8 以下はサポートされていません)。
querySelector(): CSS セレクターに基づいて要素を照会できますdocument.querySelector('.box1 div')(ただし、IE8 には getElementsByClassName() はありませんが、代わりに querySelector() を使用できます。これは、クラス名、ID、およびセレクターに従ってチェックできます)。このメソッドを使用すると、条件を満たす要素が複数ある場合、常に 1 つの要素のみが返されますが、最初の要素のみが返されます。
querySelectorAll(): querySelector() と同様に、違いは、適格な要素が 1 つしかない場合でも、適格なすべての要素を配列として返すことです。配列を返します。

ノード関係

各ノードには、childNodesプロパティ、parentNodeプロパティがあります。childNodes の兄弟ノードの場合、previousSibingおよびnextSibling属性を使用して、現在のノードの最初の兄弟ノードと現在のノードの最後の兄弟ノードを示すことができます。firstChildとlastChildを使用して、それぞれ chlidNodes の最初と最後のノードを指すことができます。したがってsomeNode.firstChild == someNode.childNodes[0]; someNode.lastChild == someNode.childNodes[someNode.childNodes.length-1];

要素ノードの子ノードを取得する

特定の要素ノードによって呼び出されます

getElementsByTagName(): メソッド。現在のノードの指定されたタグ名の子孫ノードを返します。
childNodes: 現在のノードのすべての子ノードを示す属性; テキストノードを含むすべてのノードが取得され、DOM タグ間の空白もテキストノードとして扱われます。IE8 までのブラウザーでは、空白のテキストは子ノードとは見なされません。
children 属性は、現在の要素のすべての子要素を取得でき、空白のテキストを子ノードとして扱いません。
firstChild: 属性、現在のノードの最初の子ノードにラベルを付けます (空白のテキストノードを含む)。
firstElementChild: 現在の要素の最初の子要素 (空白のテキストノードを除く) を取得できます。これは、IE8 以前のブラウザーをサポートしていません。
lastElementChild: 要素の最後の子要素を返します (テキストノードとコメントノードを除く)。
lastChild: 現在のノードの最後の子ノードを示す属性 (空白のテキストノードを含む)

親ノードと兄弟ノードを取得する

特定のノードによって呼び出されます

parentNode: 現在のノードの親ノードを示す属性(空白のテキストを取得する場合もあります)
previousSibing: 現在のノードの前の兄弟要素を示す属性 (IE8 以下ではサポートされていません)
nextSibling: 現在のノードの次の兄弟ノードを示す属性
previousElementSibing: 前の兄弟要素を取得します (IE8 以下ではサポートされていません)
nextElementSibling: 同じノードツリーレベルにある次の要素を返します (テキストノードとコメントノードを除く)。

補充:

innerHTML: この属性を介して要素内の HTML コードを取得できます。入力タグなどの自己終了タグの場合、この属性には意味がありません。要素ノードの属性を読み取る必要がある場合は、element.Attribute name を直接使用してください。input[i].innerHTML不正解ですinput[i].value。このメソッドは class 属性には使用できず、input[i].className
class 属性を読み取るときは要素 .className innerTEXT を使用する必要があります: この属性は要素内のテキストコンテンツを取得できます。innerHTML と似ていますが、違いは次のとおりです。自動的にhtmlが削除されること

DOM クエリのその他の方法

body タグを取得します: ドキュメントには属性 body があり、body の参照を保存しますvar body = document.body
html タグを取得します: htmldocument.documentElementルートタグを保存します
ページ内のすべての要素を取得します:

document.all
document.getElementsByTagName('*')

DOM の追加、削除、変更

要素ノードの作成: createElement() は要素ノードオブジェクトを作成し、パラメーターとしてタグ名を必要とし、タグ名に従って要素ノードオブジェクトを作成し、作成されたオブジェクトを戻り値として返します。document.createElement('li')
テキストノードの作成: createTextNode() はテキストノードオブジェクトを作成し、テキストコンテンツをパラメータとして必要とし、戻り値として新しいノードを返しますlet gzText = document.createTextNode('广州')。このステップでは innerHTML を使用できます。li.innerHTML = '广州'
親ノードに新しい子ノードを追加します: appendChild(); 使用法: 父节点.appendChild(子节点); 例:city.appendChild(gzText )
指定された子ノードの前に新しい子ノードを挿入します: insertBefore(); このメソッドは 2 つのパラメーターを渡す必要があります父节点.insertBefore(newNode，oldNode)
既存の子ノードを指定された子ノードに置き換えます: replaceChild();父节点.replaceChild(newNode，oldNode)
子ノードを削除します: removeChild(); 父节点.removeChild(子节点)==子节点.parentNode.removeChild(子节点)
InnerHTML を使用すると、関連する追加、削除、変更、およびクエリを完了することもできますが、innerHTML はすべてを再作成することと同等です.イベントが前のノードにバインドされている場合、innerHTML を使用した後、以前にバインドされたイベントは存在しません。(非推奨)
innerHTML+append のおすすめのやり方

JS を使用して要素のスタイルを変更する

構文:元素.style.样式名 = 样式值；
注:

CSS スタイル名に - が含まれている場合、この名前は JS では無効です。たとえば、box1.style.background-color = 'pink';キャメルケースに変更する必要があります。box1.style.backgroundColor = 'pink'
style で設定したスタイルはinline styleであり、inline style の方が優先度が高いため、JS で変更したスタイルはすぐに実行されることが多いですが、style に記述されている場合は ! 重要、このときスタイルが最優先され、JSでもスタイルを上書きすることはできません.このとき、JSで修正したスタイルは無効になるので、スタイルに追加しないようにしてください! 重要。
style 属性を使用して要素のスタイルを変更します。スタイルが変更されるたびに、ブラウザはページを再レンダリングする必要があります。この実行のパフォーマンスは比較的低く、複数のスタイルが変更されると不便になります。
したがって、要素の class 属性を変更することで、要素のスタイルを間接的に変更できるbox.className = 'b2'ため、一度変更するだけで複数のスタイルを同時に変更できます。ブラウザーは 1 回再レンダリングするだけでよく、パフォーマンスが向上します。このようにして、パフォーマンスと動作を個別に制御できます。
スタイルの一部のみを変更する場合はbox.className += ' b2'、引用符の中にスペース b2 があることに注意してください。

インラインスタイルを読み取る:

構文:元素.style.样式名.样式值；
注:

style 属性を介して設定および読み取られるスタイルはすべてインラインスタイルであり、スタイルシート内のスタイルは読み取れません (つまり、スタイル内のスタイルは読み取れません)。

要素の現在表示されているスタイルを取得します

すなわちブラウザ:

構文: 元素.currentStyle.样式名；(IE ブラウザでのみサポート)

その他のブラウザ:

You can use the getComputedStyle() method to get the current style of the element. このメソッドはウィンドウメソッドであり、直接使用できます。

2 つのパラメーターが必要です: 1. スタイルを設定する要素; 2. 疑似要素を渡すことができますが、通常は null です。
このメソッドは、現在の要素に対応するスタイルをカプセル化したオブジェクトを返します. スタイルは object.style name を通じて読み取ることができます. 取得したスタイルが設定されていない場合, デフォルト値の代わりに実際の値が取得されます.
alert(getComputedStyle(box1,null).width);
IE8以下のブラウザは非対応

互換性のある書き込み（重要）

<script type="text/javascript">
    //兼容写法
    //obj: 要获取的样式
    //name: 要获取的样式名
    function getStyle(obj,name){
    
    
      /*不能写为getComputedStyle(obj,null).name,因为在对象中.name是个字符串，而不是一个变量，这里不能写死*/
      //没必要判断浏览器的类型，直接判断浏览器是否有getComputedStyle()方法，验证了一下getComputedStyle是个对象
      /*必须加window，不然会在ie8报错，因为如果找一个变量，如果在函数作用域中没找到，就会在全局作用域找，在全局作用域找如果没找到就会报错
      因此必须加window,没有加window,他是一个变量，需要去作用域中寻找，加了window，就变成window的一个属性，没有这个属性，就会返回undefined
      */
      if(window.getComputedStyle){
    
    
        return  getComputedStyle(obj,null)[name];
      }else{
    
    
        return obj.currentStyle[name];
      }
    }
    window.onload = function () {
    
    
      let box1 = document.getElementById('box1');
      let btn01 = document.getElementById('btn01');
      btn01.onclick = function () {
    
    
      //获取元素的当前显示的样式
      //语法：元素.currentStyle.样式名(IE浏览器)
        alert(box1.currentStyle.width);
        //语法：getComputedStyle()(其他浏览器，iE8及以下不支持)
        alert(getComputedStyle(box1,null).width);
        //兼容
        alert(getStyle(box1,'width'));
      }

    }
  </script>

知らせ：

currentStyle および getComputedStyle() によって読み取られるスタイルはすべて読み取り専用であり、変更できません。変更する場合は、スタイルを渡す必要があります。

その他のスタイル関連のプロパティ

clientHeight と clientWidth

要素の表示可能な幅と高さを取得します。
px がない場合、戻り値は数値であり、直接計算できます
コンテンツと内側の余白を含み、外側の余白を除く、要素の高さと幅を取得します
読み取り専用、変更不可

offsetHeightとoffsetWidth

要素の幅と高さ全体を取得します。
px がない場合、戻り値は数値であり、直接計算できます
コンテンツと内側のマージン、外側のマージンを含む、要素の高さと幅を取得します
読み取り専用、変更不可

オフセット親

現在の要素の配置された親要素を取得できます
配置がオンになっている現在の要素に最も近い祖先要素を取得します
すべての祖先要素が配置されていない場合は、本体を返します

offsetLeftとofsetRight

配置された親要素に対する現在の要素の水平オフセットと垂直オフセットを取得できます

scrollHeight と scrollWidth

要素のスクロール領域全体の幅と高さを取得できます

scrollLeftとscrollTop

水平スクロールバーと垂直スクロールバーのスクロール距離を取得できます
scrollHeight - scrollTop == clientHeight は、垂直スクロールバーが最後にあることを示します
scrollWidth - scrollLeft== clientWidth は、水平スクロールバーの終わりを示します

イベント

イベント: ドキュメントまたはブラウザーウィンドウで発生する特定の相互作用の瞬間。
イベント 1 を参照できます
 イベント 2 を参照できます

イベントバブリング

イベントの上方への送信。子孫要素のイベントがトリガーされると、その祖先要素の同じイベントもトリガーされます。バブリングのキャンセル
:event.cancelBubble = true
イベントをトリガーしたオブジェクトが目的のオブジェクトであるかどうかを判断します。event.target.className == 'link'

ドキュメントの読み込み

ブラウザがページを読み込むときは上から順に読み込み、一行読むと一行実行するが、ページの一番上にscriptタグが書かれていると、コードが書かれた時点でページが読み込まれていない実行されました。そのため、通常はページ下部にjsコードを記述します。

ページの下部にスクリプトタグを記述したくない場合は、ページ全体が読み込まれた後にトリガーされる onload イベントを使用できます。

window.onload = function(){
    
    	
	alert('hello');
}

一般的に言えば、パフォーマンスを考慮すると、JS コードはページの下部に記述することをお勧めします。これは、onload イベントが使用できる場合でも、上に記述した JS コードが最初にロードされますが、ロードは実行されないため、ページ全体がロードされるのを待つ必要があります完了後に実行されるため、パフォーマンスに影響します。ページの下に記述することをお勧めします

キーボードイベント

一般に、入力など、フォーカスを取得できるいくつかのオブジェクトまたはドキュメントにバインドされます。

オンキーダウン

キーボードが押されます。
一定時間押し続けて離さない場合、イベントは常にトリガーされます。
onkeydown が連続してトリガーされると、1 回目と 2 回目の間隔が長くなり、その他は非常に速くなります。この設計は誤用を防ぐためのものです

オンキーダウン

キーボードが解放される

ドム

ノード

ノード分類

ノード プロパティ

DOM クエリ

要素ノードを取得

ノード関係

要素ノードの子ノードを取得する

親ノードと兄弟ノードを取得する

補充:

DOM クエリのその他の方法

DOM の追加、削除、変更

JS を使用して要素のスタイルを変更する

インライン スタイルを読み取る:

要素の現在表示されているスタイルを取得します

すなわちブラウザ:

その他のブラウザ:

互換性のある書き込み（重要）

知らせ：

その他のスタイル関連のプロパティ

clientHeight と clientWidth

offsetHeightとoffsetWidth

オフセット親

offsetLeftとofsetRight

scrollHeight と scrollWidth

scrollLeftとscrollTop

イベント

イベントバブリング

ドキュメントの読み込み

キーボード イベント

オンキーダウン

オンキーダウン

おすすめ

ノードプロパティ

インラインスタイルを読み取る:

キーボードイベント