JS獲取元素、修改元素/css樣式/標簽屬性、簡單事件、數據類型

基本使用

• 寫在Script 標簽里
• 引入外部js文件：<script src=" "></script>
• console.log(" ") 方法用於在控制台輸出信息
  
  

註意事項

• 嚴格區大小寫
• 每一行完整語句後面加分號
• 變數名不能使用關鍵字和保留字
• 代碼要縮進，保持可讀性
  
  

修改元素內容

• 獲取元素
  • 通過id獲取元素：document.getElementById(“”);
  • 通過class名字獲取元素：document.getElementsByClassName(“”);
  • 通過標簽名獲取元素：document.getElementsByTagName(“”);
  • 通過 name的屬性獲取元素，一般用於input：document.getElementsByName(“”);
  • 通過CSS選擇器獲取一個：document.querySelector (“”);
  • 通過CSS選擇器獲取所有：document.querySelectorAll(“”);
• 修改元素內容
  • var 是 js 定義變數的關鍵字：var content = document.get....
  • innerHTML 和 innerText 可以修改/獲取（HTML內容和文本內容）：content.innerHTML="<h1>標題</h1>"
    
    

簡單事件

• 單擊事件：onclick
• 雙擊事件：ondblclick
• 滑鼠劃入：onmouseenter
• 滑鼠划出：onmouseleave
• 視窗變化時：onresize
• 改變下拉框時：onchange
  
  

修改樣式（通過js修改css）

• 獲取元素：var box = document.getElementById("div1");
• 方法一：box.style.border="1px red solid";
• 方法二：box.style["border"]="1px red solid";
  
  

操作標簽屬性

• 自帶屬性
  • box.className="d1";
• 自定義屬性
  • 設置屬性： box.setAttribute('aaa','bbb');
  • 刪除屬性：box.removeAttribute("class");
  • 判斷是否存在屬性：box.hasAttribute("aaa")
    
    

數據類型

• 字元串：string
• 數字：number
• 布爾：boolean
• 未定義：undefined
• 空：null
• 對象：object
• 查看數據類型：typeof 變數名