フェッチ、querySelector、フォーム、ATOBとbtoaのJS API

：ソース記入してくださいhttps://www.cnblogs.com/funnyzpc/p/11095862.htmlを

JS APIは、組み込み関数はJavaScriptで、この章では、次のラインに沿って、より有用組み込み関数のいくつかについて話します。

fecth httpリクエスト機能
querySelectorセレクタ
フォームフォームの機能
ATOBとbtoa Base64の機能

Base64でATOBとbtoa

以前は、フロントエンドで、我々はBase64.jsの導入後のデータのためのBase64でエンコードおよびデコード操作APIを呼び出している、新しいESは現在、標準のBase64をご提供し
、次のように主に使用され、サポート：

コーディング：window.btoa（PARAM）。

   输入> window.btoa("hello");
   输出> "aGVsbG8="

デコード：window.atob（PARAM）

   输入：window.atob("aGVsbG8=");
   输出："hello"

querySelectorのDOMセレクタ

、非常に広いフロントエンド開発のために非常に簡単で、今、あなたは迷惑なJSと導入することなく、__querySelector__を持っているとjQueryのセレクタでのDOM
開発しやすいよう、様々なJS-依存を-

IDの選択

    // 获取DOM中的内容
    document.querySelector("#title").innerText;
    // 将DOM设置为粉红色背景
    document.querySelector("#title").style.backgroundColor="pink";
    // 获取DOM的class属性
    document.querySelector("#title").getAttribute("class");
    // 移除DOM
    document.querySelector("#title").remove();
    // 获取子DOM
    document.querySelector("#title").childNodes;
    // 给DOM添加click事件(点击后弹出 "success")
    document.querySelector("#title").onclick = function(){alert("success")};
    // 给DOM添加属性(添加一个可以为name，value为hello的属性)
    document.querySelector("#title").setAttribute("name","hello");

クラス選択

    // 获取DOM中的内容
    document.querySelector(".title").innerText;
    // 将DOM设置为粉红色背景
    document.querySelector(".title").style.backgroundColor="pink";
    // 获取DOM的class属性
    document.querySelector(".title").getAttribute("class");
    // 移除DOM
    document.querySelector(".title").remove();
    // 获取子DOM
    document.querySelector(".title").childNodes;
    // 给DOM添加click事件(点击后弹出 "success")
    document.querySelector(".title").onclick = function(){alert("success")};

タグセレクタ（DOM名）

    // 获取DOM中的内容
    document.querySelector("h4").innerText;
    // 将DOM设置为粉红色背景
    document.querySelector("h4").style.backgroundColor="pink";
    // 获取DOM的class属性
    document.querySelector("h4").getAttribute("class");
    // 移除DOM
    document.querySelector("h4").remove();
    // 获取子DOM
    document.querySelector("h4").childNodes;
    // 给DOM添加click事件(点击后弹出 "success")
    document.querySelector("h4").onclick = function(){alert("success")};
    // 给DOM添加属性(添加一个可以为name，value为hello的属性)
    document.querySelector("h4").setAttribute("name","hello");

（マルチフォームの）カスタム属性選択

    // 获取DOM的value值
    document.querySelector("input[name=age]").value;
    // 将DOM设置为粉红色背景
    document.querySelector("input[name=age]").style.backgroundColor="pink";
    // 获取DOM的class属性
    document.querySelector("input[name=age]").getAttribute("class");
    // 移除DOM
    document.querySelector("input[name=age]").remove();
    // 获取子DOM
    document.querySelector("input[name=age]").childNodes;
    // 给DOM添加click事件(点击后弹出 "success")
    document.querySelector("input[name=age]").onclick = function(){alert("success")};
    // 给DOM添加属性(添加一个可以为name，value为hello的属性)
    document.querySelector("input[name=age]").setAttribute("name","hello");

フォームフォームの機能

フォームの機能がないときに我々がされる前に、フォームの提出+のためのjQueryのクリック機能と送信ボタンの定義の大半を行う場合は、フォームを送信
取得パラメータを提出するか、使用アヤックス、後者はともかく、かつてのESは新しい標準を提供するために機能はもちろん、これは単なるあり、機能を形成する
だけで、前提はタグはname属性を定義して形成するために、この機能を使用する必要があることに留意する必要がある文書のプロパティ、name属性の
値は、関数の名前は、プロパティとしても利用できるフォームの機能が（されています次のように）、使用されています。

たとえば、私たちのフォームはこれです：

   // html表单
   <form name="fm" method="post" action="/submit">
       <input type="text" name="age" placeholder="请输入年龄"/>
   </form>

