原文

全局对象

function sayHi() {alert("Hello");
}// 全局对象的函数.
window.sayHi();
alert(window.innerHeight);

更改背景

document.body.style.background = "red";setTimeout(() => document.body.style.background = "", 1000);

当前地址

alert(location.href); 
if (confirm("Go to Wikipedia?")) {location.href = "https://wikipedia.org";// 重定向
}

子:childNodes,firstChild,lastChild

elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
//子们.
for (let node of document.body.childNodes) {alert(node); // 迭代.
}

同级与父级

alert( document.body.parentNode === document.documentElement ); // true
alert( document.head.nextSibling ); // 
alert( document.body.previousSibling );

对于所有节点:parentNode,childNodes,firstChild,lastChild,previousSibling,nextSibling.
仅适用于元素节点:parentElement,children,firstElementChild,lastElementChild,previousElementSibling,nextElementSibling.

取元素

let elem = document.getElementById('elem');
elem.style.background = 'red';

选择器

let elements = document.querySelectorAll('ul > li:last-child');
//支持伪类
for (let elem of elements) {alert(elem.innerHTML); 
}

elem.querySelector返回第1个匹配元素.

elem.matches(css),是否匹配.

for (let elem of document.body.children) {if (elem.matches('a[href$="zip"]')) {alert("哈哈.." + elem.href );}}

elem.closest(css)查找与CSS选择器匹配的最近祖先.包含elem.
querySelector更强大,

document.body.innerHTML = 'The new BODY!';
alert(elem.outerHTML); 
// <div id="elem">Hello <b>World</b></div>

文本的兄弟:

let text = document.body.firstChild;
alert(text.data); // Hellolet comment = text.nextSibling;
alert(comment.data); // Comment
alert(news.textContent);//去掉所有标签的纯文本.
elem.hidden = true;//隐藏元素
setInterval(() => elem.hidden = !elem.hidden, 1000);
//闪烁元素.

直接访问属性

alert(elem.type); // "text"
alert(elem.id); // "elem"
alert(elem.value); // value

给节点加元素加方法

document.body.myData = {name: 'Caesar',title: 'Imperator'
};alert(document.body.myData.title); // document.body.sayTagName = function() {alert(this.tagName);
};document.body.sayTagName();

给所有元素加方法

Element.prototype.sayHi = function() {alert(`Hello, I'm ${this.tagName}`);
};document.documentElement.sayHi(); // 
document.body.sayHi(); // 

几个属性方法

elem.hasAttribute(name),检查是否存在属性.
elem.getAttribute(name),获取值.
elem.setAttribute(name,value),设置值.
elem.removeAttribute(name),删除属性.

属性同步

let input = document.querySelector('input');// attribute => propertyinput.setAttribute('id', 'id');alert(input.id); // id (updated)// property => attributeinput.id = 'newId';alert(input.getAttribute('id')); // newId (updated)

不同步

let input = document.querySelector('input');// attribute => propertyinput.setAttribute('value', 'text');alert(input.value); // text// NOT property => attributeinput.value = 'newValue';alert(input.getAttribute('value')); // 未更新.

更改属性值将更新属性.
但更改属性不会影响属性.

数据集

<style>.order[data-order-state="new"] {color: green;}.order[data-order-state="pending"] {color: blue;}.order[data-order-state="canceled"] {color: red;}
</style><div id="order" class="order" data-order-state="new">A new order.
</div><script>// readalert(order.dataset.orderState); // new// modifyorder.dataset.orderState = "pending"; // (*)
</script>

elem.attributes是所有属性的集合.

创建元素

let div = document.createElement('div');
let textNode = document.createTextNode('Here I am');
//文本节点,
let div = document.createElement('div');
div.className = "alert";
//设置类.填充内容.
div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";

node.append(...节点或串),在节点末尾附加节点或串,
node.prepend(...节点或串),在节点的开头插入节点或串,
node.before(...节点或串),在node之前插入节点或串,
node.after(...节点或串),在节点后插入节点或串,
node.replaceWith(...节点或串),按给定的节点或串替换node.

ol.before('before');ol.after('after');
ol.prepend(liFirst);
ol.append(liLast);
div.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
div.insertAdjacentHTML('afterend', '<p>Bye</p>');
//插入html
elem.insertAdjacentText(where,text)
//beforebegin,afterbegin,beforeend,afterend
//插入文本
elem.insertAdjacentElement(where,elem)
div.remove()
//删除节点.

所有插入方法都会自动从旧位置删除节点.

克隆节点

let div2 = div.cloneNode(true);//深度
let div2 = div.cloneNode(假);//非深度

文档片段

function getListContent() {let fragment = new DocumentFragment();for(let i=1; i<=3; i++) {let li = document.createElement('li');li.append(i);fragment.append(li);}return fragment;
}ul.append(getListContent()); // (*)

高级点

function getListContent() {let result = [];for(let i=1; i<=3; i++) {let li = document.createElement('li');li.append(i);result.push(li);}return result;
}ul.append(...getListContent());

旧方法

