此筆記是我在拉勾學(xué)習(xí)課程過(guò)程中的總結(jié)，文字原創(chuàng)，筆記里很多技巧和知識(shí)是老師總結(jié)的拳球，如果有侵權(quán)，請(qǐng)聯(lián)系本人珍特！

一些基本概念

1.API:

API（Application Programming Interface,應(yīng)用程序編程接口）是一些預(yù)先定義的函數(shù)醇坝，目的是提供應(yīng)用程序與開發(fā)人員基于某軟件或硬件得以訪問(wèn)一組例程的能力，而又無(wú)需訪問(wèn)源碼次坡，或理解內(nèi)部工作機(jī)制的細(xì)節(jié)呼猪。

2.瀏覽器提供的一套瀏覽器功能和頁(yè)面元素的api（BOM和DOM）

3.一些學(xué)習(xí)資料：

MDN：https://developer.mozilla.org/zh-CN/docs/Web/API

一、DOM

1.Document Object Model砸琅，可以把一個(gè)HTML網(wǎng)頁(yè)看做文檔樹宋距，通過(guò)DOM提供的API對(duì)節(jié)點(diǎn)進(jìn)行操作。

2.DOM樹

DOM樹包含的節(jié)點(diǎn)類型：
（標(biāo)簽症脂、屬性谚赎、文本、注釋等）

• 元素：網(wǎng)頁(yè)中的標(biāo)簽
• 屬性：標(biāo)簽的屬性

3.獲取頁(yè)面元素：

• 根據(jù)id獲取元素(id具有唯一性)
  方法：調(diào)用document對(duì)象的getElementById方法
  參數(shù)：字符串類型的id的屬性值
  返回值：對(duì)應(yīng)id的元素對(duì)象

// 獲取頁(yè)面中id值為box的元素
var box = document.getElementById('box');

• 根據(jù)標(biāo)簽名獲取元素
  getElementsByTagName

返回值诱篷，同名元素對(duì)象組成的偽數(shù)組 htmlcollection
操作時(shí)按數(shù)組方法操作壶唤，且元素動(dòng)態(tài)增加

// 提前獲取元素
var divs = document.getElementsByTagName("div");

• 元素對(duì)象內(nèi)部獲取元素

獲取元素對(duì)象內(nèi)部，本身也可以調(diào)用根據(jù)標(biāo)簽獲取元素方法棕所，類似于css后代選擇器

//   元素對(duì)象內(nèi)部可以繼續(xù)打點(diǎn)調(diào)用通過(guò)標(biāo)簽名獲取元素的方法
// 類似于css中 后代選擇器闸盔，縮小選擇范圍
var  box1 = document.getElementById("box1");
var ps1 = box1.getElementsByTagName("p");

• 根據(jù)name屬性獲取元素（只做了解，不建議使用）

選中的元素也是動(dòng)態(tài)變化的

// 獲取元素中name屬性值為age的元素
// 節(jié)點(diǎn)列表集合 NodeList
var ages = document.getElementsByName('age');
 // 兼容問(wèn)題：在ie和Opera中使用琳省，會(huì)多選中id屬性值相同的元素
 // 方法選中元素是動(dòng)態(tài)變化的

• 根據(jù)類名（class）獲取元素
  getElementsByClassName
  返回class屬性值相同元素對(duì)象組成的偽數(shù)組 htmlcollection
  也可以動(dòng)態(tài)添加
  不兼容IE8及以下瀏覽器

// 獲取頁(yè)面中所有類名為.box的元素
var box = document.getElementsByClassName('box');

• 根據(jù)選擇器獲取元素
  1：通過(guò)document的querySelector方法迎吵，通過(guò)css中選擇器去選擇第一個(gè)符合條件的標(biāo)簽
  2：調(diào)用querySelectorAll ，通過(guò)css中的選擇器選取所有符合條件的標(biāo)簽元素针贬，返回值是 nodelist
  參數(shù)：字符串---css中的選擇題

 // 在結(jié)構(gòu)之后使用 選擇器 選取方法,選中第一個(gè)
 var para = document.querySelector("#box1 .para"); 
 // 選擇所有符合條件的元素
 var paras = document.querySelectorAll("#box1 .para");
 // 得到一個(gè) nodelist        
// 兼容問(wèn)題：ie8 以下不兼容

4.DOM事件與綁定

-執(zhí)行機(jī)制：觸發(fā)—響應(yīng)機(jī)制

• 綁定事件三要素：

  • 事件源：綁定給誰(shuí)
  • 事件類型：綁定干什么類型事件 click击费，hover
  • 事件函數(shù)：事件發(fā)生后執(zhí)行什么內(nèi)容，寫在函數(shù)內(nèi)部

• 常用的鼠標(biāo)事件類型：

  事件	說(shuō)明
  Onclick	鼠標(biāo)左鍵單擊
  Ondblclick	鼠標(biāo)左鍵雙擊
  Onmousedown	鼠標(biāo)按下觸發(fā)
  Onmouseup	鼠標(biāo)按鍵放開觸發(fā)
  Onmousemove	鼠標(biāo)在元素上移動(dòng)
  Onmouseover	鼠標(biāo)在元素上觸發(fā)
  Onmouseout	鼠標(biāo)移出元素邊界

• 常用的事件監(jiān)聽方法

  • html綁定

  <input type="button" id="btn" value="點(diǎn)擊" onclick="alert('點(diǎn)我做什么桦他？')">
  

• 綁定dom對(duì)象

  <!-- <input type="button" id="btn" value="點(diǎn)擊" onclick="alert('點(diǎn)我做什么蔫巩？')"> -->
    <input type="button" id="btn" value="點(diǎn)擊">
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function () {
            alert("我做什么？");
        }
  

5.綁定事件的其他方法

此處為了和DOM0級(jí)事件的綁定方法綜合學(xué)習(xí)

5.1 DOM 0級(jí)事件綁定

• on方法快压，即上述方法圆仔，采用onclick onmouseover等，只能每次綁定一個(gè)事件嗓节，如多次綁定荧缘，則先綁定的會(huì)被后面的層疊

5.2 DOM 2級(jí)事件綁定

• Element.addEventListener()方法
  參數(shù)：
  • 第一個(gè)：事件類型字符串（需要on）
  • 第二個(gè)：事件函數(shù)
    同一個(gè)元素可以多次綁定監(jiān)聽，同一類型可以注冊(cè)多個(gè)事件函數(shù)
    不兼容ie9以下

