JavaScriptでは、ドキュメント要素がしばしば取得されます。これは、HTMLドキュメントオブジェクトモデルの英語の略語です。 HTMLのドキュメントオブジェクトモデルは、ブラウザプログラミングに基づいています。 HTML DOMは、HTMLの一連の標準オブジェクトと、HTMLドキュメントにアクセスおよび処理するための標準的な方法を定義します。
DOMを介して、すべてのHTML要素にアクセスでき、それらに含まれるテキストとプロパティがあります。内容を変更および削除することができ、新しい要素を作成できます。 HTML DOMは、プラットフォームに依存しないプログラミング言語です。 Java、JavaScript、VBScriptなどのプログラミング言語で使用できます。
チャイルドノードは現在の要素のすべての子要素の配列を返し、firschildは現在の要素の最初の下の子要素を返し、ラストチャイルドは現在の要素の最後の子要素を返し、次のシーリングは現在の要素の直後に要素を返し、nodevalueはテーブル要素を指定し、読み取り/書き込み属性の親nodeは、現在の要素の前に親nodeを表現する要素を指定します。
document.getElementByIDは、指定された一意のID属性値を持つドキュメントの要素です。 document.getElementByTagname現在の要素に指定されたtagnameを持つ子要素の配列を返します。 haschildnodes（）は、要素に子要素があるかどうかを示すブール値を返します。 document.getElementBycclassNameは、ドキュメント内のクラス名要素を取得します。 document.getElementsByName（elementName）：名前を介してノードを取得します。名前から、このメソッドはノード要素ではなく、同じ名前のノードの配列を返すことがわかります。次に、ノードの属性をループしてループを取得して、それが必要なノードであるかどうかを判断できます。
取得したいブラウザの幅は次のとおりです。
Webページの可視領域幅：document.body.clientwidth
Webページの目に見える領域の高さ：document.body.clientheight
Webページの可視領域幅：document.body.offsetwidth（エッジラインの幅を含む）
Webページの目に見える領域の高さ：document.body.offseTheigh（エッジラインの幅を含む）
Webページの全文幅：document.body.scrollwidth
Webページの全文：document.body.scrollheight
Webページは高レベルで展開されています：document.body.scrolltop
展開されているWebページの左：document.body.scrollleft
Webページの主要部分：window.screentop
Webページのメインテキストの左：window.screenleft
高画面解像度：window.screen.height
画面解像度の幅：window.screen.width
画面利用可能なワークスペースの高さ：window.screen.availheight
画面利用可能なワークスペース幅：window.screen.availwidth
eコマースのウェブページを使用して詳細に説明しましょう。
<html> <head> <title> </title> <style> *{margin：0;パディング：0;} a {Text-Decoration：none;色：White;} a：Hover {color：Red;} ul、li、ol {list-style：none;フォントサイズ：13px;色：#fff; line-height：27px;} img {border：none;} img、input、select、textarae {vertical-align：middle} body {width：1350px;マージン：0 Auto; font-size：12px;} ol li a {color：#fff;} #header {width：1350px;高さ：37px;背景：URL（122.PNG）ノーレピート。境界線底：1PXソリッド＃C9C9C9; Line-Height：37px;} #main {width：1350px;高さ：504px;背景：＃f8f8;} #left {width：182px;高さ：500px;背景：＃3D4E64; Border-Radius：3px; float：left;} #lunbo {width：1160px;高さ：300px;背景：＃f8f8;国境圏：2pxソリッド＃666666;フロート：そうです;マージン：0 Auto;マージントップ：10px;位置：相対;} #lunbo img {width：1160px;高さ：300px;表示：なし;位置：絶対; z-index：5; } ul {マージン左：400px;} ul li {list-style：none;国境：1pxソリッド＃000;ボーダーラジウス：50％;幅：18px;高さ：18px;テキストアライグ：センター;フロート：左;マージントップ：300px;マージン左：10px; Z-Index：15; } </style> </head> <body> <div id = "header"> <a href = "＃"> <h3>すべての製品カテゴリ</h3> </a> </div> <div id = "main"> <div id = " E-Reader> </a> </p> <p> <a href = "＃"> fire tablets> </a> </p> <p> <a href = "＃"> kindle e-reader> </a> </li> <p> <p> <a href = "＃"> fire tablet> </a> e-reader> </a> </li> <p> <a href = "＃"> fire tablet> </a> </p> <p> <a href = "＃"> kindle e-reader> </a> </li> <p> <p> <a href = "＃"> fire tablet> </a> </p> <p> <a href = "＃"> kindle e-reader> </a> </li> <p> <a href = "＃"> fire table> </a> </p> <p> <a href = "＃" href = "＃"> fire tablet> </a> </p> <p> <a href = "＃"> fire tablet> </a> </p> <p> <a href = "＃"> Kindle e-reader> </a>タブレット> </a> </p> <p> <a href = "＃"> kindle e-reader> </a> </li> <p> <a href = "＃"> fire tablet> </a> </p> <p> <a href = "＃"> fire tablet> </a> <p> <a href = "＃"> fire tablet> </a> </p> <p> <a href = "＃"> fire tablet> </a> </p> <p> <p> <p> <p> <a href = "＃"> fire tablet> </a> </p> <p> <a href = "＃"タブレット> </a> </p> <p> <a href = "＃"> kindle e-reader> </a> </li> <p> <a href = "＃"> fire tablet> </a> </p> <p> <a href = "＃"> kindle e-reader> </a> e-reader> </a> </li> <p> <a href = "＃"> fire tablet> </a> </p> </ol> </div> <div div = "lunbo"> <img src = "1.png"> <img src = "2.png"> <img src = " src = "5.png"> <ul> <li style = "background：red" onmouseover = "jin（0）" onmouseout = "chu（0）"> 1 </li> <li onmouseover = "jin（1）" onmouseout = "chu（1）"> 2 </li> <chu（2） " <li onmouseover = "jin（3）" onmouseout = "chu（3）"> 4 </li> <li onmouseover = "jin（4）" onmouseout = "chu（4）"> 5 </li> </ul> </div> <div id = "フッター"> <ing src = " p = document.getElementsByTagname（ "img"）; l = document.getElementsByTagname（ "li"）; m = 0 onload = function（）{s = setinterval（ "kaishi（）"、850）} function kaishi（）{for（var i = 0; i <5; i ++）{p [i] .style.display = "none"; l [i] .style.background = "white"} m ++; if（m> = 5）{m = 0;} p [m] .style.display = "block"; l [m] .style.background = "red"} lunbo.onmouseover = function（）{clearinterval（s）;} onmouseout = function（）{s = setinterval（ "kaishi（）"、850）;} function jin（hand）{ l [i] .style.background = "white"} m ++; if（m> = 5）{m = 0;} p [hand] .style.display = "block"; l [hand] .style.background = "red"} function chu（hand）{m = hand; } </script> </html>上記の記事JSはDOM要素を操作し、ブラウザの高さを取得し、幅は私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。