DOM

DOM內(nèi)容主要分為四部分：

什么是DOM和節(jié)點(diǎn)；
獲取節(jié)點(diǎn)；
節(jié)點(diǎn)操作（3種）；
屬性操作（3種）。

什么是DOM和節(jié)點(diǎn)

DOM由節(jié)點(diǎn)組成；
DOM是樹狀模型；
DOM操作就是節(jié)點(diǎn)操作；
每一個HTML標(biāo)簽都是一個元素節(jié)點(diǎn)；
標(biāo)簽中的文字就是文字節(jié)點(diǎn)；
標(biāo)簽的屬性就是屬性節(jié)點(diǎn)。

獲取節(jié)點(diǎn)：

直接獲?。韩@取元素節(jié)點(diǎn)常用的方法主要有三種：通過id、標(biāo)簽名、類名：

通過id獲?。?code>document.getElementById("box");
返回一個標(biāo)簽，可以直接使用，獲得屬性值，設(shè)置屬性。
通過類名獲取標(biāo)簽數(shù)組：document.getElementsByClassName("a");
通過標(biāo)簽名獲取標(biāo)簽數(shù)組：document.getElementsByTagName("div");
獲得的標(biāo)簽數(shù)組是一個偽數(shù)組
通過標(biāo)簽名和類名獲取到的標(biāo)簽數(shù)組，一般都是遍歷之后再使用；特殊情況，數(shù)組中的值只有一個：

document.getElementsByTagName("div")[0];   //獲取數(shù)組中的元素
document.getElementsByClassName("a")[0];   //獲取數(shù)組中的元素

通過名字獲取(較少用)：document.getElementsByName();
通過tagNameNS獲取(較少用)：document.getElementsByTagNameNS();

<div id="box"></div>
<script>
    var div = document.getElementById("box");

    div.onclick = function () {
        alert(1);
    }
</script>

通過訪問關(guān)系獲??；

有三種訪問關(guān)系：父節(jié)點(diǎn)、兄弟節(jié)點(diǎn)和子節(jié)點(diǎn)；
節(jié)點(diǎn)的訪問關(guān)系是以屬性形式存在的；
父節(jié)點(diǎn)：調(diào)用者就是節(jié)點(diǎn)，一個節(jié)點(diǎn)只有一個父節(jié)點(diǎn)，調(diào)用方式:調(diào)用者.parentNode;；
兄弟節(jié)點(diǎn)：sibling
nextSibling：IE678中指下一個元素節(jié)點(diǎn)(標(biāo)簽)；在火狐谷歌IE9+以后都是指下一個節(jié)點(diǎn)(包括空文檔和換行節(jié)點(diǎn))；
nextElementSibling：在火狐谷歌IE9+都指的是下一個元素節(jié)點(diǎn)。
總結(jié)：在IE678中用nextSibling，在火狐谷歌IE9+以后用nextElementSibling：下一個兄弟節(jié)點(diǎn)=節(jié)點(diǎn).nextElementSibling || 節(jié)點(diǎn).nextSibling;。
獲取前一個兄弟節(jié)點(diǎn)：前一個兄弟節(jié)點(diǎn)=節(jié)點(diǎn).previousElementSibling || 節(jié)點(diǎn).previousSibling;。
單個子節(jié)點(diǎn)：
第一個子節(jié)點(diǎn)=父節(jié)點(diǎn).firstElementChild || 父節(jié)點(diǎn).firstChild;；
最后一個子節(jié)點(diǎn) = 父節(jié)點(diǎn).lastElementChild || 父節(jié)點(diǎn).lastChild;;
所有子節(jié)點(diǎn)：
childNodes：它返回指定元素的子元素集合，包括HTML節(jié)點(diǎn)、所有屬性、文本節(jié)點(diǎn)（W3C親兒子，標(biāo)準(zhǔn)屬性），子節(jié)點(diǎn)數(shù)組=父節(jié)點(diǎn).childNodes; 獲取所有節(jié)點(diǎn)：

nodeType == 1，表示的是元素節(jié)點(diǎn)`記住`，元素就是標(biāo)簽
nodeTyoe == 2，表示的是屬性節(jié)點(diǎn)，了解
nodeType == 3，表示的是文本節(jié)點(diǎn)，了解

children：非標(biāo)準(zhǔn)屬性，它返回的是指定元素的子元素的集合，只返回HTML節(jié)點(diǎn)，甚至不返回文本節(jié)點(diǎn)，雖然不是標(biāo)準(zhǔn)的DOM屬性，但是它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支持。子節(jié)點(diǎn)數(shù)組=父節(jié)點(diǎn).children; //用的最多，在IE678中，包含注釋節(jié)點(diǎn)，所以在IE678中，不要將注釋節(jié)點(diǎn)寫在里面。
nodeType、nodeName、nodeValue(了解)

