資訊專欄INFORMATION COLUMN
摘要：相關最大的特性就在于直接操縱網頁上的節點，從而實現網頁的局部刷新而非全局刷新。該回調函數會在送回響應的時候被調用。當然了，如果瀏覽器不支持對象，會返回，在這時需要進行額外的處理。
前言
馬上就要參加一個團隊項目進行React的前端開發了。最近正在著手熟練React語法，然后發現本質上還是建立在對javascript的深刻理解上。市面上在js基礎上封裝出了非常多優秀的車輪，其中最被新手廣泛使用的當屬jquery。熟悉jquery語法的童鞋可能會覺得js的語法非常的啰嗦，但是在ES6的最新標準出現以后，js重獲新生，可以造出更優秀的輪子了（笑）。所以在這里我重新整理一下js的基本知識點。
DOM相關JS最大的特性就在于直接操縱網頁上的DOM節點，從而實現網頁的局部刷新而非全局刷新。這個特性決定了只要瀏覽器不死，js就還是會活躍在一線作為底層的實現優化瀏覽器的加載。當然曾經對JS的濫用也導致在一段時間內，人們對彈窗廣告嗤之以鼻，這一段時期是JS的用戶體驗的低谷期。然而在爆炸互聯網時期，隨著瀏覽器承擔了更多本來桌面應用承擔的功能，JS的深度運用也逐漸被開發出來。下面是一些我整理的API關于直接操縱DOM節點的。
獲得節點節點屬性getElementById(idname): 返回id值為idname的節點
getElementsByTagName(tagname) : 返回array對象，array中的元素為標簽名是tagname的節點
getElementsByClassName(className) : 返回array對象，array中為class中包含className的節點
增刪節點getAttribute(attributeName) : 該方法作用于節點上，獲得節點attributeName屬性的內容
setAttribute(attributeName, value) : 該方法作用域節點上，修改節點attributeName屬性的值
childNodes : 該屬性可以用來獲得任何一個元素的所有子元素，這個子元素包含元素節點，文本節點，屬性節點
nodeType : 獲得元素節點的屬性值，元素節點屬性值為1，屬性節點的屬性值為2，文本節點的屬性值為3
nodeValue : 獲得節點的屬性值，注意一定要作用在文本節點上，否則得到的值是null，也可以用于賦值
firstChild : 獲得第一個子節點，等價于node.childNodes[0]
lastChild : 獲得最后子節點，等價于node.childNodes[childNodes.length-1]
nextSibling : 獲得相鄰的節點
parentNode : 父節點
WindowinnerHTML : 獲得或更改當前節點下的所有html代碼
createElement(element) : 創建一個元素節點
createTextNode(text) : 創建一個文本節點
appendChild(child) : 將child節點插入當前節點的子節點
parentElement.insertBefore(newElement, targetElement) : 在已有元素前插入一個新元素。這個方法的設計有點累贅，可見js當初給自己的定位就是單純的腳本語言啊。
JS最頂層的全局屬性就是Window，通過全局的window我們可以定義很多瀏覽器行為比如彈出窗口，彈出警告，跳轉至新的窗口等。
AJAXwindow.open(url, name, features) : 創建新的瀏覽器窗口，這個方法的三個參數都是可選的。第一個參數是指新窗口的URL地址，如果忽略這個參數會彈出一個新的空白瀏覽窗。第二個參數是新窗口的名字，可以在代碼里通過新窗口的名字和這個窗口通信。最后一個參數是以逗號分隔的字符串，其內容是新窗口的各種屬性，比如尺寸，工具欄。
window.onload : 頁面被加載時進行的工作，可以賦值給它一個方法，如果想要執行多個方法，也可以將其封裝進一個方法。或者手動創建一個addEvent的方法來給其動態賦值
以前和瀏覽器交互意味著發送請求然后瀏覽器重新返回一個新的頁面，然而跟原來頁面相比，可能只需要頁面上極少的一部分發生改變。AJAX可以做到異步向服務器發送請求并根據數據只更新一小部分界面。很多框架都對JS的AJAX進行了封裝，從而讓代碼更加簡潔高效,而且可以在不同的瀏覽器上實現兼容（IE笑了）。
XMLHttpRequest范例：
function getNewContent(){
//在這里不考慮兼容性，直接返回XMLHttpRequest對象
var request = new XMLHttpRequest();
if(request){
request.open("GET", "example.txt", true);
request.onreadystatechange = function(){
if(request.readyState == 4){
....
}
};
request.send(null);
}else{
alert("瀏覽器不支持XMLHttpRequest");
}
}
在這里先使用open方法打開一個ajax請求，然后傳入回調函數。該回調函數會在XMLHttpRequest送回響應的時候被調用。當然了，如果瀏覽器不支持XMLHttpRequest對象，會返回false，在這時需要進行額外的處理。
readystate有五個可能的屬性值：
0 : 未初始化
1 : 正在加載
2 : 加載完畢
3 : 正在交互
4 : 完成
返回的響應內容可以在request.responseText中查看
快捷鍵之access key時鐘accesskey="1" : 返回到本網站主頁
accesskey="2" : 后退到前一頁面
accesskey="4" : 打開本網站的搜索表單/頁面
accesskey="9" : 本網站聯系方法
accesskey="0" : 查看本網站的快捷鍵清單
數值處理variable = setTimeOut("function", interval) : 將function在一段interval之后開始執行
clearTimeOut(variable) : 取消等待執行隊列里的某個函數
parseInt("") : 返回輸入值中的整數
parseFloat("") : 返回輸入值中的小數
這些都是我在閱讀了《Script DOM編程藝術》之后的一些隨手筆記。其實這本書非常適合入門，因為它給了一些簡單的示例讓我們在對JS了解甚少的情況下清楚HTML+CSS+JS是怎樣的工作模式。不過對于真正的語法講解甚少，所以可謂是基礎之基礎。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88836.html
摘要：如果支持，直接從獲取當前腳本運行的地址如果不支持則遍歷文檔所有的標簽，判斷哪個標簽的為，則說明此標簽的屬性為當前腳本運行的地址。需要的注意的是只有支持，和均不支持。 起因 在閱讀layUI的源代碼關于加載遠程腳本的代碼中出現了判斷當前js腳本地址的代碼，其中出現了對于document.currentScript支持與不支持時，會走不同的邏輯。如果支持document.currentSc...
摘要：如果支持，直接從獲取當前腳本運行的地址如果不支持則遍歷文檔所有的標簽，判斷哪個標簽的為，則說明此標簽的屬性為當前腳本運行的地址。需要的注意的是只有支持，和均不支持。 起因 在閱讀layUI的源代碼關于加載遠程腳本的代碼中出現了判斷當前js腳本地址的代碼，其中出現了對于document.currentScript支持與不支持時，會走不同的邏輯。如果支持document.currentSc...
摘要：代碼資料文件文件文件關于系列的的網頁的操作需要權限的相關文檔關于瀏覽器無法一些元素無法設置屬性的解決方案和原因 react代碼資料： 文件：packages/react-dom/src/client/setInnerHTML.js /** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code...
摘要：常規寫法速記法判斷變量是否存在速記法這可能會有些瑣碎，但是值得一提。常規寫法速記法注意這兩個例子并不是完全相等，只要變量是一個真值，該表達式就是成立的。 19+ 個 JavaScript 快速編程技巧 — SitePoint 這確實是一篇針對于基于 JavaScript 語言編程的開發者必讀的文章。在過去幾年我學習 JavaScript 的時候，我寫下了這篇文章，并將其作為 JavaS...
閱讀 2000·2023-04-25 16:53
閱讀 1442·2021-10-13 09:39
閱讀 606·2021-09-08 09:35
閱讀 1639·2019-08-30 13:03
閱讀 2121·2019-08-30 11:06
閱讀 1831·2019-08-30 10:59
閱讀 3188·2019-08-29 17:00
閱讀 2288·2019-08-23 17:55
