document object

Attributes of document object

document.title               // 设置文档标题等价于 HTML 的<title>标签
document.URL                 // 设置 URL 属性从而在同一窗口打开另一网页
document.cookie              // 设置和读出 cookie
document.charset             // 设置字符集 简体中文：gb2312
document.body                // body 元素

Methods of document object

getElementById() // 返回一个 Element
getElementsByName() // 根据 name 属性获得元素，返回一个 NodeList
getElementsByTagName() // 返回一个 HTMLCollection/NodeList(Webkit)
getElementsByClassName() // 返回一个 HTMLCollection
querySelector() // 返回一个符合的元素，性能很差
querySelectorAll() // 返回所有符合的元素组成的 NodeList, 性能很差
document.write()
document.createElement()

Add or remove classes

el.classList.add("foo", "bar", ...)
el.classList.remove("foo", "bar", ...)
el.classList.toggle("foo")
el.classList.contains("foo")

Check if the child element is the descendant of another element.

const isDescendant = ancestor.contains(child)

Create Element

const tree = document.createDocumentFragment();
const link = document.createElement("a");
link.setAttribute("id", "id1");
link.setAttribute("href", "http://site.com");
link.appendChild(document.createTextNode("linkText"));

var div = document.createElement("div");
div.setAttribute("id", "id2");
div.appendChild(document.createTextNode("divText"));

tree.appendChild(link);
tree.appendChild(div);
document.getElementById("main").appendChild(tree);

Remove an element

e.parentNode.removeChild(e)

增加动画

div.animate([
    // keyframes
    { opacity: '0' },
    { opacity: '1' }
], {
    // timing options
    duration: 1000,
});

window object

functions in window object

setTimeout(func, milliseconds, parameters...)
setInterval(func, milliseconds, parameters...)

NOTE: javascript is asynchronous, even if you set 0 timeout, the function is just put into the execute queue, not invoked immediately.

window.location

location            // setting location will cause the page to redirect to new page
location.href
location.protocol
location.host
location.hostname
location.port
location.pathname
location.search
location.hash
location.assign     // go to a new address
location.replace    // go to a new address and do not disturb the history
location.reload     //reload the page

window.history

history.back()
history.forward()
history.go(number)

window.screen

screen.width    screen width, not the viewport width
screen.height    screen height

alert, confirm and prompt

alert    show a message
confirm    return a bool by user action
prompt

Same Origin Policy

document.domain is the key to decide the origin of a script.

Scripts under different subdomain can set the their document.domain to a same domain, then they can share the same cookie or communicate

Cross-Origin Resource Sharing

Node vs Element

HTML Document consists of different node, element is one type of node.

• NodeList vs HTMLCollection

  NodeList is a collection of node, HTMLCollection is a collection of element.

• vs Array

  HTMLCollection 和 NodeList 都是动态的，会随着 DOM 的变化而变化

Array 是静态的数据结构

Selection

window.getSelection and document.getSelection all returns the Selection object, the selection object is almost useless.

window.getSelection.getRangeAt(0) returns a Range object. For history reasons, there is only one range in each selection.

rangeAncestor = range.commonAncestorContainer; commonAncestorContainer is the common ancestor of the range elements.

localStorage

感觉好像没什么复杂的，就是简单的 get/set

window.localStorage.setItem("foo", "bar");
const v = window.localStorage.getItem("foo")
window.localStorage.removeItem("foo")

参考

1. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
2. IndexedDB
3. https://htmldom.dev