<input type="button" value="點(diǎn)擊" id="btn">
    <script>
        var btn = document.getElementById("btn");
         // DOM0 級(jí)事件
        // 綁定事件的方式
        // btn.onclick = function () {
        //   alert(1);
        // };
        // 綁定多次相同的事件
        // btn.onclick = function () {
        //   alert(2);
        // };

        // DOM 2 級(jí)事件綁定方式
        btn.addEventListener("click",function () {
            alert(1);
        });
        // 多次綁定個(gè)相同的事件類型拦宣，事件會(huì)根據(jù)書寫的順序進(jìn)行一個(gè)事件排隊(duì)
        btn.addEventListener("click",function () {
            alert(2);
        });
        // 此處clickevent是作為參數(shù)傳進(jìn)來(lái)截粗，不可以加括號(hào)，否則就直接調(diào)用了
        btn.addEventListener("click",clickEvent);
        function clickEvent () {
            alert(3);
        }
    </script>

• element.attachEvent() 方法
  參數(shù)：
  • 第一個(gè)：事件類型字符串（需要on）
  • 第二個(gè)：事件函數(shù)
    同一元素可以多次綁定監(jiān)聽鸵隧，同一個(gè)事件類型可以注冊(cè)多個(gè)事件函數(shù)
    只兼容IE10及以下

 <input type="button" value="點(diǎn)擊" id="btn">
    <script>
        var btn = document.getElementById("btn");    
        // DOM 2 級(jí)事件綁定方式
        // 兼容: IE 10以下
        //  IE 8 以下會(huì)出現(xiàn)事件隊(duì)列順序錯(cuò)亂
        btn.attachEvent("onclick",function() {
            alert(3);
        });
        btn.attachEvent("onclick",clickEvent);
        function clickEvent () {
            alert(4);
        }
    </script>

• 兼容寫法
  為了應(yīng)對(duì)ie的兼容能力绸罗，利用瀏覽器的能力監(jiān)測(cè)和if語(yǔ)句條件判斷，將兩種寫法綜合到一起
• 參數(shù)：事件源豆瘫，事件類型（不加 on）珊蟀，事件函數(shù)

// 自己制作一個(gè)兼容所有瀏覽器的綁定事件函數(shù)
    // 參數(shù)：事件源，事件類型，事件函數(shù)
    function addEvent (ele,type,fn) {
        // IE 9 及以上的瀏覽器和其他瀏覽器育灸，使用addEventListener方法
        // IE 9 以下的瀏覽器腻窒，使用 attachEvent 方法
        // 瀏覽器能力檢測(cè)
        if (ele.addEventListener) {
            ele.addEventListener(type,fn);
        }else if (ele.attachEvent) {
            ele.attachEvent("on" + type,fn);
        }
    }

5.3 事件解綁

• DOM 0級(jí)事件解綁

ele.onclick = null

• DOM 2級(jí)事件解綁
  element.removeEventListener() 方法

• 參數(shù)：

  • 參數(shù)1：事件類型的字符串，直接寫click
  • 參數(shù)2：事件函數(shù)應(yīng)用名
    注意：沒(méi)有辦法移除一個(gè)匿名函數(shù)
    兼容性問(wèn)題：不支持 IE9 以下的瀏覽器

• element.detachEvent() 方法磅崭。

• 參數(shù)：

  • 參數(shù)1：事件類型的字符串（需要加 on）
  • 參數(shù)2：事件函數(shù)
    注意：：沒(méi)有辦法移除一個(gè)匿名函數(shù)
    兼容性問(wèn)題：只支持 IE10 及以下的瀏覽器

 // DOM 0 級(jí)事件綁定方式
        // btn.onclick = function () {
        //     alert(1);
        // }
        // // 解除綁定
        // btn.onclick = null;
        // 綁定事件
        // btn.addEventListener("click",fun);
        // btn.addEventListener("click",fun2);
        // 解除綁定
        // btn.removeEventListener("click",fun);        
        // function fun() {
        //     alert(2);
        // }
        // function fun2 () {
        //     alert(3);
        // }
            // 綁定事件
            btn.attachEvent("onclick",fun1);
            // 解除綁定
            btn.detachEvent("onclick",fun);
                    function fun() {
                        alert(2);
                    }

• 解綁事件綜合寫法

  • 參數(shù)：事件源儿子，事件類型（不加 on），事件函數(shù)

 <input type="button" value="點(diǎn)擊" id="btn">
    <script>
        var btn = document.getElementById("btn");
        addEvent(btn,"click",fun1);
        function fun1() {
            alert(1);
        }
        // DOM 2 級(jí)事件綁定方式
        // 自己制作一個(gè)兼容所有瀏覽器的綁定事件函數(shù)
        // 參數(shù)：事件源砸喻，事件類型柔逼，事件函數(shù)
        function addEvent (ele,type,fn) {
            // IE 9 及以上的瀏覽器和其他瀏覽器，使用addEventListener方法
            // IE 9 以下的瀏覽器割岛，使用 attachEvent 方法
            // 瀏覽器能力檢測(cè)
            if (ele.addEventListener) {
                ele.addEventListener(type,fn);
            }else if (ele.attachEvent) {
                ele.attachEvent("on" + type,fn);
            }
        }
        // 兼容所有瀏覽器的 解除綁定事件的函數(shù)
        // 參數(shù)：事件源愉适，事件類型，事件函數(shù)
        function removeEvent(ele,type,fn) {
          // 瀏覽器能力檢測(cè)
          if (ele.removeEventListener) {
            ele.removeEventListener(type,fn);
          } else if (ele.detachEvent) {
            ele.detachEvent("on" + type,fn);
          }
        }
        
    </script>

6.DOM元素屬性操作

6.1非表單元素屬性

