浏览器对象
浏览器会提供很多的 API 接口和对象方便 JavaScript 的调用和操作。
window
它是客户端 JavaScript 程序的全局对象。
常用属性：
-
consloe该对象提供了对浏览器调试控制台的访问 -
document表示任何在浏览器中已经加载好的网页，并作为一个入口去操作网页内容（也就是 DOM tree） -
history允许操作浏览器的曾经在标签也或框架里访问的会话历史记录 -
innerHeight获取浏览器视口高度，包括水平滚动条 -
innerWidth获取浏览器视口宽度，包括垂直滚动条 -
outerHeight获取整个浏览器窗口的高度，包括侧边栏、窗口镶边、边框 -
outerWidth获取整个浏览器窗口的宽度，包括侧边栏、窗口镶边、调正窗口大小的边框 -
location获取、设置当前 URL -
localStorage返回用来存储只能在创建它的源下访问的数据的 localStorage 对象的引用 -
sessionStorage返回用来存储只能在创建它的源下访问的数据的 sessionStorage 对象的引用 -
navigator返回用户代理的状态和标识 -
screen获取屏幕窗口的相关信息 -
screenX浏览器窗口相对屏幕最左水平距离 -
screenY浏览器窗口相对屏幕最上垂直距离 -
scrollX文档/页面水平方向滚动的距离 -
scrollY文档/页面垂直方向滚动的距离
常用方法：
-
addEventListener()将指定的监听注册到某个事件目标（EventTarget）上 -
alert()显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮 -
open()打开一个新的窗口 -
close()关闭由open()打开的窗口 -
confirm()显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 -
prompt()显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字 -
setInterval()每隔一定时间重复调用一次指定代码 -
setTimeout()定时器，在定时器到期后执行一段指定代码 -
clearInterval()清除setInterval()设置的任务 -
clearTimeout()清除setTimeout()建立的任务
计时器
const hello = '来了老弟！';
let timer;
function sayHello() {
timer = window.setTimeout(() => {
console.log(hello);
}, 3000)
}
function stop() {
window.clearTimeout(timer); // 在定时器输出结果前终止它
}
sayHello(); // 3秒后： '来了老弟！'
const hello = '来了老弟！';
let timer;
function sayHello() {
timer = window.setInterval(() => {
console.log(hello);
}, 1000)
}
function stop() {
window.clearInterval(timer); // 清除定时器
}
sayHello();
解析浏览器 URL
// 浏览器键入网址：http://localhost:8080/path/index.html?name=zhangfei&age=23#TOP
console.log(location);
/*
hash: '#TOP'
host: 'localhost:8080'
hostname: 'localhost'
href: 'http://localhost:8080/path/index.html?name=zhangfei&age=23#TOP'
origin: 'http://localhost:8080'
pathname: '/path/index.html'
port: '8080'
protocol: 'http'
search: '?name=zhangfei&age=23'
assign() 设置一个新 URL 地址
reload() 重新加载当前页
replace() 设置一个新的 URL 地址，与 assign() 不同的是，此方法替换的新页面不会被保存在会话历史 history 中
*/
浏览历史
-
length表示浏览历史列表中保存的元素数量，处于安全原因，脚本不能访问已保存的url -
back()后退 -
forward()前进
对于现代web页面来说，由于大量使用 AJAX 和页面交互，不建议使用 history 对象，影响用户体验。
浏览器和屏幕信息
常用信息：
-
appName浏览器官方名称 -
appCodeName浏览器内部“开发代号”名称 -
appVersion浏览器版本 -
cookieEnabled是否启用 cookie -
language用户的手先语言 -
onLine浏览器是否联网 -
oscpu当前操作系统类型 -
platform浏览器所在系统平台类型 -
userAgent浏览器的用户代理（user agent）字符串 -
plugins浏览器安装的所有插件
Screen
-
width屏幕宽度 -
height屏幕高度 -
colorDepth颜色位数 -
availHeight浏览器实际可用高度（排除像桌面任务栏这样特性所占用的空间） -
availWidth浏览器实际可用宽度（同上）
对话框
-
alert()向用户展示一条消息 -
confirm()向用户展示一条消息，并要求用户确认或取消，返回 true 或 false -
prompt()向用户展示一条消息，并要求用户输入字符，返回用户输入的字符串
document
window.document引用了Document对象，表示当前页面，可以说Document对象就是整个 DOM 树的根节点。
DOM
DOM 全称：文档对象模型 (Document Object Model)
DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
什么是 DOM Levels？
DOM 的不同规范版本，类似于 CSS2、CSS3
大部分现代浏览器都能很好的支持 DOM2，并且部分支持 DOM3
DOM4 已于2015年发布
DOM Level1
分为两部分，核心和HTML。提供了一些基本接口。
DOM Level2
提供了六种不同的规范，面向更为广泛。
DOM Level3
包含五种不同规范，进一步扩充。
Node 接口
Node是一个接口，许多DOM类型从这个接口继承，并允许类似地处理（或测试）这些各种类型。
常用属性
-
baseURI节点的绝对基值 URL -
childNodes包含了该节点的所有子节点的实时的Nodelist -
firstChild该节点的第一个子节点，如果没有返回null -
lastChild该节点的最后一个子节点，如果没有返回null -
nextSibling该节点同级的下一个节点，如果没有返回null -
nodeName该节点的名字，比如 '#document'、'#text'、'BODY'、'DIV' -
nodeType该节点类型对应的值Name Value ELEMENT_NODE 1 ATTRIBUTE_NODE 2 TEXT_NODE 3 CDATA_SECTION_NODE 4 ENTITY_REFERENCE_NODE 5 ENTITY_NODE 6 PROCESSING_INSTRUCTION_NODE 7 COMMENT_NODE 8 DOCUMENT_NODE 9 DOCUMENT_TYPE_NODE 10 DOCUMENT_FRAGMENT_NODE 11 NOTATION_NODE 12 -
nodeValue返回或设置该节点的值 -
ownerDocument返回这个元素属于的Document对象，如果没有则返回null -
parentNode当前节点的父节点，如果没有则返回null -
parentElement当前节点的父节点元素（通常返回值与parentNode相同），如果当前节点没有父节点或者说父节点不是一个元素, 返回null。 -
previousSibling当前节点同辈的前一个节点，没有则返回null -
textContent获取或设置一个标签内所有子节点及其后代的文本内容
常用方法
-
appendChild()将一个节点添加到指定父节点的子节点列表末尾 -
cloneNode()克隆一个节点（注意 id 冲突） -
hasChildNodes()判断当前节点是否包含子节点 -
insertBefore()将一个节点添加到指定父节点的子节点前头 -
removeChild()删除一个子节点，并返回删除的节点 -
replaceChild()用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点
Element 接口
Element 是非常通用的基类，所有 Document 对象下的对象都继承它. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性。
常用属性
-
attributes该元素所有属性节点的一个实时集合。该集合是一个NamedNodeMap对象 -
classList该元素的类属性的实时DOMTokenList集合 -
className获取或设置该元素的class -
clientHeight相当于：height + padding - 水平滚动条高度(如果存在) -
clientLeft相当于该元素左边框宽度 -
clientTop相当于该元素上边框宽度 -
clientWidth相当于：width + padding - 水平滚动条高度(如果存在) -
scrollHeight实际高度 -
scrollLeft该元素左侧到可见左侧的距离 -
scrollTop该元素顶部到可见顶部的距离 -
scrollWidth实际宽度 -
id该元素的id -
innerHTML设置或获取 HTML 语法表示的元素的后代 -
tagName当前元素的标签名
常用方法
-
addEventListener()将制定监听注册到该元素上 -
getAttribute()返回元素的某个属性值，没有则返回null或 空字符串 '' -
hasAttribute()判断该元素是否具有该属性 -
removeAttribute()从指定的元素中删除一个属性 -
removeEventListener()删除使用addEventListener()方法添加的事件 -
setAttribute()设置指定元素上的一个属性值
Event 接口
Event接口表示在DOM中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由API生成(例如指示动画已经完成运行的事件，视频已被暂停等等)。
常用属性
-
eventPhase当前事件流处于哪一个阶段 参考 -
target对事件起源目标的引用 -
type时间的类型 -
isTrusted事件是否由浏览器或脚本启动
常用方法
-
preventDefault()取消事件（如果该事件可取消） -
stopImmediatePropagation()阻止事件冒泡并且阻止相同事件的其他侦听器被调用 -
stopPropagation()阻止捕获和冒泡阶段中当前事件的进一步传播
Document 接口
Document 接口表示任何在浏览器中已经加载好的网页，并作为一个入口去操作网页内容（也就是DOM tree）
常用方法
-
getElementsByClassName()返回一个即时更新的HTMLCollection，包含了所有拥有指定 class 的子元素 -
getElementsByTagName()返回一个动态的包含所有指定标签名的元素的HTML集合HTMLCollection -
getElementById()返回一个指定 id 的元素 -
querySelector()返回与指定的选择器组匹配的元素的后代的第一个元素 -
querySelectorAll()返回与指定的选择器组匹配的文档中的元素列表NodeList，它包含所有元素的非活动节点 -
write()在文档中写入文本 -
createElement()创建新的元素
网友评论