JavaScript操作浏览器

浏览器对象

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);