如href癣漆、title维咸、id、src等
調(diào)用：元素對(duì)象打點(diǎn)調(diào)用屬性名扑媚，obj.href
注意：部分屬性名跟關(guān)鍵字和保留字沖突腰湾，會(huì)更換寫法
class → className
for → htmlFor
rowspan → rowSpan
屬性賦值：給元素屬性賦值，等號(hào)右側(cè)的賦值都是字符串賦值

  var link = document.getElementById("link");
        var pic = document.getElementById("pic");
        // 調(diào)用元素對(duì)象的屬性疆股，從而操作 HTML 中的標(biāo)簽屬性
        console.log(link.textContent);//獲取的是文本內(nèi)容
        console.log(link.href);
        console.log(link.title);
        console.log(link.id);// id 是只讀屬性费坊，不可更改
        console.log(pic.id);// id 是只讀屬性，不可更改
        console.log(pic.src);
        console.log(pic.alt);
        console.log(pic.className);
        // 等號(hào)賦值旬痹，值必須是字符串類型
        pic.src = "images/b.jpg";

案例1：切換按鈕

<input type="button" value="點(diǎn)擊" id = "btn"><br>
    <img src="images/a.jpg" alt="美女" id = "pic">
    <script>
        // 獲取元素
        var btn = document.getElementById("btn");
        var pic = document.getElementById("pic");
        // 給按鈕添加點(diǎn)擊事件
        var num = 1;
        btn.onclick = function () {
            // 給圖片切換 src 屬性
            // 通過(guò) if 語(yǔ)句判斷附井，如果是 a 圖片，則切換為b两残，反之切換為 a
            if ( num === 1) {
                pic.src = "images/b.jpg";
                // 數(shù)字要跟著發(fā)生變化
                num = 2;
            }else {
                pic.src = "images/a.jpg";
                num = 1;
            }
        };

案例2：隱藏元素

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <input type="button" value="點(diǎn)擊隱藏" id="btn">
    <div id="box"></div>
    <script>
        // 獲取元素
        var btn = document.getElementById("btn");
        var box = document.getElementById("box");
        // 點(diǎn)擊按鈕永毅，讓 div 顯示或隱藏
        // box.style.display = "none";
        btn.onclick = function () {
            // 點(diǎn)擊按鈕，讓 div 顯示或隱藏
            // 根據(jù) 按鈕 的 value 值進(jìn)行條件判斷
            if (btn.value === "點(diǎn)擊隱藏") {
                box.className = "hide";
                btn.value = "點(diǎn)擊顯示";
            }else {
                box.className = "show";
                btn.value = "點(diǎn)擊隱藏";
            }
        };
    </script>

6.2 this指向

• 在事件函數(shù)內(nèi)部 有一個(gè) this人弓，指向事件源
  區(qū)分一下不同函數(shù)內(nèi)部 this 的指向
  • 普通函數(shù) --> window對(duì)象
  • 構(gòu)造函數(shù) --> 指向的是生成的實(shí)例對(duì)象
  • 對(duì)象的方法 --> 指向的是對(duì)象本身
  • 事件函數(shù) --> 指向的是事件源

 // 點(diǎn)擊按鈕沼死，讓 div 顯示或隱藏
            // 根據(jù) 按鈕 的 value 值進(jìn)行條件判斷
            if (this.value === "點(diǎn)擊隱藏") {
                box.className = "hide";
                this.value = "點(diǎn)擊顯示";
            }else {
                box.className = "show";
                this.value = "點(diǎn)擊隱藏";
            }
        };

        // 在事件函數(shù)內(nèi)部 有一個(gè) this，指向事件源
        // 區(qū)分一下不同函數(shù)內(nèi)部 this 的指向
        // 普通函數(shù)  --> window對(duì)象
        // 構(gòu)造函數(shù)  --> 指向的是生成的實(shí)例對(duì)象
        // 對(duì)象的方法 --> 指向的是對(duì)象本身
        // 事件函數(shù)  --> 指向的是事件源

6.3 獲取標(biāo)簽內(nèi)部?jī)?nèi)容的屬性

獲取標(biāo)簽內(nèi)部?jī)?nèi)容的屬性有兩個(gè)：innerHTML和 innerText

• innerHTML屬性會(huì)獲取全部?jī)?nèi)容崔赌，包括標(biāo)簽意蛀，獲取內(nèi)容的空白換行等
• innerText屬性，如果有標(biāo)簽健芭，會(huì)過(guò)濾標(biāo)簽县钥，獲取內(nèi)容也會(huì)去掉換行和空白等。

box.innerHTML; // 
box.innerText;// 
box.innerHTML = "<h2>我會(huì)識(shí)別標(biāo)簽</h2>";
box.innerText = "<h2>我不會(huì)識(shí)別標(biāo)簽</h2>";

6.4 更改標(biāo)簽內(nèi)部?jī)?nèi)容

• innerHTML設(shè)置屬性值慈迈、有標(biāo)簽的字符串若贮，會(huì)按照html語(yǔ)法的標(biāo)簽加載。
• innerText設(shè)置有標(biāo)簽的屬性值的時(shí)候按照普通字符加載。
  應(yīng)用場(chǎng)景：
• innerText設(shè)置純字符串
• innerHTML設(shè)施有標(biāo)簽的結(jié)構(gòu)

// 更改標(biāo)簽內(nèi)容谴麦、
        box.innerHTML = "<h2>hello js<\h2>";
        box.innerText = "<h2>hello js<\h2>";

6.5 表單元素操作

• Value用于大部分表單元素內(nèi)容獲却姥亍（option除外）
• type 可以獲取input標(biāo)簽的類型(輸入框或復(fù)選框等)
  ? disabled 禁用屬性
  ? checked 復(fù)選框選中屬性
  ? selected 下拉菜單選中屬性
  ? 注意：在 DOM 中元素對(duì)象的屬性值只有一個(gè)時(shí)，會(huì)被轉(zhuǎn)成布爾值顯示细移。

   <input type="text" class="gray" value="請(qǐng)輸入搜索關(guān)鍵字" id="txtSearch">
  <input type="button" value="搜索" id="btnSearch">
  <script>
    //   獲取元素
    var txtSearch = document.getElementById("txtSearch");
    //   1搏予、獲得焦點(diǎn)時(shí)，可以使用 onfocus弧轧，如果文本框內(nèi)容是默認(rèn) 請(qǐng)輸入搜索關(guān)鍵字，碗殷，需要清空文字精绎，讓文字顏色加載黑色
    txtSearch.onfocus = function () {
        if (this.value === "請(qǐng)輸入搜索關(guān)鍵字" ) {
            this.value = "";
            this.className = "black";
        }
    };
    // 2、失去焦點(diǎn)時(shí)锌妻，可以使用一個(gè) onblur代乃，如果文本框內(nèi)容為空，需要改為默認(rèn)提示內(nèi)容仿粹， 請(qǐng)輸入搜索關(guān)鍵字搁吓，讓文字顏色變?yōu)榛疑?    txtSearch.onblur = function () {
        // 如果用戶輸入內(nèi)容正好與默認(rèn)提示文本相同，失去焦點(diǎn)時(shí)吭历，也應(yīng)該讓蚊子顏色變?yōu)榛疑?        // 判斷內(nèi)容是否為空
        if (this.value === "") {
            this.value = "請(qǐng)輸入搜索關(guān)鍵字";
            this.className = "gray";
        }
    };