list.appendChild(newLi);
list.insertBefore(newLi, list.children[1]);
list.insertBefore(newLi, list.firstChild);
list.removeChild(li);
parentElem.replaceChild(节点,oldChild)

风格

elem.style.left = left; 
elem.style.top = top;
alert(document.body.className);
//类名,main page
document.body.classList.add('article');
alert(document.body.className); 
// main page article
for (let name of document.body.classList) //迭代.

方法有:

classList.add/remove
classList.toggle
classList.contains

风格

button.style.MozBorderRadius = '5px';
button.style.WebkitBorderRadius = '5px';

隐藏

document.body.style.display = "none"; // hide
setTimeout(() => document.body.style.display = "", 1000); // 显示.setTimeout(() => document.body.style.removeProperty('background'), 1000);
//删除属性

文本串属性

div.style.cssText=`color: red !important;background-color: yellow;width: 100px;text-align: center;`;alert(div.style.cssText);

单位

document.body.style.margin = '20px';
alert(document.body.style.margin); // 20pxalert(document.body.style.marginTop); // 20px
alert(document.body.style.marginLeft); // 20pxlet computedStyle = getComputedStyle(document.body);
//计算风格.只读.
alert( computedStyle.marginTop ); // 5pxalert( computedStyle.color );

延迟或异步加载

<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script><script async src="https://javascript.info/article/script-async-defer/long.js"></script>
<script async src="https://javascript.info/article/script-async-defer/small.js"></script>

动态脚本

let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
document.body.append(script); // (*)

改变监视器

使用MutationObserver,可以检测到在DOM中何时出现不需要的元素,并删除它.
有更改后,执行回调:

let observer = new MutationObserver(callback);
observer.observe(node, config);

例:

<div contentEditable id="elem">Click and <b>edit</b>, please</div>
<script>
let observer = new MutationObserver(mutationRecords => {console.log(mutationRecords); // 记录更改.
});// 除了属性外.
observer.observe(elem, {childList: true, // 观察直接子,subtree: true, // 及子树.characterDataOldValue: true // 旧数据
});
</script>
//
mutationRecords = [{type: "characterData",oldValue: "edit",target: <text node>,// other properties empty
}];

数组缓冲

ArrayBuffer,固定长度连续内存区域的引用.

let buffer = new ArrayBuffer(16);
let view = new Uint32Array(buffer);
alert(view.length);//4
alert(view.byteLength); // 16,按字节.
// 赋值.
view[0] = 123456;// 迭代
for(let num of view) {alert(num); // 123456, 然后0, 0, 0 

相同视图

let arr8 = new Uint8Array([0, 1, 2, 3]);
let arr16 = new Uint16Array(arr8.buffer);

任意格式视图

let buffer = new Uint8Array([255, 255, 255, 255]).buffer;
let dataView = new DataView(buffer);
alert( dataView.getUint8(0) ); // 255
alert( dataView.getUint16(0) ); // 65535 
alert( dataView.getUint32(0) ); // 4294967295 
dataView.setUint32(0, 0);

解码二进制

let uint8Array = new Uint8Array([72, 101, 108, 108, 111]);
alert( new TextDecoder().decode(uint8Array) ); // Hello
let uint8Array = new Uint8Array([228, 189, 160, 229, 165, 189]);
alert( new TextDecoder().decode(uint8Array) ); // 你好

文本编码器

let encoder = new TextEncoder();let uint8Array = encoder.encode("Hello");
alert(uint8Array); // 72,101,108,108,111

块

let blob = new Blob(["<html>…</html>"], {type: 'text/html'});
//第1参为数组.

动态下载

<a download="hello.txt" href='#' id="link">Download</a>
<script>
let blob = new Blob(["Hello, world!"], {type: 'text/plain'});
link.href = URL.createObjectURL(blob);
</script>

动态链接

let link = document.createElement('a');
link.download = 'hello.txt';
let blob = new Blob(['Hello, world!'], {type: 'text/plain'});
link.href = URL.createObjectURL(blob);
link.click();
URL.revokeObjectURL(link.href);//删除掉

图像操作

let img = document.querySelector('img');
let canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
let context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
//前面是绘画,后面是保存.canvas.toBlob(function(blob) {// 下载let link = document.createElement('a');link.download = 'example.png';link.href = URL.createObjectURL(blob);link.click();URL.revokeObjectURL(link.href);
}, 'image/png');

流

const readableStream = blob.stream();
const stream = readableStream.getReader();
while (true) {let { done, value } = await stream.read();if (done) {console.log('all blob processed.');break;}console.log(value);
}

取文件

<input type="file" onchange="showFile(this)">
<script>
function showFile(input) {let file = input.files[0];//可选择多个文件.alert(`File name: ${file.name}`); alert(`Last modified: ${file.lastModified}`); // e.g 1552830408824
}
</script>

读文件

<input type="file" onchange="readFile(this)">
<script>
function readFile(input) {let file = input.files[0];let reader = new FileReader();//reader.readAsText(file);//方法!
//readAsArrayBuffer,readAsText,readAsDataURL,reader.onload = function() {console.log(reader.result);};reader.onerror = function() {console.log(reader.error);};
}
</script>