ロケーションオブジェクト、履歴、ブラウザのスクロール幅と高さ、DOM

ロケーションオブジェクト

ページの一般的なアドレス情報は次のとおりです。
例：
https ：//baike.baidu.com/item/%E9%A9%AC%E4%BF%9D%E5%9B%BD/50106525？fr = aladdin＃2_1

httphttps伝送プロトコル

www.baidu.comドメイン名

？fr =アラジンクエリ文字

＃2_1ハッシュ（アンカーの場所）

-ロケーションオブジェクト：

Webページアドレスのすべてのコンテンツに関連する情報を格納します。

属性：

href：アドレス情報。

ジャンプページ：location.href = "XXX";

    <script>
        window.onload = function() {
    
    
            location.href = "https://www.baidu.com";
        }
    </script>

[注] location.hrefは、ページが読み込まれた後に呼び出す必要があります。

検索：クエリ文字列は通常、データの送信に使用され、解析する必要があります。

• 分割（分割文字列）

戻り値：分割された文字列で構成される配列：Su Shi | Xin Qiji | Li Shangyin = "[Su Shi、Xin Qiji、Li Shangyin]

クエリ文字
1を解析します。 ""
2.?name=zhangsan&age=18

ステップ：

1.分析用の関数を準備する必要があります。この関数にはパラメーターも必要です。

パラメータ：解析される文字列

2.解析を開始します

1.それが空の文字列であるかどうかを判断し、空のオブジェクトを直接返します。

2.空の文字列でない場合は、文字列を解析して結果をオブジェクトに入れます。

（1）最初の文字を切り取ります。

（2）残りの文字は＆に従って分割され、配列が取得されます。

（3）配列をトラバースして、「属性名=属性値」の形式の文字列を取得します。

（4）文字列ごとに、=に従って分割して、属性と属性値の配列を取得します。

（5）属性名と属性値をオブジェクトに割り当てます// obj [t [0]] = t [1];

（6）オブジェクトを返します。

方法：

assign（）：ブラウザのアドレスバーのアドレスを変更し、履歴に記録します。

【注意】location.hrefを設定すると、assignメソッドが呼び出されます。

replace（）ブラウザのアドレスバーのアドレスを置き換えます。

reload（）リロードF5

reload（true）強制的にロードします。キャッシュは適用されません。

ナビゲーター：

• ブラウザクライアントに関する情報を取得します。
  

歴史

• 履歴：現在のウィンドウの履歴を保存します。これには、操作履歴のいくつかのプロパティとメソッドが含まれます

• 【注意】ブラウザの履歴記録ではありません

1.属性

length：履歴レコードの数を返します。

 <script>
        window.onload = function() {
    
    
            btn.onclick = function() {
    
    
                // 跳转地址
                location.href = "https://www.baidu.com";
                // 浏览器历史记录，记录打开了多少
                alert(history.length);
            }
        }
    </script>

2.方法：

• バック（）：

構文：history.back（）;

機能：ブラウザの戻るボタンと同様に、前の履歴レコードに戻ります。

• forward（）：

構文：history.forward（）;

機能：ブラウザの進むボタンに似ており、次の履歴レコードに進みます。

• go（n）：

構文：history.go（n）; nは整数を表します

正の整数：順方向を意味します

0：現在のページを更新します

負の整数：戻ることを意味します

役割：nレコードにジャンプします。

  <script>
        window.onload = function() {
    
    
            btn.onclick = function() {
    
    
                 // 类似浏览器上面的前进键，前进到下一条历史记录中。
                history.forward();
            }
            btn2.onclick = function() {
    
    
                // 类似浏览器上面的后退键，回退到上一条历史记录中。
                history.back();
            }
            but3.onclick = function() {
    
    
				//浏览器打开历史记录的数
                alert(history.length);
            }
            god.onclick = function() {
    
    
            //直接跳转到历史记录的第几个页面
                history.go(2);
            }
        }
    </script>

ブラウザロールの幅と高さ

ページの幅と高さが比較的大きい場合、スクロールバーが表示され、ページがスクロールするとコンテンツの一部が非表示になります。

その上に隠された高さを呼びます

左側の隠れた幅は、ロール幅と呼ばれます。

ブラウザのスクロール

jsコードを使用して、ブラウザーがスクロールする場所を指定できます。

最初の方法：

形式：window.scroll（横座標、縦座標）;

【注意】単位を書く必要がなく、瞬時に測位できます。

    window.onload = function() {
    
    
            btn.onclick = function() {
    
    
                // 横向移动400，纵向移动600
                window.scroll(400, 600);
            }

        }

2番目の方法：
例：
window.scroll（{ left：200、top：600、behavior： 'smooth' }）;

