JavaScript操作瀏覽器

阿新 • • 發佈：2018-12-23

瀏覽器物件

window

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

window.innerWidth和window.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.children、node.firstElementChild、node.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-data，method必須指定為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);

JavaScript操作瀏覽器

瀏覽器物件

window

nevigator

screen

location

document

更新DOM

插入DOM

刪除DOM

操作表單

表單型別

獲取值

提交表單

操作檔案

AJAX(Asynchronous JavaScript and XML)

Promise

Canvas

JavaScript操作瀏覽器

使用 JavaScript 操作瀏覽器歷史記錄 API

JavaScript語法基礎使用JS操作網頁（DOM）使用JS操作瀏覽器（BOM）

javascript監控瀏覽器上的關閉和重新整理操作

JavaScript操作的DOM對象

JavaScript | window瀏覽器對象模型

javascript多瀏覽器的兼容

selenium操作瀏覽器

JavaScript Window---瀏覽器對象模型

Javascript操作cookie

Asp.net中, Javascript 操作textBox的屬性應用（）

JavaScript 操作DOM 節點

[轉] JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件

Javascript操作DOM常用API總結

Javascript操作Cookie（增，刪，改，查）

[Python爬蟲]使用Selenium操作瀏覽器訂購火車票

JavaScript操作BOM對象

JavaScript 操作Dom對象

javaScript 操作BOM對象

javascript在瀏覽器中調用sqlserver數據

JavaScript操作瀏覽器

瀏覽器物件

window

nevigator

screen

location

document

更新DOM

插入DOM

刪除DOM

操作表單

表單型別

獲取值

提交表單

操作檔案

AJAX(Asynchronous JavaScript and XML)

Promise

Canvas

相關推薦