JavaScript個人學習心得
阿新 • • 發佈：2019-02-13
以下為本人學習JS的一些個人心得
- Js全稱JavaScript，是一門主要負責網頁行為的指令碼語言（指令碼語言就是隻能依託於其他語言才能產生作用，無法獨立使用的語言）。相關有DOM模型 ，即document object model（文件物件模型），一個HTML在JS方面看就是一個DOM樹，每一個標籤是一個節點，JS就是對DOM樹進行操作的指令碼語言。
- 獲取元素節點的一些方式：
- document.getElementById() :根據id獲取屬性，返回單個節點
- document.getElementByClassName():根據name屬性獲取，返回節點陣列
- document.getElementByTagName():根據標籤名獲取，返回節點陣列
3.獲取文字節點的方式：
- 獲取文字節點所在的元素節點
- 獲取元素節點的第一個子節點：元素節點.firstChild
- 獲取文字節點值：元素節點.firstChild.nodeValue;這個方法可以直接賦值，以改變文字節點值
4.獲取屬性節點：元素節點.屬性名;該方法可以直接賦值，以改變屬性值。
5.獲取子節點：
- .firstChild 獲取第一個子節點
- .lastChild 獲取最後一個子節點
- .childNodes 獲取所有的子節點並返回陣列
6.JS內建物件：
- window：代表瀏覽器，常用於window.onload事件，在頁面所有元素載入完成後觸發
- document：帶表HTML文件，通過該物件獲取元素節點
- console：代表控制檯，通過log（）方法將資料列印到控制檯，和Java裡面的System.out.println()道理相同
7.this物件：指代當前觸發事件的節點
8.建立節點:
- 建立元素節點：document.createElement("標籤名")
- 建立文字節點：document.createTextNode("文字節點值");
- 建立屬性：元素節點.屬性名 = 值；
9.插入節點
- 將節點插入父節點中： 父節點.appendChild(子節點)
- 將節點插入到指定節點前面 父節點.insertBefore(新節點,指定節點)
10.刪除節點：節點.remove(); 刪除當前節點
11.確認提示框：
var flag = confirm("是否確定刪除");
使用者可選擇確定或不確定 返回值為布林型別
12.正則表示式：驗證文字內容是否符合業務邏輯
(1)特殊符合
- /.../正則表示式結構
- ^ 正則表示式的開頭
- $ 正則表示式的結尾
- \d 匹配內容為數字，等價[0-9]
- \D 匹配內容不為數字，等價[^0-9]
- \w 匹配內容為數字，大小寫字母，等價於[A-Za-z0-9]
- \W 匹配內容不為數字，大小寫字母，等價於[^A-Za-z0-9]
- . 匹配任意字元，包括符號，常與{}搭配，用於限制字元長度。
(2) {}限制驗證的位數：
- {n} 驗證n個字元
- {n,m}驗證至少n個字元，最多m個字元。
- {n,} 驗證至少n個字元，無上限。
- + 驗證至少1個長度，最大不限
13.JS事件
- onclick 單點選事件
- ondbclick 雙點選事件
- onchange 內容改變事件
- onmouseover 滑鼠懸停事件
- onmouseout 滑鼠移出事件
- onfous 游標聚集事件
- onblur 失去焦點事件
- onkeydown 鍵盤按下事件
14.事件冒泡
- 什麼是事件冒泡
觸發後代元素的事件，事件結束後會依次執行具有相同事件的祖先元素的事件程式碼
- 如何阻止事件冒泡
(1)需要在阻止事件冒泡的Js事件中加入[return false]
(2)event.stopPropagation();
15.Js事件監聽機制
垂直監聽 (這裡的垂直監聽是元素層級關係上的垂直，不是展示效果的垂直)
16.return false的功能
- 阻止元素預設行為。（元素預設行為指的是類似a標籤或者form表單可以跳轉頁面等元素自帶的行為）
- 阻止事件冒泡。
17.無標題
- .nodeValue 獲取節點值
- .innerHTML 獲取元素中的所有文件內容(包括換行、縮排) 來修改文件內容，或不賦值來獲取內容
- .innerText 獲取元素中的所有文字內容(換行不會被識別成空格)可以賦值來替換文件內容，或不賦值來獲取文字內容
此文件僅為個人學習簡單總結，很多地方有所欠缺，歡迎大家指教。