document object

attributes of document object

document.title               // 设置文档标题等价于 HTML 的<title>标签
document.URL                 // 设置 URL 属性从而在同一窗口打开另一网页
document.fileCreatedDate     // 文件建立日期，只读属性
document.fileModifiedDate    // 文件修改日期，只读属性
document.fileSize            // 文件大小，只读属性
document.cookie              // 设置和读出 cookie
document.charset             // 设置字符集 简体中文：gb2312
document.body         // body 元素
document.location.hash/host/href/port          // location

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)

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

window.screen.width screen width, not the viewport width window.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, and then then 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.

• HTMLCollection vs NodeList vs Array

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

Array 是静态的数据结构

basics

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

参考

1. https://htmldom.dev