<div id="yijiang" class="jiangjiang" value="jiang">義江</div>
<script>
        var ele = document.getElementById("yijiang");
        var attr1 = ele.getAttributeNode("id");
        var attr2 = ele.getAttributeNode("value");
        var text = ele.firstChild;

        console.log(ele);       //<div id="yijiang" class="jiangjiang" value="jiang">義江</div>
        console.log(attr1);     //id="yijiang"
        console.log(attr2);     //value="jiang"
        console.log(text);      //"義江"

        console.log(ele.nodeType);      //1
        console.log(attr1.nodeType);    //2
        console.log(attr2.nodeType);    //2
        console.log(text.nodeType);     //3

        console.log(ele.nodeValue);      //null
        console.log(attr1.nodeValue);    //yijiang
        console.log(attr2.nodeValue);    //jiang
        console.log(text.nodeValue);     //義江
</script>

補(bǔ)充：
通過這兩個屬性parentNode和children，可以獲取到任意元素節(jié)點(diǎn)：節(jié)點(diǎn).parentNode.children[index];:

function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for(var i =0;i<p.length;i++) {
            if(p[i] !== elm) a.push(p[i]);
        }
        return a;
}

節(jié)點(diǎn)操作（3種）`重要`：節(jié)點(diǎn)的訪問關(guān)系都是屬性，而節(jié)點(diǎn)的操作都是函數(shù)或者方法。

節(jié)點(diǎn)的創(chuàng)建：
- 新的標(biāo)簽(節(jié)點(diǎn))=document.createElement("標(biāo)簽名");
添加(插入)節(jié)點(diǎn)：
- 使用方法：父節(jié)點(diǎn).appendChild(新節(jié)點(diǎn));，父節(jié)點(diǎn)的最后插入一個新節(jié)點(diǎn)；
- 使用方法：父節(jié)點(diǎn).insertBefore(要插入的節(jié)點(diǎn)，參考節(jié)點(diǎn));，在參考節(jié)點(diǎn)之前插入，如果參考節(jié)點(diǎn)為null，那么他將在節(jié)點(diǎn)最后插入一個節(jié)點(diǎn)。
刪除：
- 使用方法：用父節(jié)點(diǎn)刪除子節(jié)點(diǎn)父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))：必須指定要刪除的子節(jié)點(diǎn)；
- 使用方法：節(jié)點(diǎn)自己刪除自己(自殺)node.parentNode.removeChild(node);，不知道父節(jié)點(diǎn)的情況下，可以這樣使用。
復(fù)制節(jié)點(diǎn)：
- 新節(jié)點(diǎn)=要復(fù)制的節(jié)點(diǎn).cloneNode(參數(shù));，接受一個Boolean類型參數(shù)，true表示深復(fù)制(復(fù)制節(jié)點(diǎn)及其所有子節(jié)點(diǎn))，false表示淺復(fù)制(值復(fù)制節(jié)點(diǎn)本身，不復(fù)制子節(jié)點(diǎn))。

屬性操作（3種）：

獲取：
- 節(jié)點(diǎn).屬性或者節(jié)點(diǎn)[屬性]；
- 節(jié)點(diǎn).getAttribute("屬性")
設(shè)置：節(jié)點(diǎn).setAttribute(屬性，值)
刪除：節(jié)點(diǎn).removeAttribute(屬性);
注：
- IE6、7不支持;
- 元素節(jié)點(diǎn).屬性(元素節(jié)點(diǎn)[屬性])：資料上說該方法綁定的屬性值不會出現(xiàn)在標(biāo)簽上，但是經(jīng)測試通過這種方法綁定的屬性如果是標(biāo)簽原本就有的也會出現(xiàn)在標(biāo)簽上，如果是用戶自定義的屬性就不會出現(xiàn)在標(biāo)簽上；
- get/set/removeAttribute：綁定的屬性值會出現(xiàn)在標(biāo)簽上，推薦使用；
- 兩種方式不能相互訪問：賦值和獲取值必須使用同一種方法。
練習(xí)：
- 切換圖片（a連接+圖片）；
  - 如果<a href="www.baidu.com">跳轉(zhuǎn)</a>，點(diǎn)擊a，頁面會進(jìn)行相應(yīng)跳轉(zhuǎn)，在onclick綁定的函數(shù)最后加return false;或者如果是行內(nèi)綁定就在onclick最后加return false;就可阻止相應(yīng)的跳轉(zhuǎn)。
- 顯示和隱藏盒子；
  - 顯示隱藏盒子的同時修改按鈕的文字，使用innerHTML進(jìn)行按鈕文字的修改。
- 美女相冊

//2.綁定事件（利用for循環(huán)綁定事件）
for(var aIndex in aArr){
        aArr[aIndex].onclick = function () {
            show.src = this.href;
    //warning       des.innerHTML = aArr[aIndex].title;
            des.innerHTML = this.title;
            return false;
        }
}

