JavaScript 筆記本

HTML CSS JS 介紹

• HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
• CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或爲標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之爲表現。
• JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有交互的一般都是用JavaScript來實現的。

基本api

• document.write() 可用於直接向 HTML 輸出流寫內容。簡單的說就是直接在網頁中輸出內容。
• alert(str) 彈出提示框
• confirm(str) 彈出確認框
• prompt(str1,str2) 彈出對話框
• window.open([URL], [窗口名稱], [參數字符串])
• window.close(); //關閉本窗口

DOM

• DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹）。

  • 元素節點: html、body、p等都是元素節點，即標籤
  • 文本節點: 向用戶展示的內容
  • 屬性節點: 元素屬性

• 常用api

  • document.getElementById(“id”) 獲取標籤
  • innerHTML 屬性用於獲取或替換 HTML 元素的內容。

  • Object.style.property=new style; 改變 HTML 元素的樣式

       var mychar = document.getElementById("mId");
       mychar.style.color="red";
    

  • Object.style.display = value 元素顯示或隱藏

    mychar.style.display="none";
    mychar.style.display="block";
    

  • object.className = classname 屬性設置或返回元素的class 屬性

觸發事件

• onclick ；
• onmouseover；onmouseout;
• onchange;
• onselect;
• onfocus; onblur;
• onload;onunload

內置對象

• Date();
• String 字符串對象
  
  • length
  • charAt(index)
• Math對象
• Array 數組對象

瀏覽器對象

• window對象指當前的瀏覽器窗口。

  • setInterval(代碼,交互時間);
  • setTimeout(代碼,延遲時間);計時器

• history對象

  • 記錄了用戶曾經瀏覽過的頁面(URL)，並可以實現瀏覽器前進與後退相似導航的功能。

• Location對象

  • location用於獲取或設置窗體的URL，並且可以用於解析URL。
    

• Navigator 對象

  • 包含有關瀏覽器的信息，通常用於檢測瀏覽器與操作系統的版本。
    

• screen對象用於獲取用戶的屏幕信息。
  

• DOM 對象

  • document.getElementsByName(name)
    
    • 返回帶有指定名稱的節點對象的集合。
  • document.getElementsByTagName(Tagname)
    
    • 返回帶有指定標籤名的節點對象的集合。返回元素的順序是它們在文檔中的順序。

  • elementNode.getAttribute(name) /setAttribute()方法

    • 通過元素節點的屬性名稱獲取屬性的值。/設置值

  • 節點屬性：每個節點都有三個重要的屬性
    

  • 遍歷節點
    

  • DOM操作: