重點來了 : BOM對象

window對象 :

所有瀏覽器都支持window對象.
概念上講 : 一個html文檔對應一個window對象.
功能上講 : 控制瀏覽器窗口的.
使用上講 : window對象不需要闖將對象,直接使用即可.

window對象方法 :
    > window.alter :     只做提醒用
    > window.confirm :     會返回一個框 布爾值    true或者false
    > window.prompt :      會返回你輸入的值.

    >open() : 打開一個新的瀏覽器窗口或查找一個已命名的窗口.
    >close() : 關閉瀏覽器窗口.

    >setInterval() : 按照指定的周期(以毫秒計)來調用函數或計算表達式.
    >clearInterval() : 取消由setInterval設置的timeout.
    >setTimeout() : 在指定的毫秒數後調用函數或計算表達式.
    >clearTimeout() : 取消由setTimeout設置的timeout.
    >scrollTo() : 把內容滾動到指定的坐標.
 

******DOM (JS中最核心的東西)

DOM : 定義了訪問(查找)和操作html文檔的標準方法.

DOM??樹的目的在於標簽導航.

HTML的每一個標簽都是一個節點對象(Node)

document 和 element 都是節點.

節點 : 
    1. 在節點數中,頂端節點被稱為根(root).
    2. 每個節點都有父節點,除了根.
    3. 一個節點可以擁有任意數量的子
    4. 同胞是擁有相同父節點的節點

***節點操作

####節點查找

//直接定位
var document.getElementById("idname")("d1"); //標簽對象
ele.getElementByClassName("name")("c1");  //數組對象,哪怕只要一個,它也是數組.
document.getElementsByTagName("tagname")("p")  //標簽名
ele.getElementsByName("name"); //就比如有些input裏面會定義一個name = "" )



導航查找 :    通過某個標簽定位某些標簽

previous : 上一個
next : 下一個
sibling : 兄弟姐妹

parentElement  //父節點標簽元素
children                // 所有子標簽

firstElementChild       // 第一個子標簽元素

lastElementChild        // 最後一個子標簽元素

nextElementtSibling     // 下一個兄弟標簽元素

previousElementSibling  // 上一個兄弟標簽元素


####節點操作
1 創建節點 : document.createElement("標簽名字")
2 添加節點 : ele_parent.appentChild(ele_child)
    如果是img標簽的話,用height和width後面直接加數字,不需要寫 引號和px
3 刪除節點 : ele_parent.removeChild(ele_child)
4 替換節點 : ele_parent.replaceChild(ele_child)
5. 節點屬性操作
    1.獲取文本節點的值 : innerText innerHTML
    2.attribute操作 :
            elementNode.setAttribute(name,value)
            elementNode.getAttribute(屬性名)
            elementNode.removeAttribute("屬性名");

    3.value獲取當前選中的value值
        1. input
        2. select (selectedIndex)
        3. textarea
    4.innerHTML給節點添加HTML代碼 : 
        該方法不是w3c的標準,但是主流瀏覽器支持.
        tag.innerHTML = "<p>要顯示的內容</p>";
    5.關於class的操作
        1.elementNode.className
        2.elementNode.classList.add : 添加
        3.elementNode.classlist.remove : 刪除

    6.改變css樣式
        <p id="p1">hello world</p>
        document.getElementById("p1").style.color="white";
        document.getElementById("p1").style.fontSize=36px;
 

DOM Event(事件)

事件類型 :

    onclick : 當用戶點擊某個對象時調用的事件句柄.
    ondblclick : 當用戶雙擊某個對象時調用的事件句柄.

    onfocus : 元素獲得焦點.--用於輸入框
    onblur : 元素失去焦點.--應用場景 : 用於表單驗證,當用戶離開某個輸入框時,代表已經輸入完了.
    onchange : 域的內容被改變.--應用場景 : 通常用於表單元素,當元素內容被改變時觸發.(多級聯動.)

    onkeydown : 某個鍵盤按鍵被按下.--應用場景 : 當用戶在最後一個輸入框按下回車鍵時,表單提交.
    onkeypress : 某個鍵盤按鍵被按下並松開.
    onkeyup : 某個鍵盤按鍵被松開.

    onload : 一張頁面或者一幅圖像完成加載.

    onmousedown : 鼠標按鈕被按下.
    onmousemove : 鼠標被移動.
    onmouseout : 鼠標從某元素移開.
    onmouseover : 鼠標移動到某個元素之上.
    onmouseleave : 鼠標從某個元素離開.

    onselect : 文本被選中.
    onsubmit : 確認按鈕被擊中. 
 

節點屬性 : 
    <div class="c1">div</div>
    1. 文本屬性 :

        var ele=document.getElementsByClassName(‘c1‘)[0];

        //賦值操作
        ele.innerText=‘egon‘

        ele.innerHTML=‘egon‘

        //取值操作
        console.log(ele.innerText);

        console.log(ele.innerHTML);  #既可以處理純文本,也可以處理標簽.

    ***
    2. class屬性 : ????????????????
        console.log(c1.className)   //當前標簽的名字,不常用
        c1.classList.add(‘c2‘);   //把c2的屬性也拿過來用了
        c1.classList.remove(‘c2‘); //把c2的屬性給remove掉了

    ***

事件介紹 :

1. onload

   onload屬性開發中,只給body元素加,這個屬性的觸發標誌著頁面內容被加載完成. ---應用場景 : 當有些事情我們希望頁面加載完立刻執行,那麽可以使用該事件屬性.

2. onsubmit

   當表單在提交時觸發,該屬性只能給form元素使用. ---引用場景 : 在表單提交前驗證用戶輸入是否正確,如果驗證失敗,則在該方法中阻止表單的提交.

3. 事件傳播 :

4. onselect :

5. onchange : 多級聯動

6. onkeydown :

   Event對象 : Event對象代表事件的狀態,比如事件在其中發生的元素,鍵盤按鍵的狀態,鼠標的位置,鼠標按鈕的狀態.

   事件通常與函數結合使用,函數不會在事件發生前被執行!Event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.比如onkeydown,我們想指定哪個鍵被按下了,需要問下Event對象的屬性,這裏就是KeyCode.

7. onmouseout與onmouseleave事件的區別.

前端基礎之JavaScript重點之DOM&BOM