笔记：DOM与BOM
DOM
DOM节点
①DOM节点12种类型保存于Node类型中。
②每个DOM节点都有nodeType、nodeName、nodeValue属性。
| nodeName | nodeType | nodeValue | |
|---|---|---|---|
| 文档节点 | #document | 9 | null |
| 元素节点 | 标签名 | 1 | null |
| 文本节点 | #text | 3 | 文本内容 |
DOM节点属性
element.childElementCount; // 子元素数量
element.childNodes; // 子节点
element.parentNode; // 父节点
element.previousSibling; // 前一个兄弟节点
element.previousElementSibling; // 前一个兄弟元素
element.nextSibling; // 后一个兄弟节点
element.nextElementSibling; // 后一个兄弟元素
element.firstChild; // 第一个子节点
element.firstElementChild; // 第一个子元素
element.lastChild; // 最后一个子节点
element.lastElementChild; // 最后一个子元素
DOM操作
element.appendChild(); // 新子节点插入末尾
element.insertBefore(); // 新子节点插入指定位置
element.replaceChild(); // 新子节点替换原节点
element.removeChild(); // 删除指定子节点
element.cloneNode(); // 克隆一个节点，可设置是否深克隆
element.normalize(); // 将空文本节点删除，合并兄弟文本节点
element.insertAdjacentHTML(); // 向元素插入指定HTML内容
element.insertAdjacentText(); // 向元素插入指定文本内容
documet节点
document.documentElement; // <html>元素
document.body; // <body>元素
document.head; // <head>元素
document.doctype; // <!DOCTYPE html>
document.title; // 页面标签标题
document.URL; // 页面完整URL
document.domain; // URL的域名
document.referrer; // 页面来源
document.forms; // 获取所有<form>元素
document.images; // 获取所有<img>元素
document.links; // 获取所有带href的<a>元素
document.getElementById(); // 按id属性获取单个元素
document.getElementsByTagName(); // 按元素标签获取多个元素
document.getElementsByName(); // 按name属性获取多个元素
document.querySelector(); // 按CSS查询规则获取单个元素
document.querySelectorAll(); // 按CSS查询规则获取多个元素
document.createElement(); // 创建一个元素
document.createTextNode(); // 创建一个文本节点
document.readyState; // 文档是否在加载，loading或complete
document.compatMode; // 文档渲染模式，CSS1Compat或BackCompat
document.characterSet; // 文档字符集
元素节点
①innerHTML创建的<script>标签是无效的。
element.属性名; // 获取或设置元素的标签属性
element.getAttribute(); // 获取元素的标签属性
element.setAttribute(); // 设置元素的标签属性
element.removeAttribute(); // 删除元素的标签属性
element.dataset; // 获取元素的自定义属性(data-)，属性名全被字母小写化
element.innerHTML; // 元素内的所有后代HTML内容
element.outerHTML; // 元素内的所有后代HTML内容，包含自身
element.innerText; // 元素内的文本内容
element.outerHTML; // 元素内的文本内容，包含自身
element.children; // 元素内的所有后代元素
element.classList; // 元素class数组，包含add(), contains(), remove(), toggle()等API操作class。
element.getElementsByClassName(); // 按元素class获取多个元素
element.activeElement; // 当前拥有焦点的元素
element.hasFocus(); // 元素是否拥有焦点
element.scrollIntoView(); // 将元素滚动到视口
element.contains(); // 是否是指定元素的祖先元素
element.compareDocumentPosition(); // 两元素的关系（后代、兄弟、祖先）
元素样式
①通过style属性修改或读取的样式是元素内联样式。
②读取元素计算后的样式，不可修改。
element.style; // style对象中包含CSS属性的键值对
element.style.cssText; // 元素style属性的字符串文本
element.style.getPropertyValue(); // 获取styles对象中CSS属性的字符串值
element.style.removeProperty(); // 删除style对象中CSS属性的键值对
element.style.setProperty(); // 设置style对象中CSS属性
document.defaultView.getComputedStyle(); // 获取元素计算后的样式属性
元素尺寸和定位
element.offsetWidth; // 元素可见宽度
element.offsetHeight; // 元素可见高度
element.offsetTop; // 元素顶部离被包含的父元素顶部距离
element.offsetLeft; // 元素左边离被包含的父元素左边距离
element.offsetParent; // 元素被包含的父元素
element.clientWidth; // 元素整体宽度
element.clientHeight; // 元素整体高度
element.scrollHeight; // 没有滚动条出现时，元素内容的总高度
element.scrollWidth; // 没有滚动条出现时，元素内容的总宽度
element.scrollTop; // 内容区左侧被隐藏的像素，可以改变滚动位置
element.scrollLeft; // 内容区顶部被隐藏的像素，可以改变滚动位置
element.getBoundingClientRect(); // 元素可见区域相对于视口的位置
MutationObserver
①MutationObserver接受一个回调函数，在DOM被修改时执行。可以监听整个DOM树、元素或元素属性等。
②observe()将实例关联DOM，可传入配置项，可关联多个DOM。
③回调函数收到第一个参数是MutationRecord数组，记录关联DOM发生的变化。第二个参数是mutationObserver返回变化后的关联DOM。
④disconnect()关闭所有关联DOM的回调。关闭后仍可重新关联DOM。
⑤takeRecords()清空并返回当前MutationRecord数组。
let observer = new MutationObserver((MutationRecord, mutationObserver) => {});
observer.observe(element, {attributes: true});
observer.disconnect();
observer.takeRecords();
元素事件
事件流
事件捕获阶段： 事件从最外层的祖先元素，向内传播捕获至目标后代元素。
事件目标阶段： 事件捕获到目标元素。
事件冒泡阶段： 目标后代元素会向上传导相同的触发事件至最外层的祖先元素。
事件委派： 将事件函数绑定给公共祖先元素，当其后代元素被触发事件时，统一执行公共祖先元素的事件函数。
事件函数
①事件函数的this指向绑定元素本身。
②绑定事件有两种方式：
1.将事件函数赋值给元素对应的事件属性。
2.使用addEventListener()和removeEventListener()方法。（IE9以下的浏览器不支持）
③一个元素可以绑定多个相同的事件函数，并且按顺序全部执行。
element.addEventListener('click', () => {}, false);
element.removeEventListener('click', () => {});
鼠标事件
element.onmousedown = () => {}; /* 鼠标按下 */
element.onmouseup = () => {}; /* 鼠标松开 */
element.onclick = () => {}; /* 单击 */
element.ondblclick = () => {}; /* 双击 */
element.onmousemove = () => {}; /* 鼠标移动 */
element.onmouseenter = () => {}; /* 鼠标移入（包括子元素） */
element.onmouseleave = () => {}; /* 鼠标移出 */
element.onmouseover = () => {}; /* 鼠标移入 */
element.onmouseout = () => {}; /* 鼠标移出 */
element.onmousewheel = () => {}; /* 鼠标滚轮时 */
键盘事件
element.onkeydown = () => {}; /* 按键被按下 */
element.onkeyup = () => {}; /* 按键被松开 */
element.ontextInput = () => {}; /* 字符被输入到可编辑区域 */
其他事件
element.onload = () => {}; /* 加载完脚本或图像 */
element.onunload = () => {}; /* 卸载完脚本或图像 */
element.onabort = () => {}; /* 加载脚本或图像中断 */
element.onerror = () => {}; /* 加载脚本或图像出错 */
element.onselect = () => {}; /* 文本框中的文本被选中时发生 */
element.onchange = () => {}; /* 文本域或复选框、单选框改变 */
element.onresize = () => {}; /* 窗口被缩放 */
element.onscroll = () => {}; /* 滚动条滚动时 */
element.onblur = () => {}; /* 元素失去焦点，不支持冒泡 */
element.onfocus = () => {}; /* 元素获取焦点，不支持冒泡 */
element.onfocusout = () => {}; /* 元素失去焦点，支持冒泡 */
element.onfocusin = () => {}; /* 元素获取焦点，支持冒泡 */
页面事件
element.oncontextmenu = () => {}; /* 自定义右击菜单 */
window.onbeforeunload = () => {}; /* 拦截页面被关闭，弹出弹窗确认 */
document.onDOMContentLoaded = () => {}; /* 页面的DOM树构建完毕 */
document.onreadystatechange = () => {};
window.onpageshow = () => {};
window.onpagehide = () => {};
window.onhashchange = () => {}; /* URL哈希值发生变化 */
设备事件
window.ondeviceorientation = () => {}; /* 设备陀螺仪 */
window.ondevicemotion = () => {}; /* 设备正在移动 */
element.ontouchstart = () => {}; /* 触摸开始，在mouseover和mousedown前触发 */
element.ontouchmove = () => {}; /* 触摸移动 */
element.ontouchend = () => {}; /* 触摸结束，在click后触发 */
element.ongesturestart = () => {}; /* 一个手指已经放在屏幕上，再把另一个手指放到屏幕上时触发 */
element.ongesturechange = () => {}; /* 任何一个手指在屏幕上的位置发生变化时触发 */
element.ongestureend = () => {}; /* 其中一个手指离开屏幕时触发 */
event对象
①浏览器传给事件函数的参数，是一个对象。
②IE浏览器的event对象不由浏览器传给事件函数，而是在window对象上。
鼠标相关
event.clientX; /* 鼠标指针在视口中的坐标 */
event.clientY;
event.pageX; /* 鼠标指针在页面中的坐标 */
event.pageY;
event.screenX; /* 鼠标指针在屏幕中的坐标 */
event.screenY;
event.wheelDelta; /* 鼠标滚轮滚动方向，火狐不支持 */
event.keyCode; /* 按键是否被按下 */
event.altKey;
event.shiftKey;
event.ctrlKey;
event.metaKey;
event.target; /* 触发事件的当前元素 */
event.type; /* 触发的事件类型 */
event.bubbles;
event.cancelable;
event.currentTarget; /* 触发事件的目标元素 */
event.defaultPrevented;
event.detail;
event.eventPhase; /* 事件流所处阶段 */
event.preventDefault(); /* 阻止事件默认行为，IE为event.returnValue */
event.stopImmediatePropagation(); /* 阻止事件冒泡，并且阻止该元素上其他同类事件的触发 */
event.stopPropagation(); /* 阻止事件冒泡，IE为event.cancelBubble */
event.trusted;
事件模拟
①模拟三种事件：UIEvent，MouseEvents和HTMLEvents。
②初始化event事件并触发即可模拟
const event = document.createEvent("MouseEvents");
const event = document.createEvent("UIEvent");
const event = document.createEvent("HTMLEvents");
event.initMouseEvent();
element.dispatchEvent(event);
element.click(); /* 模拟点击 */
element.focus(); /* 模拟获取焦点 */
element.blur(); /* 模拟失去焦点 */
BOM
window
①浏览器的窗口对象，提供了JavaScript接口，也是浏览器顶层对象。
window.top;
window.parent;
window.self;
window.name;
window.open(); // 打开一个新的浏览器窗口
window.close(); // 关闭当前的浏览器窗口
window.screenTop; // 浏览器窗口离屏幕顶部的CSS像素距离
window.screenLeft; // 浏览器窗口离屏幕左侧的CSS像素距离
window.moveTo(); // 移动浏览器窗口，相对于屏幕
window.moveBy(); // 移动浏览器窗口，相对于本身
window.devicePixelRatio; // 物理像素与CSS像素比
window.innerWidth; // 页面视口宽度
window.innerHeight; // 页面视口高度
window.outerWidth; // 浏览器窗口宽度
window.outerHeight; // 浏览器窗口高度
document.documentElement.clientWidth; // 页面视口宽度
document.documentElement.clientHeight; // 页面视口高度
window.resizeTo(); // 调整浏览器窗口大小
window.resizeBy(); // 调整浏览器窗口大小
window.pageXOffset; // 页面视口离整个页面顶部的距离
window.scrollX; // 页面视口离整个页面顶部的距离
window.pageYOffset; // 页面视口离整个页面左边的距离
window.scrollY; // 页面视口离整个页面左边的距离
window.scroll(); // 滚动页面，也可以传入配置对象指定滚动模式
window.scrollTo(); // 滚动页面，也可以传入配置对象指定滚动模式
window.scrollBy(); // 滚动页面，也可以传入配置对象指定滚动模式
window.alert(); // 浏览器警告框
window.prompt(); // 浏览器输入框
window.confirm(); // 浏览器确认框
window.print(); // 打印页面
window.setTimeout();
window.setInterval();
window.clearTimeout();
window.clearInterval();
navigator
①浏览器的信息，并提供了一些浏览器API。
②sendBeacon()用于向服务器异步POST上报一些数据，相比于AJAX，它可以保证数据有效送达，且不会阻塞页面的卸载或加载。降级方案为使用同步AJAX。
navigator.appCodeName; // 无关紧要
navigator.appName; // 浏览器全名
navigator.appVersion; // 无关紧要
navigator.bluetooth；
navigator.clearAppBadge();
navigator.clipboard；
navigator.connection; // 网络连接API
navigator.cookieEnabled; // 是否启用Cookie
navigator.credentials; // 凭据管理API
navigator.deviceMemory; // 设备内存大小(GB)
navigator.doNotTrack; // 用户的不跟踪设置
navigator.geolocation; // 地理位置API
navigator.getBattery(); // 系统电量API
navigator.getGamepads();
navigator.getInstalledRelatedApps();
navigator.getUserMedia(); // 可用媒体设备输入
navigator.hardwareConcurrency; // CPU核心数量
navigator.javaEnabled; // 是否启用Java
navigator.keyboard;
navigator.language; // 浏览器主语言
navigator.languages; // 浏览器偏好的语言数组
navigator.locks; // 锁API
navigator.managed;
navigator.maxTouchPoints; // 触摸屏最大支持触点数
navigator.mediaCapabilities; //
navigator.mediaDevices; // 可用的媒体设备
navigator.mediaSession;
navigator.mimeTypes; // 浏览器中注册的MIME类型数组
navigator.onLine; // 是否联网
navigator.pdfViewerEnabled;
navigator.permissions;
navigator.platform; // 浏览器运行的系统平台
navigator.plugins; // 浏览器安装的插件数组
navigator.presentation;
navigator.product; // 无关紧要
navigator.productSub; // 无关紧要
navigator.registerProtocolHandler();
navigator.requestMIDIAccess();
navigator.requestMediaKeySystemAccess();
navigator.scheduling;
navigator.sendBeacon(); // 通过POST请求将少量数据异步发送到服务器
navigator.serial;
navigator.serviceWorker;
navigator.setAppBadge();
navigator.storage;
navigator.unregisterProtocolHandler();
navigator.usb;
navigator.userActivation;
navigator.userAgent; // 用户代理，可判断不同浏览器环境
navigator.userAgentData;
navigator.vendor; // 无关紧要
navigator.vendorSub; // 无关紧要
navigator.vibrate(); // 触发设备振动
navigator.virtualKeyboard;
navigator.wakeLock;
navigator.webdriver;
navigator.webkitGetUserMedia();
navigator.webkitPersistentStorage;
navigator.webkitTemporaryStorage;
navigator.xr;
location
①浏览器的地址栏导航相关功能。
②URL组成：<protocol>//<username>:<password>@<hostname>:<port>/<pathname><search><hash>。
③URLSearchParams构造函数提供了解析search参数的API，但是兼容性略差。
location.hash;
location.host; // URL中host+port
location.hostname;
location.href; // 页面完整URL，修改其值页面重定向
location.pathname;
location.port;
location.protocol;
location.search;
location.username;
location.password;
location.origin; // URL中除去pathname及以后的部分
location.assign(); // 跳转到指定页面，生成历史记录
location.reload(); // 重新刷新当前页面，true清空缓存刷新
location.replace(); // 替换当前页面，不生成历史记录
history
①浏览器当前窗口的浏览历史记录，只在当次访问时有效，关闭即无效。
history.length; // 浏览器页面浏览个数
history.back(); // 浏览器页面后退一步
history.forward(); // 浏览器页面前进一步
history.go(); // 浏览器页面前进或后退几步
history.pushState(); // 向浏览器历史记录添加一条记录
history.replaceState(); // 向浏览器历史记录替换一条记录
history.scrollRestoration; // 页面刷新后，是否回到之前滚动条位置
screen
①用户屏幕、显示器信息。
screen.availHeight; // 屏幕像素减去系统组件的高度
screen.availWidth; // 屏幕像素减去系统组件的宽度
screen.availLeft; // 无系统组件的屏幕最左侧像素
screen.availTop; // 无系统组件的屏幕最顶端像素
screen.colorDepth; // 屏幕颜色位数
screen.pixelDepth; // 屏幕的位深
screen.height; // 屏幕高度
screen.width; // 屏幕宽度
screen.orientation; // 屏幕朝向对象
screen.isExtended; // 屏幕是否可扩展
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