6.6 自定義屬性

? getAttribute(name) 獲取標(biāo)簽行內(nèi)屬性
? setAttribute(name堕仔，value) 設(shè)置標(biāo)簽行內(nèi)屬性
? removeAttribute(name) 移除標(biāo)簽行內(nèi)屬性
? 與element.屬性的區(qū)別: 上述三個(gè)方法用于獲取任意的行內(nèi)屬性，包括自定義的屬性晌区。

 <div id="box" age="18" sex="male">小明</div>
    <script>
        // 獲取元素
        var box = document.getElementById("box");
        // 元素自有屬性
        console.log(box.id);
        // 元素自定義的新屬性不能用點(diǎn)語(yǔ)法調(diào)用
        // 可以調(diào)用元素對(duì)象的獲取自定義屬性的方法
        console.log(box.getAttribute("age"));
        console.log(box.getAttribute("sex"));
        // 也可以調(diào)用自有屬性
        console.log(box.getAttribute("id"));
        // 設(shè)置屬性摩骨，添加新的自定義屬性或者自有屬性
        box.setAttribute("age","20");
        box.setAttribute("city","beijing");
        // 傳的參數(shù)不需要進(jìn)行屬性名的修改，也可以傳入原本封裝好的參數(shù)朗若，比如class
        box.setAttribute("class","demo");

        // 移除屬性
        box.removeAttribute("age");
    </script>

6.7 Style屬性操作

• style的獲取的值是行內(nèi)樣式組成的樣式對(duì)象恼五，內(nèi)嵌式和外鏈的樣式是得不到的
• 設(shè)置寬度，高度哭懈，位置的屬性類型是字符串灾馒，需要加上px
• 復(fù)合屬性轉(zhuǎn)換成駝峰性
• 在實(shí)際工作中，如果需要修改多條通過(guò)類名的方式遣总，如果需要修改的樣式只有1-2條直接使用style操作

  <script>
        // 工作中選擇哪種方式
        // 獲取元素
        var btn = my$("btn");
        var box = my$("box");
        // 給按鈕添加點(diǎn)擊事件
        btn.onclick = function () {
            // 1.更改類名的方法
            // box.className = "cls";
            // 2.通過(guò)元素對(duì)象的style屬性設(shè)置
            box.style.width = "100px";
            box.style.height = "100px";
            box.style.backgroundColor = "blue";
            // 如果更改條數(shù)比較多睬罗，選擇更改類名方式，如果更改屬性比較少彤避，則選擇style方式
        };
    </script>

6.8 節(jié)點(diǎn)

節(jié)點(diǎn)屬性
Nodetype 節(jié)點(diǎn)的類型傅物，屬性值為數(shù)字，表示不同節(jié)點(diǎn)類型琉预，只讀
1 元素節(jié)點(diǎn)
2 屬性節(jié)點(diǎn)
3 文本節(jié)點(diǎn)

• NodeName 節(jié)點(diǎn)的名稱（標(biāo)簽名稱）董饰，只讀
• NodeValue 節(jié)點(diǎn)值，返回或者是當(dāng)前節(jié)點(diǎn)值，元素節(jié)點(diǎn)的nodeValue始終是null

    <div id="box"></div>
    <script>
        var box = document.getElementById("box");
        // 1.元素節(jié)點(diǎn)
        console.dir(box);
        // 屬性節(jié)點(diǎn)獲取
        var idNode = box.getAttributeNode("id");
        console.dir(idNode);
        idNode.nodeValue = "demo";
        
        // 文本節(jié)點(diǎn)
        var childNodes = box.childNodes;
        console.log(childNodes);
        childNodes[0].nodeValue = "box 1";
    </script>

節(jié)點(diǎn)關(guān)系

• 父子節(jié)點(diǎn)常用屬性

? childNodes 卒暂，獲取一個(gè)節(jié)點(diǎn)所有子節(jié)點(diǎn)的實(shí)時(shí)的集合啄栓，集合是動(dòng)態(tài)變化的，只讀（數(shù)組）

? children 也祠，返回一個(gè)節(jié)點(diǎn)所有的子元素節(jié)點(diǎn)集合昙楚，是一個(gè)動(dòng)態(tài)更新的 HTML 元素集合，只讀（不包含文本和屬性節(jié)點(diǎn)）

? firstChild 诈嘿，返回該節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)堪旧，沒(méi)有返回 null。只讀

? lastChild 奖亚，返回該節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)淳梦，沒(méi)有返回 null。只讀

? parentNode 返回一個(gè)當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)昔字，如果沒(méi)有這樣的節(jié)點(diǎn)爆袍，比如說(shuō)像這個(gè)節(jié)點(diǎn)是樹結(jié)構(gòu)的頂端或者沒(méi)有插入一棵樹中，這個(gè)屬性返回 null作郭。

? parentElement 返回當(dāng)前節(jié)點(diǎn)的父元素節(jié)點(diǎn)陨囊，如果該元素沒(méi)有父節(jié)點(diǎn)，或者父節(jié)點(diǎn)不是一個(gè) DOM元素夹攒，則返回 null蜘醋。

 var box = document.getElementById("box");
        // 獲取子節(jié)點(diǎn)
        console.log(box.childNodes);//獲取所有類型的子節(jié)點(diǎn)（會(huì)獲取一些不需要的換行符號(hào)等）
        console.log(box.children);//獲取所有元素類型的子節(jié)點(diǎn)，用的較多
        console.log(box.firstChild);//獲取所有類型的子節(jié)點(diǎn)的第一個(gè)
        console.log(box.lastChild);//獲取所有類型的子節(jié)點(diǎn)的最后一個(gè)
        console.log(box.lastElementChild);//獲取所有元素類型的子節(jié)點(diǎn)的最后一個(gè)（用的多）
        // 獲取父級(jí)
        console.log(box.parentNode);//獲取父級(jí)的元素節(jié)點(diǎn)
        console.log(box.parentElement);