動作：スクロールの方法を決定できます。デフォルトでは、インスタントポジショニングの場合は自動で、スムーズに移行する場合はスムーズに設定できます。

  window.onload = function() {
    
    
            btn.onclick = function() {
    
    
                window.scroll({
    
    
                    left: 400,
                    top: 600,
                    // 平滑滚动页面
                    behavior: 'smooth'
                })


            }
        }

カスタムスクロール速度

• これは完全なカスタムスクロール速度の場合です

 body {
    
    
            width: 3000px;
            height: 2000px;
        }

  <script>
        var timer = null; //先设置滚动距离为空
        window.onload = function() {
    
    
            btn.onclick = function() {
    
     //设置一个点击时间，当点击“btn”这个按钮时，执行下面的代码
                timer = setInterval(function() {
    
     //设定滚动时间的 函数
                    document.documentElement.scrollTop -= 20; //每一次滚动的距离
                    if (document.documentElement.scrollTop <= 0) {
    
     // 如果滚动的距离小于或者等于0的时候，停止滚动
                        clearInterval(timer); //  清除滚动距离
                    }
                }, 50);
            }

        }
        var str = 0; //定义一个本次滚动的距离
        window.onscroll = function() {
    
    
            if (str < document.documentElement.scrollTop) {
    
     //当本次滚动距离小于上一次的滚动距离时，停止滚动
                clearInterval(timer);
            }
            str = document.documentElement.scrollTop; //本次滚动的距离
        }
    </script>

<body>

    <p>三十功名尘与土，八千里路云和月,三十功名尘与土，八千里路云和月三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <p>三十功名尘与土，八千里路云和月,三十功名尘与土，八千里路云和月三十功名尘与土，八千里路云和月</p>
    <br>
    <br>
    <br>
    <br>
    <br>
<!-- ........   下面还有很多行代码 -->
    <button id="btn">滚动</button>
</body>

判定

dom：docmentオブジェクトモデル

DOMはノードで構成されています。

ノードは次の3つのカテゴリに分類できます。

1.要素ノードのhtmlタグ

2.テキストノードラベルのテキスト

3.属性ノードラベルの属性

domを学ぶということは、ノードを操作することを学ぶことを意味します

変更：DOMノードのコンテンツを変更します。

トラバース：次の操作を容易にするために、DOMノードの下の子ノードをトラバースします。

追加：DOMノードの下に子ノードを追加します。

削除：HTMLからノードを削除します。これは、すべてのコンテンツとそれに含まれるすべての子ノードを削除することと同じです。

DOMでできること：

1.オブジェクト（要素ノード）を見つけます

2.要素ノードの属性値を設定します。

3.3。ノードを動的に削除および作成します。

4.応答でのイベントトリガー

ノードを取得する方法

1.getElementById

形式：node.getElementById（ "ID"）

機能：ノードノードから開始して、IDでノードを検索します。

2.getElementsByTagName

タグ名でノードを検索

形式：node.getElementsByTagName（ "タグ名"）;

3.getElementsByClassName

クラス名でノードを検索

形式：node.getElementsByClassName（ "クラス名"）;

4.getElementsByName（）

name属性値を介してノードを取得します

フォーム要素で最も一般的に使用されます。
--------------------------------------------------

IEの下位バージョンはサポートされていません。

5.querySelector（）

形式：node.querySelector（cssセレクター）

戻り値：

セレクターに一致する要素が見つかった場合、最初の要素が返されます。

見つからない場合はnullを返します

6.querySelectorAll（）

形式：node.querySelector（cssセレクター）

戻り値：

セレクターに一致する要素が見つかった場合は、すべてが返されます。

見つからない場合はnullを返します

nodelist疑似配列の通常の配列メソッドは疑似配列の長さに対して無効です[添え字]

[注]ノードをネストする場合は、getElementByIdを使用しないでください。

 <script>
        window.onload = function() {
    
    
            // 通过ID获取页面信息
            var hh = document.getElementById("h3")
            // 通过标签获取信息
            var hh = document.getElementsByTagName("p")[0];

            // 通过class类名获取标签信息
            var hh = document.getElementsByClassName("pp")[0];

            // 通过css3的类选择器获取信息，获取的是第一个p标签信息
            var hh = document.querySelector(".ppp");

            // 通过css3的类选择器获取信息，获取的是同一个类名全部p标签信息
            var hh = document.querySelectorAll(".ppp");

            var box = document.getElementsByClassName("p1")[0];
            var p1 = box.getElementById(p1);
            console.log(p1);
        }
    </script>

<body>
    <div id="box">
        <h1 id="h3">我是h1标签 </h1>
        <div>
            <p id="p1">我是p标签</p>
        </div>
        <p class="pp">我是p2标签</p>
        <p class="ppp">我是p3标签</p>
        <p class="ppp">我是p3标签</p>
        <p class="ppp">我是p3标签</p>

    </div>
</body>