今回我々は、このフォームを行うことができます。

    // 提交表单
    document.fm.submit();
    // 获取表单的name属性值
    document.fm.name;
    // 获取表单的DOM
    document.fm.elements;
    // resetb表单
    document.fm.reset();
    // ...更多操作请在chrome控制台输入命令

フェッチ

jsがXMLHttpRequestを、元のを交換し、それは同様のAJAXリクエスト・ヘッダー、非同期または同期方法はまたOPTION他、GET、PUT、DELETEの提供提供するための要求新しい組み込み関数であるHTTP、AJAXフェッチ
要求モード唯一の欠点は、POST（JSON）の提出に加えて、他のパラメータが組み立て自体の両方に必要であることをご参考のためにここに与えられた唯一のいくつかの簡単な例です。

フェッチ：GETリクエスト

HTML：

    <form method="GET" style="margin-left:5%;">
        <label>name:</label><input type="text" name="name"/>
        <label>price:</label><input type="number" name="price"/>
        <label><button type="button" onclick="getAction()">GET提交</button></label>
    </form>

JavaScriptの：

    function getAction() {
            // 组装请求参数
            var name = document.querySelector("input[name=name]").value;
            var price = document.querySelector("input[name=price]").value;

            fetch("/get?name="+name+"&price="+price, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
                // body: JSON.stringify({"name":name,"price":price})
            })
            .then(response => response.json())
            .then(data =>
                document.getElementById("result").innerText = JSON.stringify(data))
            .catch(error =>
                console.log('error is:', error)
            );
        }

ここでは次の点に注意してください、（上記のように）要求をGET：

手動スプライスするために必要なパラメータ値/get?name=name&price=price
GETリクエストは、リクエストボディそのものではないので、その体の構成アイテムを持っていなければならない構成の要求をフェッチ
GETリクエストは、リクエスト本体自体ではないので、入口ヘッダを設定しなくてもよいです
リクエストの結果は、その後、最初のデータが蒸気である場合、JSON（JSON（）メソッドの呼び出し）を変換する必要があります
時間はまだ矢印の関数である第二のリクエストの結果は、その後、データ処理の必要性として、この時間は、カスタム関数のプロセスを呼び出します

フェッチ：POST（JSON）要求

HTML：

    <form method="GET" style="margin-left:5%;">
        <label>name:</label><input type="text" name="name"/>
        <label>price:</label><input type="number" name="price"/>
        <label><button type="button" onclick="getAction()">GET提交</button></label>
    </form>

JavaScriptの：

    function getAction() {
            // 组装请求参数
            var name = document.querySelector("input[name=name]").value;
            var price = document.querySelector("input[name=price]").value;
            price = Number(price)
            fetch("/post", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({"name":name,"price":price})
            })
            .then(response => response.json())
            .then(data =>
                document.getElementById("result").innerText = JSON.stringify(data))
            .catch(error =>
                console.log('error is:', error)
            );
       }

私たちは、アールに注意を払う必要があります。

Content-TypeリクエストヘッダPOSTリクエストがあることが必要application/jsonとして、application/x-www-form-urlencoded私がすることによって測定されていない、ポインタを与えてください
データ・オブジェクト要求本体は、文字列を変換するにはJSON.stringify（）関数を使用する必要があります。

フェッチ：POST（フォーム）を要求

HTML：

       <form method="GET" style="margin-left:5%;" name="fm" action="/form">
            <label>name:</label><input type="text" name="name"/>
            <label>price:</label><input type="number" name="price"/>
        </form>

JavaScriptの：

        function getAction() {
            // 组装请求参数
            let name = document.querySelector("input[name=name]").value;
            let price = document.querySelector("input[name=price]").value;
            // price = Number(price)
            /*
            let formdata = new FormData();
            formdata.append("name",name);
            formdata.append("price",price);
            */
            let data = new URLSearchParams();
            data.set("name",name);
            data.set("price",price);
            fetch("/form", {
                method: 'POST',
                headers: {
                     "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"
                },
                body: data
            })
            .then( response =>response.json() )
            .then(function (data){
                this.success(data);
            })
            .catch(error =>
                console.log('error is:', error)
            );
        }
        function success(data) {
            document.getElementById("result").innerText = JSON.stringify(data)
            alert(window.atob(data.sign))
        }

後で成功にURLSearchParamsに要求されたデータを組み立てた後、あなたが指していただくか、他の二つの方法があり、それは理想的ではない、数回にわたる中央のターンを見ることができます。