Posted on:
Last modified:
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()
el.classList.add("foo", "bar", ...)
el.classList.remove("foo", "bar", ...)
el.classList.toggle("foo")
el.classList.contains("foo")
const isDescendant = ancestor.contains(child)
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.
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
history.back()
history.forward()
history.go(number)
window.screen.width screen width, not the viewport width window.screen.height screen height
alert show a message confirm return a bool by user action prompt
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
HTML Document consists of different node, element is one type of node.
NodeList is a collection of node, HTMLCollection is a collection of element.
HTMLCollection 和 NodeList 都是动态的,会随着 DOM 的变化而变化
Array 是静态的数据结构
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.
感觉好像没什么复杂的,就是简单的 get/set
window.localStorage.setItem("foo", "bar");
const v = window.localStorage.getItem("foo")
window.localStorage.removeItem("foo")
© 2016-2022 Yifei Kong. Powered by ynotes
All contents are under the CC-BY-NC-SA license, if not otherwise specified.
Opinions expressed here are solely my own and do not express the views or opinions of my employer.