• 兄弟節(jié)點(diǎn)關(guān)系
  ? nextSibling 芹助，返回與該節(jié)點(diǎn)同級(jí)的下一個(gè)節(jié)點(diǎn)堂湖，沒(méi)有返回null。只讀屬性

  ? previousSibling 状土，返回與該節(jié)點(diǎn)同級(jí)的上一個(gè)節(jié)點(diǎn)无蜂，沒(méi)有返回null。只讀屬性

  ? nextElementSibling 蒙谓，返回與該節(jié)點(diǎn)同級(jí)的下一個(gè)元素節(jié)點(diǎn)斥季，如果沒(méi)有返回null。只讀屬性

  注意：nextElementSibling 和 previousElementSibling 有兼容性問(wèn)題累驮，IE9以后才支持酣倾。

• 創(chuàng)建新節(jié)點(diǎn)
  ? document.createElement("div") 創(chuàng)建元素節(jié)點(diǎn)
  ? document.createAttribute("id") 創(chuàng)建屬性節(jié)點(diǎn)
  ? document.createTextNode("hello") 創(chuàng)建文本節(jié)點(diǎn)
  ? parentNode.appendChild(child)：將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾。
  保存到變量中谤专，方便使用.

// 創(chuàng)建新的節(jié)點(diǎn)
    var div = document.createElement("div");
    var cls = document.createAttribute("class");
    var txt = document.createTextNode("hello");
    // 創(chuàng)建的新的節(jié)點(diǎn)躁锡，是存儲(chǔ)在內(nèi)存中的，但是并沒(méi)添加到 DOM 樹上
    // 獲取元素
    var box = my$("box");
    var p2 = my$("p2");
    box.appendChild(div);
    // 文本節(jié)點(diǎn)也可以添加到元素內(nèi)部
    div.appendChild(txt);
    // 注意：自己創(chuàng)建的元素節(jié)點(diǎn)本身也是一個(gè)對(duì)象置侍，也可以去添加一些新的屬性和方法映之，這些操作將來(lái)在元素加載到 DOM 樹中時(shí)拦焚，依舊保留

    // DOM 中原有的節(jié)點(diǎn)也可以傳給 appendChild 的參數(shù)
    box.appendChild(p2);

節(jié)點(diǎn)操作

• parentNode.replaceChild(newChild, oldChild)：用指定的節(jié)點(diǎn)替換當(dāng)前節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)，并返回被替換掉的節(jié)點(diǎn)杠输。

• parentNode.insertBefore(newNode, referenceNode)：在參考節(jié)點(diǎn)之前插入一個(gè)擁有指定父節(jié)點(diǎn)的子節(jié)點(diǎn)赎败，
  referenceNode 必須設(shè)置，如果 referenceElement 為 null 則 newNode將被插入到子節(jié)點(diǎn)的末尾蠢甲。

• parentNode.removeChild(child)：移除當(dāng)前節(jié)點(diǎn)的一個(gè)子節(jié)點(diǎn)僵刮。這個(gè)子節(jié)點(diǎn)必須存在于當(dāng)前節(jié)點(diǎn)中。

• Node.cloneNode()：克隆一個(gè)節(jié)點(diǎn)鹦牛，并且可以選擇是否克隆這個(gè)節(jié)點(diǎn)下的所有內(nèi)容搞糕。參數(shù)為Boolean 布爾值，表示是否采用深度克隆,如果為 true,則該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)也都會(huì)被克隆,如果為 false,則只克隆該節(jié)點(diǎn)本身能岩，默認(rèn)值為 true寞宫，節(jié)點(diǎn)下的內(nèi)容會(huì)被克隆。
  ? 注意：克隆時(shí)拉鹃，標(biāo)簽上的屬性和屬性值也會(huì)被復(fù)制，寫在標(biāo)簽行內(nèi)的綁定事件可以被復(fù)制鲫忍，但是通過(guò) JavaScript 動(dòng)態(tài)綁定的事件不會(huì)被復(fù)制膏燕。

<div id="box">
        <p>段落內(nèi)容 1</p>
        <p id="p2">段落內(nèi)容 2</p>
        <p>段落內(nèi)容 3</p>
        <p>段落內(nèi)容 4</p>
      </div>
      <script src="common.js"></script>
      <script>
        //   創(chuàng)建新節(jié)點(diǎn)
        var div = document.createElement("div");
        var cls = document.createAttribute("class");
        console.log(cls);
        var txt = document.createTextNode("hello");

        // 創(chuàng)建新的節(jié)點(diǎn)，是存儲(chǔ)在內(nèi)存中的悟民，并沒(méi)有放在 DOM樹中
        div.appendChild(txt);
        // 獲取元素
        var box = my$("box");
        var p2 = my$("p2");
        // 替換節(jié)點(diǎn)
        // box.replaceChild(div,p2);

        // 在某個(gè)指定子節(jié)點(diǎn)之前添加一個(gè)新的子節(jié)點(diǎn)
        box.insertBefore(div,p2);

        box.insertBefore(div,null);
        // 移除節(jié)點(diǎn)
        box.removeChild(p2);
        // 克隆元素box
        // 淺度克隆
        // var newBox = box.cloneNode(false);
        // 深度克隆
        var newBox = box.cloneNode(true);
        new box.id = "newBox";
        document.body.appendChild(newBox);

    </script>

節(jié)點(diǎn)判斷

? Node.hasChildNodes()：沒(méi)有參數(shù)坝辫，返回一個(gè) Boolean 布爾值，來(lái)表示該元素是否包含有子節(jié)點(diǎn)射亏。
? Node.contains(child)：返回一個(gè) Boolean 布爾值近忙，來(lái)表示傳入的節(jié)點(diǎn)是否為該節(jié)點(diǎn)的后代節(jié)點(diǎn)。

 // 判斷內(nèi)部有子節(jié)點(diǎn)的方法有三種
    // 1.判斷有沒(méi)有子節(jié)點(diǎn),不區(qū)分節(jié)點(diǎn)類型
    // console.log(box.hasChildNodes());
    // console.log(demo.hasChildNodes());
    // 2.判斷節(jié)點(diǎn)內(nèi)部第一個(gè)子節(jié)點(diǎn)是否不為空
    // console.log(box.firstChild !== null);
    // console.log(demo.firstChild !== null);
    // 3.判斷子節(jié)點(diǎn)的數(shù)組對(duì)象的長(zhǎng)度是否為0
    console.log(box.childNodes.length > 0);
    console.log(demo.childNodes.length > 0);

    // 補(bǔ)充子元素節(jié)點(diǎn)是否存在
    console.log(box.children.length > 0);
    console.log(demo.children.length > 0);
    // 判斷節(jié)點(diǎn)內(nèi)部是否有某個(gè)后代節(jié)點(diǎn)
    // console.log(box.contains(p2));