- 注：綁定描述時，只能通過this獲取title，不能通過aArr[aIndex]獲取，因?yàn)榻壎ㄊ录r候，并沒有立刻執(zhí)行事件，當(dāng)用戶點(diǎn)擊時已經(jīng)無法通過Arr[aIndex]獲取對應(yīng)標(biāo)簽。

排它思想

通常和for循環(huán)連用，先干掉所有人，然后再單獨(dú)處理某一個特殊人。
練習(xí)：
- tab切換；

綁定事件：三種方法

通過匿名函數(shù)綁定；
通過函數(shù)名綁定(不能加小括號，否則就是綁定返回值了)；
行內(nèi)綁定:<div class="content" onclick="fn()">，一定要加小括號，否則就是字符串了。(經(jīng)測試發(fā)現(xiàn)，行內(nèi)綁定的方法不能寫在window.onload里面，元素加載時找不到方法)

onload事件

頁面加載完畢（包括文本和圖像）時候調(diào)用這個事件:window.onload；
主要用途：
- js的加載是和html的加載同步進(jìn)行的。如果使用元素在定義元素之前，容易報錯;
- 整個頁面上的所有元素加載完畢時再執(zhí)行js內(nèi)容；
- window.onload:可以預(yù)防使用標(biāo)簽在定義標(biāo)簽之前。
補(bǔ)充：
- value:標(biāo)簽的value屬性；
- innerHTML：獲取雙閉合標(biāo)簽里面的內(nèi)容。（識別標(biāo)簽）
- innerText：獲取雙閉合標(biāo)簽里面的內(nèi)容。（不識別標(biāo)簽）
- 老版本的火狐不支持innerText，支持textContent。

DOM對象的屬性

表單元素的屬性
- type
- value
- checked
- selected
- disabled
DOM對象的屬性練習(xí)：
- 顯示隱藏二維碼；
  - 可以替換字符串(了解)：div.class.replace("old","new");;

erweima_s.onmouseover = function () {
        erweima_b.className = "erweima-big show";
    };
erweima_s.onmouseout = function () {
        erweima_b.className = erweima_b.className.replace("show","hide");
    };

點(diǎn)擊按鈕禁用/解禁文本框；
- inp.removeAttribute("disabled");。

<body>
    <hr>禁用/解禁文本框 <br>
    賬  號：<input value="yijiangwnag" class="account"><button>禁用</button><button>解禁</button>
    <script>
        window.onload = function () {
            var account = document.getElementsByClassName("account")[0];
            var ban = document.getElementsByTagName("button")[0];
            var banCancel = document.getElementsByTagName("button")[1];
            ban.onclick = function () {
//                account.setAttribute("disabled",true);
                account["disabled"] = true;
            };
            banCancel.onclick = function () {
//                account.removeAttribute("disabled");
                account["disabled"] = false;
            };
        }
    </script>
</body>

輸入事件與事件焦點(diǎn)onfocus【淘寶、京東輸入框】(獲取焦點(diǎn)：onfocus，失去焦點(diǎn)：onblur)；
- 京東的input輸入框獲取到焦點(diǎn)時刪除內(nèi)容，失去焦點(diǎn)時顯示內(nèi)容；
- 淘寶的input輸入框在獲取到焦點(diǎn)時沒有變化，輸入內(nèi)容之后文字消失，當(dāng)刪除內(nèi)容之后文字恢復(fù)出現(xiàn)：oninput事件:刪除/輸入內(nèi)容時候調(diào)用，進(jìn)入頁面時候直接獲取光標(biāo)焦點(diǎn)：inp.focus();

<body>
        京東：<input id="jd" value="我是京東"><br>
        淘寶：<input id="tb"><label class="tbLabel">我是淘寶</label><br>
        placeholder：<input placeholder="我是placeholder">
    <script>
        //京東/淘寶輸入框
        var jd = document.getElementById("jd");
        var tb = document.getElementById("tb");
        var tbL = document.getElementsByClassName("tbLabel")[0];
        jd.onfocus = function () {
            if (jd.value == "我是京東"){
                jd.value = "";
            }
        };
        jd.onblur = function () {
            if (jd.value == ""){
                jd.value = "我是京東";
            }
        };
        tb.oninput = function () {
            if (tb.value == ""){    //但是淘寶連續(xù)輸空格label不消失的bug日后解決
                tbL.className = "tbLabel show";
            }else {
                tbL.className = "tbLabel hide";
            }
        };
    </script>
</body>

檢測用戶名、密碼是否是6~12位，如果不滿足要求高亮顯示文本框；
- html中的input標(biāo)簽行內(nèi)調(diào)用function的時候，是通過window去調(diào)用function的；
- 標(biāo)簽之后在函數(shù)參數(shù)里傳遞的this才是指的標(biāo)簽本身。只做了解，平時使用時盡量不要在行內(nèi)式中調(diào)用函數(shù);
- html中的input標(biāo)簽行內(nèi)調(diào)用function的時候，function定義不能寫在window.onload里面，標(biāo)簽加載時會找不到。

