1. 程式人生 > >JavaScript操作瀏覽器

JavaScript操作瀏覽器

瀏覽器物件

window

window不僅充當全域性變數,還表示瀏覽器視窗

window.innerWidthwindow.innerHeight表示瀏覽器視窗內部的寬度和高度

nevigator

nevigator物件表示瀏覽器的資訊,最常用的屬性包括:

  • navigator.appName:瀏覽器名稱;
  • navigator.appVersion:瀏覽器版本;
  • navigator.language:瀏覽器設定的語言;
  • navigator.platform:作業系統型別;
  • navigator.userAgent:瀏覽器設定的User-Agent
    字串。

appName = Netscape

appVersion = 5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

language = zh-CN

platform = Linux x86_64

userAgent = Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

screen

screen物件表示螢幕的資訊,常用的屬性有:

  • screen.width:螢幕寬度,以畫素為單位;
  • screen.height:螢幕高度,以畫素為單位;
  • screen.colorDepth:返回顏色位數,如8、16、24。

location

location物件表示當前頁面的URL資訊。

常用屬性:

location.href;//http://www.example.com:8080/path/index.html?a=1&b=2#TOP
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080' location.pathname; // '/path/index.html' location.search; // '?a=1&b=2' location.hash; // 'TOP' location.assign();//載入一個新頁面 location.reload();//重新載入頁面

document

document物件表示當前頁面的HTML檔案的DOM樹,

getElementById():根據id獲取一個節點

getElementsByTagName():根據tagname獲取一組節點

getElementByClassName():根據classname獲取一組節點(id是唯一的,tagname和classname不唯一)

document.cookie:獲取瀏覽器的cookie資訊

document.title:獲取瀏覽器視窗的標題

node.childrennode.firstElementChildnode.lastElementChild:獲取所有孩子節點、第一個孩子節點、最後一個孩子節點

更新DOM

獲取DOM內容可以使用innerHTML,innerText,textContent

區別:

innerHTML:可以修改節點內的HTML元素,如

// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設定文字為abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 設定HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的內部結構已修改

在節點內添加了標籤

innerText:不可以修改節點內的HTML元素,且不返回這個元素的資訊

textContent:不可以修改節點內的HTML元素,但可以返回所有資訊

插入DOM

一般使用creatElement()建立一個新的節點,再使用appendChile()插入

list = document.getElementById('list')//建立一個新的節點
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
//還可以設定屬性
//haskell.setAttrtbute(key,value);
list.appendChild(haskell);

在某個位置插入:

insertBefore(node,ref)

將node插入ref之前

刪除DOM

刪除DOM有兩個方法

1、先找到這個節點,再找出其父節點,再呼叫removeChild()

// 拿到待刪除節點:
var self = document.getElementById('to-be-removed');
// 拿到父節點:
var parent = self.parentElement;
// 刪除:
var removed = parent.removeChild(self);

2、直接找到父節點,刪除其子節點

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 瀏覽器報錯

報錯的原因是因為這個過程是動態的,刪除了0號元素,1號元素就自動補位成為新的0號元素

操作表單

表單型別

  • 文字框,對應的<input type="text">,用於輸入文字;
  • 口令框,對應的<input type="password">,用於輸入口令;
  • 單選框,對應的<input type="radio">,用於選擇一項;
  • 複選框,對應的<input type="checkbox">,用於選擇多項;
  • 下拉框,對應的<select>,用於選擇一項;
  • 隱藏文字,對應的<input type="hidden">,使用者不可見,但表單提交時會把隱藏文字傳送到伺服器。

獲取值

// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '使用者輸入的值'

對於單選框和複選框,應該使用checked:

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

提交表單

方法一:為button繫結一個onClick事件

<!-- HTML -->
<form id="test-form">
    <input type="text" name="test">
    <button type="button" onclick="doSubmitForm()">Submit</button>
</form>

<script>
function doSubmitForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 提交form:
    form.submit();
}
</script>

方法二:為form繫結一個onsubmit事件:

<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
    <input type="text" name="test">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var form = document.getElementById('test-form');
    // 可以在此修改form的input...
    // 繼續下一步:
    return true;
}
</script>

注意將button的type設定為submit,那麼點選時預設觸發submit事件,為form繫結onsubmit事件,有利於在提交前做一些驗證工作,當返回false時,則不提交form。

關於密碼的提交方法:一般會將密碼用MD5方法加密後再提交,注意要配合hidden標籤使用:

<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
    <input type="text" id="username" name="username">
    <input type="password" id="input-password">
    <input type="hidden" id="md5-password" name="password">
    <button type="submit">Submit</button>
</form>

<script>
function checkForm() {
    var input_pwd = document.getElementById('input-password');
    var md5_pwd = document.getElementById('md5-password');
    // 把使用者輸入的明文變為MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 繼續下一步:
    return true;
}
</script>