案例：

<h1>動(dòng)態(tài)創(chuàng)建列表</h1>
    <div id="box">
      <!-- <ul>
        <li>劉備</li>
      </ul> -->
    </div>
    <script src="common.js"></script>
    <script>
        // 獲取元素
        var box = my$("box");
        // 創(chuàng)建一組數(shù)據(jù)
        var names = ["劉備","曹操","孫權(quán)","關(guān)羽"];
        // 添加ul元素
        var ul = document.createElement("ul");
        // 添加元素到box內(nèi)部
        box.appendChild(ul);
        // 根據(jù)數(shù)組項(xiàng)向 li 中添加數(shù)據(jù)
        for (var i = 0 ; i < name.length ; i++) {
            // 每次生成一個(gè)新的 li 元素
            var li = document.createElement("li");
            // 向 ul 里添加 li
            ul.appendChild(li);
            // 給每個(gè) li 元素添加內(nèi)容
            li.innerText = names[i];
        }

6.9 事件流

事件流

存在捕獲現(xiàn)象時(shí)智润，先捕獲及舍，在進(jìn)行冒泡

• addEventListener 第三參數(shù)：用來(lái)事件流的方向，參數(shù)是布爾值窟绷，false:事件冒泡類型锯玛； true:事件捕獲類型。默認(rèn)值是false
  三個(gè)階段
  1. 事件捕獲
  2. 事件執(zhí)行
  3. 事件冒泡
• addEventListener() 第三個(gè)參數(shù)為 false 時(shí)兼蜈，事件冒泡
• addEventListener() 第三個(gè)參數(shù)為 true 時(shí)攘残，事件捕獲
• onclick 的方法類型：只能進(jìn)行事件冒泡過(guò)程，沒(méi)有捕獲階段
• attachEvent() 方法：只能進(jìn)行事件冒泡過(guò)程为狸，沒(méi)有捕獲階段

    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>
    <script>
        // 獲取元素
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        // 添加點(diǎn)擊事件
        // addEventListener 有第三個(gè)參數(shù)歼郭，用來(lái)決定事件流的方向
        // 參數(shù)值是 布爾類型的值，false 表示事件冒泡過(guò)程辐棒，true 表示事件捕獲過(guò)程
        // 參數(shù)默認(rèn)值是 false
        // box1.addEventListener("click",function () {
        //     console.log(1);
        // },false);
        // box2.addEventListener("click",function () {
        //     console.log(2);
        // },false);
        // box3.addEventListener("click",function () {
        //     console.log(3);
        // },false);
        // box1.addEventListener("click",function () {
        //     console.log(this.id);
        // },true);
        // box2.addEventListener("click",function () {
        //     console.log(this.id);
        // },true);
        // box3.addEventListener("click",function () {
        //     console.log(this.id);
        // },true);

        // onclick 屬性添加事件方法只有冒泡過(guò)程病曾，沒(méi)有捕獲過(guò)程
        // attachEvent() 方法添加事件方法只有冒泡過(guò)程牍蜂，沒(méi)有捕獲過(guò)程
        box1.onclick = function () {
            console.log(1);
        };
        box2.onclick = function () {
            console.log(2);
        };
        box3.onclick = function () {
            console.log(3);
        };

事件委托
利用事件冒泡，將子級(jí)事件委托給父級(jí)加載
同時(shí)需要利用事件函數(shù)的 e 參數(shù)知态，內(nèi)部存儲(chǔ)的是事件對(duì)象

   <ul id="list">
        <li>劉亦菲</li>
        <li>楊冪</li>
        <li>唐嫣</li>
        <li>趙麗穎</li>
        <li>劉詩(shī)詩(shī)</li>
    </ul>
    <script>
        // 讓每個(gè) li 被點(diǎn)擊后捷兰，添加特殊背景色，其他的不添加
        // 以前思路：獲取每個(gè)li標(biāo)簽负敏，批量添加事件
        // 事件委托：可以將一些子級(jí)的公共類型的事件委托給他們的父級(jí)添加贡茅，在父級(jí)內(nèi)部想辦法找到真正觸發(fā)事件的最底層的事件源
        // 獲取元素
        var list = document.getElementById("list");
        var lis = list.children;
        // 給ul添加點(diǎn)擊事件
        list.onclick = function () {
            // 在內(nèi)部要想辦法找到真正出發(fā)的事件 li 
            // 借用事件函數(shù)內(nèi)部的一個(gè)參數(shù) e ，e 是事件對(duì)象
            // 只要觸發(fā)事件其做，函數(shù)內(nèi)部都可以得到一個(gè)事件對(duì)象顶考，對(duì)象中存儲(chǔ)了關(guān)于事件的一系列數(shù)據(jù)
            // e.target 屬性記錄的就是真正觸發(fā)事件的事件源
            // 排除其他
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = "";
            }
            e.target.style.backgroundColor = "pink";
        };
    </script>

事件對(duì)象
只要觸發(fā)事件，就有一個(gè)對(duì)象妖泄，內(nèi)部存儲(chǔ)了事件相關(guān)數(shù)據(jù)

• e.eventPhase 查看事件觸發(fā)時(shí)所處的階段
• e.target 用于獲取觸發(fā)事件的元素
• e.srcElement 用于獲取觸發(fā)事件的元素驹沿，低版本瀏覽器使用
• e.currentTarget 用于獲取綁定事件的事件源元素
  e在低版本瀏覽器中有兼容問(wèn)題，低版本瀏覽器使用的是window.event

            // 獲取真正出發(fā)事件的元素蹈胡，兼容寫法
            var target = e.target || e.srcElement;
            // 事件對(duì)象兼容
            e = e || window.event;