<body>
    賬號：<input id="checkAcc" onblur="fn(this)"> <br>
    密碼：<input id="checkSec" onblur="fn(this)">
    <script>
    //要求用戶名3~6位，密碼在6~8位，如果不正確就高亮顯示（顯示紅色）
    function fn(aaa) {
        console.log(this);
        if (aaa.value.length > 12 || aaa.value.length < 6){
            aaa.className = "wrong";
        }else {
            aaa.className = "right";
        }
    }
    </script>
</body>

設(shè)置下拉框中的選中項(xiàng)（水果名稱）；
- 點(diǎn)擊按鈕，把下拉框中的鱷魚對應(yīng)的選擇屬性設(shè)置selected，直接添加selected屬性即可，或者個selected屬性賦任何值都可以；
- 補(bǔ)充：如果打印sel.value，就會打印被選中項(xiàng)的索引；
- 如果要去掉選中，可以將對應(yīng)的selected屬性值設(shè)為false，但是有些瀏覽器不支持，最好是remove該屬性。

    <body>
    <button id="selectFish">水產(chǎn)品</button><button id="rid">去除</button>
    <br>
    <select>
        <option id="banana">香蕉</option>
        <option>茄子</option>
        <option id="fish" >鱷魚</option>
        <option>西瓜</option>
    </select>
    <script>
        //挑選出下拉列表中的某一項(xiàng)
        var selBtn = document.getElementById("selectFish");
        var ridBtn = document.getElementById("rid");
        var eyu = document.getElementById("fish");
        var banana = document.getElementById("banana");
        selBtn.onclick = function () {
            eyu.selected = true;
        };
        ridBtn.onclick = function () {
            eyu.selected = false;
            banana.selected = true;
        };
    </script>
    </body>

給文本框賦值，獲取文本框的值；

<body>
    <input type="text"> <br>
    <input type="text"> <br>
    <input type="text"> <br>
    <input type="text"> <br>
    <input type="text"> <br>
    <button>賦值</button>
    <button>取值</button>
<script>
    var inpArr = document.getElementsByTagName("input");
    var btnArr = document.getElementsByTagName("button");
    //賦值
    btnArr[0].onclick = function () {
        for(var i=0; i<inpArr.length; i++){
            inpArr[i].value = i;
        }
    };
    //取值
    btnArr[1].onclick = function () {
        var valueArr = [];
        for(var i=0; i<inpArr.length; i++){
            valueArr.push(inpArr[i].value);
        }
        console.log(valueArr.join(" "));
    };
</script>
</body>

全選反選；
隔行變色(使用childNodes實(shí)現(xiàn))。

DOM的樣式設(shè)置(兩種方式)

className

style

獲取樣式
- DOM的style屬性只能獲取標(biāo)簽中使用style設(shè)置的樣式，無法獲取嵌入或外部樣式；
- style.cssText獲取style里面的字符串；
設(shè)置樣式
- 無論設(shè)置還是獲取只能操作行內(nèi)式。
style屬性設(shè)置和獲取(style是一個對象，不能獲取內(nèi)嵌和外鏈)
- 樣式少的時候使用；
- style是對象；
- 值是字符串，沒有設(shè)置時是"";
- 命名規(guī)則，駝峰命名，和css不一樣；
- 設(shè)置了類樣式不能獲取(只和行內(nèi)式交互，和內(nèi)嵌式和外鏈無關(guān))；
- box.style.cssText = "字符串形式的樣式"。
style常用屬性
- backgroundColor；
- backgroundImage；
- color；
- width；
- height；
- border；
- opacity(IE8以前filter：alpha(opacity=xx))；
- 注意DOM對象style屬性和標(biāo)簽中style內(nèi)的值不一樣，因?yàn)樵贘S中-不能作為標(biāo)識符；
  - backgroundColor -> DOM中；
  - background-color -> CSS中。
位置：
- position；
- left；
- top；
- right；
- bottom；
- z-index。
練習(xí)：
- 給變div的大小和透明度；
- 當(dāng)前輸入的文本框高亮顯示；
- 高級隔行變色、高亮顯示；
- 百度皮膚；
  - 獲取body：

var body = document.getElementsByTagName("body");
//或者
var body = document.body;   //document內(nèi)置了直接獲取body的方法

顯示隱藏/關(guān)閉廣告/顯示二維碼（隱藏方法）；
- display（用的較多，可以占位置）：元素隱藏之后，不占位置，頁面上的元素會重新排列；
- visibility：元素隱藏之后占位置（hidden、visible）；
- opacity（用的較多，控制器來方便）；
- position。
提高層級。

封裝

練習(xí)
- 菜單練習(xí)

動態(tài)創(chuàng)建元素(操作元素)三種方式