另外,form只會提交含有name屬性的標籤,因此密碼不會提交,只提交hidden標籤,避免了密碼的暴露。

操作檔案

在HTML表單中,可以上傳檔案的唯一控制元件就是<input type="file">

注意:當一個表單包含<input type="file">時,表單的enctype必須指定為multipart/form-datamethod必須指定為post,瀏覽器才能正確編碼並以multipart/form-data格式傳送表單的資料。

使用方法:

var
    fileInput = document.getElementById('test-image-file'),//file按鈕
    info = document.getElementById('test-file-info'),//顯示資訊
    preview = document.getElementById('test-image-preview');//顯示影象內容
// 監聽change事件:
fileInput.addEventListener('change', function () {
    // 清除背景圖片:
    preview.style.backgroundImage = '';
    // 檢查檔案是否選擇:
    // value即file檔案路徑
    if (!fileInput.value) {
        info.innerHTML = '沒有選擇檔案';
        return;
    }
    // 獲取File引用:
    var file = fileInput.files[0];
    // 獲取File資訊:
    info.innerHTML = '檔案: ' + file.name + '<br>' +
                     '大小: ' + file.size + '<br>' +
                     '修改: ' + file.lastModifiedDate;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('不是有效的圖片檔案!');
        return;
    }
    // 讀取檔案:
    var reader = new FileReader();
    reader.onload = function(e) {
        var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...'            
        preview.style.backgroundImage = 'url(' + data + ')';
    };
    // 以DataURL的形式讀取檔案:
    reader.readAsDataURL(file);
});
  • value:獲取檔案路徑;
  • files[0]:獲取檔案的引用;
  • name:獲取檔名;
  • size:獲取檔案大小;
  • type:獲取檔案型別;
  • lastModifiedDate:獲取檔案最後一次修改的日期;
  • FileReader:用於讀取檔案;
  • readAsDataURL:以DataURL的格式讀取檔案,將讀取到的內容用url()輸出即可。

另外,onload是回撥函式,當使用readAsDataURL讀取完檔案後,自動呼叫回撥函式對讀取到的檔案進行處理。

在字串'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...'中,base64,後的字串是用base64方式編碼後的資料,在伺服器端可以用反編碼獲取檔案的二進位制資訊。

AJAX(Asynchronous JavaScript and XML)

AJAX主要用於在js中使用非同步請求,主要依靠XMLHttpRequest物件。

用法如下:

function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}

function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}

var request = new XMLHttpRequest(); // 新建XMLHttpRequest物件

request.onreadystatechange = function () { // 狀態發生變化時,函式被回撥
    if (request.readyState === 4) { // 成功完成
        // 判斷響應結果:
        if (request.status === 200) {
            // 成功,通過responseText拿到響應的文字:
            return success(request.responseText);
        } else {
            // 失敗,根據響應碼判斷失敗原因:
            return fail(request.status);
        }
    } else {
        // HTTP請求還在繼續...
    }
}

// 傳送請求:
request.open('GET', 'http://www.baidu.com');
request.send();

alert('請求已傳送,請等待響應...');

使用非同步就一定要用到回撥函式,這裡使用了onreadystatechange()回撥函式

request.readystate表示是否發出了請求,4為成功傳送,否則傳送請求失敗;

request.status表示伺服器的響應結果,200表示成功相應,否則響應失敗;

request.open()表示定義請求,第一個引數為GET或者POST,第二個引數為URL;

request.send()表示真正傳送請求,GET不需要引數,POST需要輸入FormData物件。

Promise

大致是給兩個函式,符合某個條件時執行函式1,不符合某個條件時執行函式2

new Promise(function (success, fail) {
    if(...){
        succes();
    }
    else{
		fail();
    }
}).then(func1).catch(func2);
//這裡func1賦給success,func2賦給fail

另外,還可以將多個Promise物件序列執行:

job1.then(job2).then(job3).catch(handleError);

也可以將多個Promist並行執行:

Promise.all([p1, p2]).then(success).catch(fail);

Promise.race([p1, p2]).then(success).catch(fail);

兩者的區別是:

Promise.all()是p1,p2都會執行完,而Promise.race()是若p1執行較快,首先使用success函式,則返回p1的執行結果,不再返回p2的執行結果,也就是說只返回執行最快的p的執行結果,其他丟棄。

Canvas

canvas = document.getElementById('test-shape-canvas');//獲取畫布
ctx = canvas.getContext('2d');//繪製2D影象
//ctx = canvas.getContext('webgl');繪製3D圖形

繪製圖形

ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小為200x200的矩形,擦除的意思是把該區域變為透明
ctx.fillStyle = '#dddddd'; // 設定顏色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小為130x130的矩形塗色
// 利用Path繪製複雜路徑:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

繪製文字

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('帶陰影的文字', 20, 40);