• e.type 獲取事件類型
• e.clientX/e.clientY 所有瀏覽器都支持渊季，鼠標(biāo)距離瀏覽器窗口左上角的距離
• e.pageX/e.pageY IE8 以前不支持，鼠標(biāo)距離整個(gè)HTML頁(yè)面左上頂點(diǎn)的距離

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <script>
        // 獲取元素
        var box1 = document.getElementById("box1");

        // e.type 屬性獲取事件類型
        // box1.onclick = function (e) {
        //     // 事件對(duì)象兼容
        //     e = e || window.event;
        //     // 觸發(fā)的事件類型
        //     console.log(e.type);
        // };

        // 更多時(shí)候可能給同一個(gè)元素對(duì)象添加不同的事件類型罚渐，對(duì)應(yīng)執(zhí)行的事件函數(shù)內(nèi)部的代碼 不同
        // box1.onmouseover = function () {
        //     box1.style.backgroundColor = "skyblue";
        // };
        // box1.onmouseout = function () {
        //     box1.style.backgroundColor = "yellowgreen";
        // };
        // 可以將 所有給一個(gè)元素綁定的事件函數(shù)寫在一個(gè) 函數(shù)內(nèi)却汉，通過(guò)函數(shù)內(nèi)部的 e.type 判斷走不同的分支
        // box1.onmouseover = fn;
        // box1.onmouseout = fn;
        // // 避免添加多個(gè)函數(shù)，占用更多的內(nèi)存
        // function fn (e) {
        //     e = e || window.event;
        //     switch (e.type) {
        //         case "mouseover":
        //             box1.style.backgroundColor = "pink";
        //             break;
        //         case "mouseout":
        //             box1.style.backgroundColor = "skyblue";
        //             break;
        //     }
        // }
        // 事件對(duì)象中一些獲取尺寸的屬性
        box1.onclick = function (e) {
            // client系列：客戶端尺寸荷并，點(diǎn)擊的點(diǎn)參考瀏覽器窗口左上角的距離
            console.log(e.clientX);
            console.log(e.clientY);
            // page 系列：html 頁(yè)面尺寸合砂，點(diǎn)擊的點(diǎn)參考html 文檔左上角距離
            console.log(e.pageX);
            console.log(e.pageY);
        }

取消默認(rèn)行為和組織時(shí)間傳播的方式

• e.preventDefault() 取消默認(rèn)行為
• e.returnValue 取消默認(rèn)行為，低版本瀏覽器使用
• e.stopPropagation(); 阻止冒泡源织，標(biāo)準(zhǔn)方式
• e.cancelBubble = true; 阻止冒泡翩伪，IE 低版本，標(biāo)準(zhǔn)中已廢棄

    <a id="link" href="52_圖片跟隨鼠標(biāo)移動(dòng)效果.html">點(diǎn)擊</a>
    <script>
         var link = document.getElementById('link');
         link.onclick = function (e) {
            e = e || window.event;
            alert("hello");
            // 普通的方式阻止默認(rèn)行為
            return false;
            // DOM 方法
            e.preventDefault();
            // 低版本瀏覽器需要使用一個(gè)對(duì)象的屬性
            e.returnValue = false;
         }
    </script>

   <div id="box1">
        <div id="box2">
          <div id="box3">
          </div>
        </div>
      </div>
    <script>
        // 事件冒泡
        var box1 = document.getElementById('box1');
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');

        var array = [box1, box2, box3];

        for (var i = 0; i < array.length; i++) {
            var box = array[i];
            box.onclick = function (e) {
              e = e || window.event;
              console.log(this.id);
              // 阻止事件冒泡
              // e.stopPropagation();
              // 低版本瀏覽器使用 屬性
              e.cancelBubble = true;
            }
        }

6.10 DOM特效

偏移量屬性
? offsetParent 偏移參考父級(jí)谈息，距離自己最近的有定位的父級(jí)缘屹，如果都沒(méi)有定位參考body(html)
? offsetLeft/offsetTop 偏移位置
? offsetWidth/offsetHeight 偏移大小（border及以內(nèi)的寬高）

偏移量

 <script>
              // 獲取元素
              var child = document.getElementById("child");
              // 元素天生就認(rèn)識(shí)自己的偏移參考父級(jí)
              // console.log(child.offsetParent);
              
              // 偏移位置
              // console.log(child.offsetLeft);
              // console.log(child.offsetTop);
              
              // 偏移大小
              console.log(child.offsetWidth);
              console.log(child.offsetHeight);
      </script>

客戶端大小
? client 系列沒(méi)有參考父級(jí)元素黎茎。
? clientLeft/clientTop 邊框區(qū)域尺寸囊颅，不常用
? clientWidth/clientHeight 邊框內(nèi)部大小

客戶端大小

滾動(dòng)偏移屬性
? scrollLeft/scrollTop 盒子內(nèi)部滾動(dòng)出去的尺寸
? scrollWidth/scrollHeight 盒子內(nèi)容的寬度和高度

滾動(dòng)偏移

 var box = document.getElementById("box");
        // 滾動(dòng)便宜位置和大小
        // 滾動(dòng)條滾動(dòng)事件
        box.onscroll = function () {
            console.log(box.scrollLeft);
            console.log(box.scrollTop);
        }

二、BOM 瀏覽器對(duì)象模型

• 提供了獨(dú)立于內(nèi)容的傅瞻、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu)踢代。
• BOM 由多個(gè)對(duì)象組成，其中代表瀏覽器窗口的 Window對(duì)象是 BOM 的頂層對(duì)象嗅骄，其他對(duì)象都是該對(duì)象的子對(duì)象胳挎。
  -我們?cè)跒g覽器中的一些操作都可以使用BOM的方式進(jìn)行編程處理，比如：刷新瀏覽器溺森、后退慕爬、前進(jìn)窑眯、在瀏覽器中輸入U(xiǎn)RL等。

1.Window對(duì)象

window 是瀏覽器的頂級(jí)對(duì)象医窿，當(dāng)調(diào)用 window 下的屬性和方法時(shí)磅甩，可以省略 window。
有兩個(gè)特殊的屬性：window.name(會(huì)在原來(lái)的name屬性上賦值)和window.top (只讀的姥卢，不能后期更改)

2.對(duì)話框