方式一：document.wtrite()，document.write()能夠識別標(biāo)簽;，不常用，因?yàn)槿菀赘采w之前的標(biāo)簽；
方式二：innerHTML，直接寫會覆蓋之前的，一般這樣使用div.innerHTML += "<li>xxx</li>;"，用的比較多，綁定屬性和內(nèi)容比較方便；
方式三：利用DOM的API創(chuàng)建，document.createElement("li")，用的也比較多，指定數(shù)量的時候一般用這種方法。
操作元素：
- 父元素.appendChild(子元素);：在父元素的最后面添加子元素;
- 父元素.insertBefore(newEle,aaa);：在指定位置添加;
- 父元素.removeChild(子元素);
- 父元素.replaceChild(newEle,oldEle);，用的較少；
- 需要克隆的節(jié)點(diǎn).cloneNode(true);，參數(shù)為true時，是深拷貝，一般都是用深拷貝。
練習(xí)：
- 動態(tài)創(chuàng)建列表，高亮顯示（四大美女）；
- 祝愿墻；
- 左右切換城市或者水果；
  - div.onclick = function(){//code};，如果函數(shù)不帶參數(shù)，我們可以直接綁定一個函數(shù)名；但是如果函數(shù)帶參數(shù)，我們需要在匿名函數(shù)中去調(diào)用這個帶參數(shù)的函數(shù)。
- 動態(tài)創(chuàng)建祝愿墻；
- 在線會員列表；
- 模擬百度搜索文本框；
  - a.indexOf(b);返回b在a中的位置，如果`b="ccc;"，那么返回a中ccc的第一個c的位置，如果a中沒有ccc，那么就返回-1；

動態(tài)創(chuàng)建表格（了解）

方式一：createElement();；
方式二：
rows （只讀，table和textarea能用）；
insertRow() （只有table能用）；指定索引值之前插入
deleteRow() （只有table能用）；
cells （只讀，table和textarea能用）；
insertCell() (只有tr能調(diào)用)
deleteCell() (只有tr能調(diào)用)

內(nèi)置對象

內(nèi)置對象就是指這個語言自帶的一些對象，供開發(fā)者使用，這些對象提供了一些常用的或者最基本而又必要的功能。

對象名稱	對象說明
Arguments	函數(shù)實(shí)參集合
Array	數(shù)組
Boolean	布爾對象
Date	日期時間對象
Error	異常對象
Function	函數(shù)構(gòu)造器
Math	數(shù)學(xué)對象
Number	數(shù)值對象
Object	基礎(chǔ)對象
RegExp	正則表達(dá)式對象
String	字符串對象

Date

日期對象四種聲明/定義方式
- 直接定義：var date1 = new Date();獲取當(dāng)前時間；
- 設(shè)定指定時間（兼容最強(qiáng)）：var date2 = new Date("2017/1/1 20:12:12");；
- 不常用：var date3 = new Date("Wed Jan 27 2016 12:00:00 GMT+0800(中國標(biāo)準(zhǔn)時間)");
- var date4 = new Date(2016,1,27);
- 后兩種兼容性不好，不建議使用。
Date對象的方法：
- getDate() //獲取日：1-31；
- getDay() //獲取星期：0-6（0代表周日）
- getMonth() //獲取月：0-11（1月從0開始）
- getFullYear() //獲取完整年份（瀏覽器都支持）
- getHours() //獲取小時：0-23
- getMinutes() //獲取分鐘：0-59
- getSeconds() //獲取秒：0-59
- getMilliseconds() //獲取毫秒
- getTime() //返回累計(jì)毫秒數(shù)（從1970/1/1午夜）
返回距離1970/1/1毫秒數(shù)
- var date = Date.now();
- var date = +new Date();
- var date = new Date().getTime();
- var date = new Date().valueOf();
- 返回1970/1/1午夜與當(dāng)前日期和時間之間的毫秒數(shù)。
案例：
- 日歷：顯示當(dāng)前年月日和星期
- 倒計(jì)時：蘋果發(fā)布會：倒計(jì)時包括天時分秒；
  - 當(dāng)任一階段的時間小于10時，要在前面補(bǔ)0，否則會有閃動；
  - 解決方案：hour = hour<10?"0"+hour:hour;

String（Boolean/Number）

給索引查字符（charAt/charCodeAt）
1. charAt，獲取相應(yīng)位置字符（參數(shù)：字符位置）
  - 字符串中第一個字符的下標(biāo)是0。如果參數(shù)index不在0與string.length之間，該方法將返回一個空字符串；
2. charCodeAt，獲取相應(yīng)位置字符編碼（參數(shù)：字符位置）
  - charAt()方法和charCodeAt()方法用于選取字符串中某一位置上的單個字符；
  - 區(qū)別：charCodeAt()方法，它并不返回指定位置上的字符本身，而是返回該字符在Unicode字符集中的編碼值。如果該位置沒有字符，返回值為NaN。

字符/字符編碼 = Str.charAt/charCodeAt(索引值);

簡單數(shù)據(jù)類型也有屬性，因?yàn)榈讓訒M(jìn)行數(shù)據(jù)類型轉(zhuǎn)換，但是簡單數(shù)據(jù)類型``不能綁定``屬性和方法。
給字符查索引（indexOf/lastIndexOf）
- indexOf，從前向后索引字符串的位置（參數(shù)：索引字符串）；
  - 從前向后尋找并返回第一個符合元素的位置。
- lastIndexOf，從后向前索引字符串的位置（參數(shù)：索引字符串）；
  - 從后向前尋找并返回第一個找到的符合元素的位置。
- 練習(xí)：求一個字符串占多少字符位。（一個漢字占兩個字符位，英文的所有字符在0-127之間）。長度只看字符個數(shù)，不分中英文。
url編碼和解碼（了解）
- uri（uniform resource identifiers），通過資源標(biāo)識符進(jìn)行編碼，以便發(fā)送給瀏覽器。有效的uri中不能包含某些字符，例如空格。而這uri編碼方法就可以對uri編碼，它們用特殊的utf-8編碼替換所有無效的字符，從而讓瀏覽器能夠接受和理解；
- encodeURIComponent()函數(shù)可以把字符串作為URI組件進(jìn)行編碼；
- decodeURIComponent()函數(shù)可以把字符串作為URI組件進(jìn)行解碼。
字符串的連接：

新字符串 = str1.concat(str2);

字符串的截取
- slice(參數(shù)1,參數(shù)2);，截取字符串，參數(shù)1代表截取的起始位置，參數(shù)2代表終點(diǎn)位置，兩個參數(shù)都是索引值。
  - (2,5)：正常包左不包右；
  - (2)：從指定的索引位置截取到最后；
  - (-3)：從倒數(shù)第幾個截到最后；
  - (5,2)：前面的數(shù)大于后面的數(shù)，返回空。
- substr(參數(shù)1,參數(shù)2)，截取字符串，參數(shù)1是截取起始位置，參數(shù)2是截取的長度，參數(shù)1是索引值，參數(shù)2是數(shù)值。
  - (2,4)：從索引值為2的位置開始，截取4個字符；
  - (1)：一個值，從指定位置截取到最后；
  - (-3)：從倒數(shù)第幾個截取到最后；
  - 不包括前大后小的情況。
- substring(參數(shù)1,參數(shù)2)同slice
  - 不同點(diǎn)：參數(shù)能智能調(diào)換位置；
  - 參數(shù)為負(fù)值時，將獲取全部字符串。
  - (2,5)，正常包左不包右；
  - (2)，從指定的索引位置截到最后；
  - (-3)，截取全部字符；
  - (5,2)，前面大后面小會智能調(diào)換位置(2,5)；
  - 兩個參數(shù)都是索引。

特殊方法簡介
- trim() //只能去除字符串前后的空格，中間的去不了；
- replace(參數(shù)1,參數(shù)2) //替換，將字符串中的參數(shù)1(假定為"aaa")替換成參數(shù)2，從前往后查找"aaa"，只能替換一次；如果要全部替換就將"aaa"改為/aaa/g；現(xiàn)在只能替換全部是小寫的"aaa"，如果要不區(qū)分大小寫，就寫成/aaa/gi：str.replace(/aaa/gi,"bbb");
- split("&") //字符串變數(shù)組：如果沒有參數(shù)，將把整個字符串作為一個元素添加到數(shù)組中；如果參數(shù)是空字符串""，將會把字符串的每一個字符當(dāng)成一個元素添加到數(shù)組中；如果參數(shù)是指定分隔符"&"，將會把字符串用&分割成元素然后分別添加到數(shù)組中。
- 大小寫轉(zhuǎn)換：
  - to(Locale)UpperCase() //全部轉(zhuǎn)換成大寫；
  - to(Locale)LowerCase() //全部轉(zhuǎn)換成小寫。
基本包裝類型：
- 為了方便操作基本數(shù)據(jù)類型，JavaScript還提供了三個特殊的引用類型：String/Number/Boolean;
- 例如：

var s1 = "zhangsan";
var s2 = s1.substring(5);

解析：s1是基本數(shù)據(jù)類型，基本數(shù)據(jù)類型是沒有屬性和方法的；當(dāng)調(diào)用s1.substring(5)時，先把s1包裝成String類型的臨時對象，再調(diào)用substring方法，最后銷毀臨時對象；實(shí)現(xiàn)過程如下：

var s1 = "zhangsan";
//當(dāng)調(diào)用s1.substring(5)時，具體過程解析如下：
var s1Temp = new String(s1);
var s2 = s1Ttemp.substring(5);
s1Temp = null;

字符串練習(xí)
- 截取字符串“我愛你中國，我親愛的母親”中的“中國，我親愛”；
- "abcoefoxyozzopp"查找字符串中所有"o"出現(xiàn)的位置；
- 把字符串中所有的"o"替換成"!"；
- 判斷一個字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個次數(shù)。
- 給定一個字符串："abaasdffggghhjjkkgfddsssss3444343"問題如下：
  - 字符串的長度；
  - 取出指定位置的字符，如：0、3、5、9等；
  - 查找指定字符是否在以上字符串中存在，如i、c、b等；
  - 替換指定的字符，如g換成22，ss替換成b等操作方法；
  - 截取指定開始位置到結(jié)束位置的字符串，如取得1-5的字符串；
  - 找出以上字符串中出現(xiàn)次數(shù)最多的字符和出現(xiàn)的次數(shù)。
獲取節(jié)點(diǎn)元素的封裝（重點(diǎn)）

HTML方法（了解）

anchor(); //創(chuàng)建a鏈接
big();
sub();
sup();
link();
bold();
str.link(); //返回值是字符串

Math

Math.abs();：取絕對值；
Math.floor();：向下取整；
Math.ceil();：向上取整；
Math.round();：四舍五入取整；
Math.random();：獲得0~1之間的隨機(jī)數(shù)。

addEventListenner(事件監(jiān)聽器,原事件被執(zhí)行的時候，后面綁定的事件照樣會被執(zhí)行，不會發(fā)生層疊現(xiàn)象，更適合團(tuán)隊(duì)開發(fā)。如果同一個按鈕綁定多個onclick事件，后面的會層疊前面的，只會執(zhí)行最后一個onclick綁定事件。)

使用方法
- btn.addEventListener("click",fn);;
- 調(diào)用者是事件源，參數(shù)1是事件名（不帶on不帶小括號），參數(shù)2是執(zhí)行的函數(shù)，參數(shù)3是捕獲或者冒泡(以后再講)。
實(shí)現(xiàn)原理（事件監(jiān)聽原理）（了解，自己封裝一個）
- 不能直接執(zhí)行函數(shù)，要先進(jìn)行判斷；
- 如果以前綁定過事件，那么把以前的事件執(zhí)行完畢再執(zhí)行現(xiàn)在的函數(shù)；
- 如果沒有被定義過事件，該事件源的該事件對應(yīng)的屬性應(yīng)該是null，對應(yīng)的Boolean值應(yīng)該為false；如果已經(jīng)定義過該事件源的該事件，該事件源的該事件屬性應(yīng)該是function本身，對應(yīng)的Boolean值類型為true；
- 可以通過綁定屬性的方式綁定方法，可以通過獲取屬性的方式來獲取方法；

<body>
    <button>按鈕一</button>
    <button>按鈕二</button>

    <script>
        var btn1 = document.getElementsByTagName("button")[0];
        var btn2 = document.getElementsByTagName("button")[1];

        btn1.onclick = function () {
            console.log("我是王老大");
        };

        fn("click",fn1,btn1);
        fn("click",fn2,btn1);
        fn("click",fn3,btn1);
        fn("mouseover",fn2,btn2);

        function fn1() {
            console.log("黃河入海流；關(guān)公耍大刀");
        }
        function fn2() {
            console.log("我自橫刀向天笑，去留肝膽兩昆侖");
        }
        function fn3() {
            console.log("床前明月光，一片白茫茫");
        }

        function fn(str, func, ele) {
            var oldFunc = ele["on"+str];
            ele["on"+str] = function () {
                if (oldFunc){
                    oldFunc();
                }
                func();
            }
        }
    </script>
</body>

兼容性（addEventListener和attachEvent）
- 事件名稱的區(qū)別：
  - addEventListener中第一個參數(shù)type是click、load，不帶on；ele.addEventListener("click",fn);

var btn3 = document.getElementsByTagName("button")[2];
btn3.addEventListener("click",fn33);
function fn33() {
        console.log("你點(diǎn)了addEventListener");
}

attachEvent中第一個參數(shù)type是onclick、onload。ele.attachEvent("onclick",fn);

var btn4 = document.getElementsByTagName("button")[3];
btn4.attachEvent("onmouseover",fn44);
function fn44() {
        console.log("你碰到attachEvent了");
}

this的區(qū)別：
- addEventListener：事件處理程序會在當(dāng)前對象的作用于運(yùn)行，因此，事件處理程序的this就是當(dāng)前對象；
- attachEvent：事件處理程序是在全局作用域下運(yùn)行，因此this就是window。
兼容性：
- addEventListener支持火狐、谷歌、IE9+；
- attachEvent兼容IE678。
解決方案：
- 通過判斷調(diào)用的方式來兼容IE678；
- 判斷瀏覽器是否支持該方法，如果支持就直接調(diào)用，如果不支持就用其它方法。

//兼容性寫法，定義一個對象EventListen
        EventListen = {
            addEvent: function (ele,fn,str) {
                if (ele.addEventListener){
                    ele.addEventListener(str,fn);
                }else if (ele.attachEvent){
                    ele.attachEvent("on"+str,fn);
                }else{
                    ele["on"+str] = function () {
                        console.log("都不能綁定");
                    }
                }
            }
        };

        EventListen.addEvent(btn4,fn44,"mouseover");

移除事件（解決綁定）
- btn.onclick = null;
- 谷歌、火狐、IE9+：btn.removeEventListener("click",fn)，只能移除通過addEventListener方法添加的事件;
- IE678：btn.detachEvent("onclick",fn),只能解綁通過attachEvent方法綁定的事件；

EventListen = {
        deleteEvent:function (ele,fn,str) {
            if (ele.removeEventListener){
                ele.removeEventListener(str, fn);
            }else if (ele.detachEvent){
                ele.detach("on"+str,fn);
            }else {
                ele["on"+str] = null;
            }
        }
};
EventListen.deleteEvent(btn4,fn,"click");

封裝

//封裝
EventListen = {
    addEvent: function (ele,fn,str) {
        if (ele.addEventListener){
            ele.addEventListener(str,fn);
        }else if (ele.attachEvent){
            ele.attachEvent("on"+str,fn);
        }else{
            ele["on"+str] = function () {
                console.log("都不能綁定");
            }
        }
    },

    deleteEvent:function (ele,fn,str) {
        if (ele.removeEventListener){
            ele.removeEventListener(str, fn);
        }else if (ele.detachEvent){
            ele.detach("on"+str,fn);
        }else {
            ele["on"+str] = null;
        }
    }
};
var btn = document.getElementsByTagName("button")[4];
EventListen.addEvent(btn,fn1,"click");
EventListen.deleteEvent(btn,fn1,"click");

事件（`DOM重點(diǎn)`）

什么是事件

JavaScript是事件驅(qū)動的；
什么是事件
- 觸發(fā)-響應(yīng)；
- 事件的概念：
  - 事件源：觸發(fā)事件的對象；
  - 事件名稱：click、mouseover等；
  - 事件處理程序：onclick、onmouseover等。

注冊事件的兩種方式

onclick：
- DOM0;
- 幾乎所有的瀏覽器都支持；
addEventListener
- DOM2；
- 現(xiàn)代瀏覽器支持，IE9+；
- 可以給同一個事件注冊多個事件處理程序；
- 可以選擇捕獲或者冒泡；
- IE9以前使用atachEvent。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

05-DOM相關(guān)知識點(diǎn)講解

05-DOM相關(guān)知識點(diǎn)講解

DOM

DOM內(nèi)容主要分為四部分：

什么是DOM和節(jié)點(diǎn)

獲取節(jié)點(diǎn)：

直接獲?。韩@取元素節(jié)點(diǎn)常用的方法主要有三種：通過id、標(biāo)簽名、類名：

通過訪問關(guān)系獲??；

節(jié)點(diǎn)操作（3種）`重要`：節(jié)點(diǎn)的訪問關(guān)系都是屬性，而節(jié)點(diǎn)的操作都是函數(shù)或者方法。

屬性操作（3種）：

排它思想

綁定事件：三種方法

onload事件

DOM對象的屬性

DOM的樣式設(shè)置(兩種方式)

className

style

封裝

動態(tài)創(chuàng)建元素(操作元素)三種方式

動態(tài)創(chuàng)建表格（了解）

內(nèi)置對象

Date

String（Boolean/Number）

HTML方法（了解）

Math

事件（`DOM重點(diǎn)`）

什么是事件

注冊事件的兩種方式

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

05-DOM相關(guān)知識點(diǎn)講解

DOM

DOM內(nèi)容主要分為四部分：

什么是DOM和節(jié)點(diǎn)

獲取節(jié)點(diǎn)：

直接獲?。韩@取元素節(jié)點(diǎn)常用的方法主要有三種：通過id、標(biāo)簽名、類名：

通過訪問關(guān)系獲??；

節(jié)點(diǎn)操作（3種）重要：節(jié)點(diǎn)的訪問關(guān)系都是屬性，而節(jié)點(diǎn)的操作都是函數(shù)或者方法。

屬性操作（3種）：

排它思想

綁定事件：三種方法

onload事件

DOM對象的屬性

DOM的樣式設(shè)置(兩種方式)

className

style

封裝

動態(tài)創(chuàng)建元素(操作元素)三種方式

動態(tài)創(chuàng)建表格（了解）

內(nèi)置對象

Date

String（Boolean/Number）

HTML方法（了解）

Math

事件（DOM重點(diǎn)）

什么是事件

注冊事件的兩種方式

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

直接獲?。韩@取元素節(jié)點(diǎn)常用的方法主要有三種：通過id、標(biāo)簽名、類名：

通過訪問關(guān)系獲??；

節(jié)點(diǎn)操作（3種）`重要`：節(jié)點(diǎn)的訪問關(guān)系都是屬性，而節(jié)點(diǎn)的操作都是函數(shù)或者方法。

事件（`DOM重點(diǎn)`）