Alert（）
Prompt（）
Confirm（）

 // 警示框
    btn1.onclick = function () {
      alert("hello");
    };

    // 提示框
    btn2.onclick = function () {
      var num = prompt("請(qǐng)輸入一個(gè)數(shù)字",12);
      console.log(num);
    };

    // 讓用戶確認(rèn)或者選擇的對(duì)話框
    // confirm 方法有返回值卷要，根據(jù)按鈕點(diǎn)擊情況，如果返回確定独榴，返回true僧叉，點(diǎn)擊取消返回false
    btn.onclick = function () {
        confirm("請(qǐng)問(wèn)，你確定刪除這條數(shù)據(jù)嗎棺榔？");
    };

3.加載事件

• Onload事件
  window加載完畢才會(huì)執(zhí)行的事件函數(shù)
  Window對(duì)象加載完畢：指的是html結(jié)構(gòu)加載完瓶堕，并引入外部資源（js、css症歇、img郎笆、視頻）也加載完畢。
  一個(gè)頁(yè)面只能有一個(gè)window.onload事件

4.延時(shí)器：

Window對(duì)象的方法忘晤，類似于定時(shí)炸彈

• 功能：指定時(shí)間后執(zhí)行函數(shù)
• window.setTimeout(func,time);
  • 參數(shù)1：執(zhí)行函數(shù)题画，可以匿名，可以函數(shù)名引用德频，不要加括號(hào)
  • 參數(shù)2：時(shí)間，毫秒為單位

// 延時(shí)器
        // 異步語(yǔ)句
        var timeout = window.setTimeout(function () {
            console.log("hello");
        },2000);

5.定時(shí)器

Window對(duì)象方法缩幸，壹置，每隔一段時(shí)間執(zhí)行一次

• 功能：每隔指定時(shí)間，周期性執(zhí)行
• window.setInterval(func,interval);
  • 參數(shù)1：執(zhí)行函數(shù)表谊，可以匿名或者函數(shù)引用
  • 參數(shù)2：時(shí)間間隔钞护，毫秒單位
    清除定時(shí)器
• window.clearInterval(timer);
  • 參數(shù)：指定的定時(shí)器變量名引用。
    ? 功能：清除指定的定時(shí)器爆办。
    ? 注意：清除的定時(shí)器需要存儲(chǔ)到一個(gè)變量中难咕，便于后期清除調(diào)用。

<!-- 開啟定時(shí)器： 每隔 0.5 秒輸出一次 i距辆， 并且讓 i 每次自加 -->
    <script>
        var i = 1;
        // 定時(shí)器也是異步加載
        // 程序執(zhí)行定時(shí)器代碼部分相當(dāng)于開啟定時(shí)器余佃，不需要其他操作
        // 第一次執(zhí)行函數(shù)時(shí)，是在第一個(gè)時(shí)間間隔之后
        // 清除定時(shí)器跨算，在定義的時(shí)候必須存到一個(gè)變量中
        var timer = window.setInterval(function () {
            console.log(i++);
        },500);
        // 清除定時(shí)器
        window.clearTimeout(timer);
    </script>

6.簡(jiǎn)單運(yùn)動(dòng)

通過(guò)定時(shí)器爆土，實(shí)現(xiàn)每隔一個(gè)極短的時(shí)間（50-100 毫秒左右），執(zhí)行函數(shù)诸蚕，函數(shù)內(nèi)部讓運(yùn)動(dòng)的屬性值發(fā)生變化步势。
拉終停表案例
設(shè)表先關(guān)案例請(qǐng)查閱筆記氧猬，此處不展示。

7.location對(duì)象

location 對(duì)象是 window 對(duì)象下的一個(gè)屬性坏瘩，使用的時(shí)候可以省略 window 對(duì)象
? location 可以獲取或者設(shè)置瀏覽器地址欄的 URL
? 使用 chrome 的控制臺(tái)查看
? 查 MDN：https://developer.mozilla.org/zh-CN/

        var btn = document.getElementById("btn");
        btn.onclick = function () {
        //     // 輸出url地址
        //     console.log(location.href);
        //     // 重新賦值
        //     location.;
        // 
        // assign委派
            // assign() 方法作用與href屬性相同盅抚，可以設(shè)置頁(yè)面跳轉(zhuǎn)地址
            // location.assign("http://www.lagou.com");
            
            
            // replace替換
            // 替換掉地址欄中當(dāng)前網(wǎng)址，不記錄歷史網(wǎng)址
            // location.replace("http://www.lagou.com");

            // reload重新加載
            // 類似于鍵盤 f5功能倔矾，類似于false效果妄均，ctrl+f5強(qiáng)制刷新，從服務(wù)器獲取頁(yè)面破讨，相當(dāng)于true
            // 參數(shù)：true強(qiáng)制從服務(wù)器獲取頁(yè)面丛晦，false從瀏覽器換粗又網(wǎng)頁(yè)的話，直接從緩存獲取
            location.reload(true);

        };

8.history對(duì)象

history 對(duì)象是 window 對(duì)象下的一個(gè)屬性烫沙，使用的時(shí)候可以省略 window 對(duì)象

9.url 對(duì)象

統(tǒng)一資源定位符 (Uniform Resource Locator, URL)

URL的組成：scheme://host:port/path?query#fragment

例如：http://www.lagou.com:80/a/b/index.html?name=zs&age=18#bottom

? scheme:通信協(xié)議，常用的http,ftp,maito等

? host:主機(jī)隙笆，服務(wù)器(計(jì)算機(jī))域名系統(tǒng) (DNS) 主機(jī)名或 IP 地址锌蓄。

? port:端口號(hào)，整數(shù)撑柔，可選瘸爽，省略時(shí)使用方案的默認(rèn)端口，如http的默認(rèn)端口為80铅忿。

? path:路徑剪决，由零或多個(gè)'/'符號(hào)隔開的字符串，一般用來(lái)表示主機(jī)上的一個(gè)目錄或文件地址檀训。

? query:查詢柑潦，可選，用于給動(dòng)態(tài)網(wǎng)頁(yè)傳遞參數(shù)峻凫，可有多個(gè)參數(shù)渗鬼，用'&'符號(hào)隔開，每個(gè)參數(shù)

的名和值用'='符號(hào)隔開荧琼。例如：name=zs

? fragment:信息片斷譬胎，字符串，錨點(diǎn).