文档对象
yuhuo2022-02-14JavaScriptJavaScript对象
Node 类
Node 接口 - JavaScript 教程 - 网道 (wangdoc.com)
1. 静态属性
| 静态属性 | 描述 |
|---|---|
| ELEMENT_NODE | 1，元素节点类型 |
| ATTRIBUTE_NODE | 2，属性节点类型 |
| TEXT_NODE | 3，文本节点类型 |
| COMMENT_NODE | 8，注释节点类型 |
| DOCUMENT_NODE | 9，文档节点类型 |
| DOCUMENT_TYPE_NODE | 10，文档类型节点类型 |
| DOCUMENT_FRAGMENT_NODE | 11，文档片断节点类型 |
2. 原型属性
| 原型属性 | 描述 |
|---|---|
| nodeType | 节点类型 |
| nodeName | 节点名称 |
| nodeValue | 当前节点本身的文本值，只有文本节点、注释节点和属性节点可读写。其他类型的节点返回null，设置无效。 |
| textContent | 返回或设置当前节点和它的所有后代节点的文本内容（包含隐藏的元素，style，script标签） |
| baseURI | 当前页面的 url |
| ownerDocument | 当前节点所在的顶层文档对象，即 document 对象（document.ownerDocument 返回 null） |
| nextSibling | 后一个同级节点，无则返回 null |
| previousSibling | 前一个同级节点，无则返回 null |
| parentNode | 父节点 |
| parentElement | 父元素节点，如没有父节点或父节点不是元素节点，则返回 null |
| firstChild | 第一个子节点 |
| lastChild | 最后一个子节点 |
| childNodes | 包含所有子节点的 NodeList 对象（动态集合） |
| isConnected | 当前节点是否在文档之中 |
不同节点类型对应的节点名称
- 文档节点（document）：
#document - 元素节点（element）：大写的标签名
- 属性节点（attr）：属性的名称
- 文本节点（text）：
#text - 文档片断节点（DocumentFragment）：
#document-fragment - 文档类型节点（DocumentType）：文档的类型
- 注释节点（Comment）：
#comment
3. 原型方法
| 原型方法 | 描述 |
|---|---|
| appendChild(targetNode) | 添加 / 移动目标节点至当前节点的最后一个子节点 |
| hasChildNodes() | 是否有子节点 |
| cloneNode(isCloneWithChild) | 克隆当前节点，布尔值参数表示是否同时克隆子节点。 返回克隆出来的新节点，不在当前文档中，需要另外添加进去。 克隆时不会携带在当前节点的事件回调函数。 |
| insertBefore(targetNode, referenceNode) | 将目标节点添加/ 移动至父节点内参考节点的前面 |
| removeChild(childNode) | 移除子节点，返回被移除的子节点 |
| replaceChild(newChild, oldChild) | 替换子节点，返回被替换的子节点 |
| contains(targetNode) | 判断目标节点是否为当前节点，或当前节点的子代/后代节点 |
| compareDocumentPosition(targetNode) | 返回数字，表示目标节点与当前节点的关系 |
| isEqualNode(targetNode) | 判断当前节点和目标节点是否类型相同、属性相同、子节点相同 |
| isSameNode(targetNode) | 判断当前节点和目标节点是否为同一个节点 |
| normalize() | 清理当前节点内部所有空的文本节点，合并毗邻的文本节点 |
| getRootNode() | 返回当前节点所在的顶层文档对象，即 document 对象 |
ParentNode 类
只有元素节点、文档节点和文档片段节点拥有子节点，因此只有这三类节点会继承 ParentNode 类。
ParentNode 接口，ChildNode 接口 - JavaScript 教程 - 网道 (wangdoc.com)
1. 原型属性
| 原型属性 | 描述 |
|---|---|
| children | 包含所有元素子节点的 HTMLCollection 对象（不包括其他类型的子节点） |
| firstElementChild | 第一个元素子节点 |
| lastElementChild | 最后一个元素子节点 |
| childElementCount | 所有元素子节点的数目 |
2. 原型方法
| 原型方法 | 描述 |
|---|---|
| append(node/str...) | 添加 / 移动一个或多个元素/文本节点至当前节点的最后一个子节点 |
| prepend(node/str...) | 添加 / 移动一个或多个元素/文本节点至当前节点的第一个子节点 |
ChildNode 类
1. 原型方法
| 原型属性 | 描述 |
|---|---|
| remove() | 从父节点移除当前节点 |
| before(node/str...) | 添加 / 移动一个或多个元素/文本节点到当前节点的同级前面 |
| after(node/str...) | 添加 / 移动一个或多个元素/文本节点到当前节点的同级后面 |
| replaceWith(node/str...) | 使用元素/文本节点替换当前节点 |
NodeList 类
节点对象集合
- 动态集合：Node.propotype.childNodes（除此之外，其他情况都是静态集合）
- 静态集合：document.querySelectorAll()....
NodeList 接口，HTMLCollection 接口 - JavaScript 教程 - 网道 (wangdoc.com)
1. 原型属性
| 原型属性 | 描述 |
|---|---|
| length | 节点的数量 |
2. 原型方法
| 原型方法 | 描述 |
|---|---|
| forEach((item, index, list)=>{ }) | 遍历节点集合 |
| item(index) | 返回指定位置的节点对象，一般直接使用方括号，如 list[0] |
| keys() | key 组成的可遍历对象，用于 for...of |
| values() | value 组成的可遍历对象，用于 for...of |
| entries() | [ key, value] 组成的可遍历对象，用于 for...of |
HTMLCollection 类
元素节点对象集合，都是动态集合
1. 原型属性
| 原型属性 | 描述 |
|---|---|
| length | 节点的数量 |
| [id/name] | 根据 id/name 找到相应属性值的第一个元素节点对象 |
2. 原型方法
| 原型方法 | 描述 |
|---|---|
| item(index) | 返回指定位置的元素节点对象，一般直接使用方括号，如 list[0] |
| namedItem(id/name) | 根据 id/name 找到相应属性值的第一个元素节点对象 |
DOMImplementation 类
1. 原型方法
| 原型方法 | 描述 |
|---|---|
| createDocument() | 创建一个 XML 文档 |
| createHTMLDocument() | 创建一个 HTML 文档 |
| createDocumentType() | 创建一个 DocumentType 对象 |
Document 类
Document 节点 - JavaScript 教程 - 网道 (wangdoc.com)
文档对象，代表整个文档，继承了 Node，ParentNode，EventTarget 类。
1. 对象属性
| 对象属性 | 描述 | |
|---|---|---|
| 元数据 | characterSet | 字符集编码 |
| compatMode | 兼容性模式：CSS1Compat 标准模式，BackCompat 怪异模式（设置了 DOCTYPE，一般为 CSS1Compat ） | |
| referrer | 来源，与 http 请求标头的 Referer 相同（注意单词拼写不同） | |
| lastModified | 最后修改时间，与 http 请求标头的 Last-Modified 相同（无则返回当前时间） | |
| documentURI | url | |
| URL | url | |
| domain | 域名（只能为当前域或父域，仅在不同子域的窗口通信跨域时使用，不会影响接口跨域，cookie / localStorage / sessionStorage 的访问） | |
| cookie | 获取或设置当前域和父域的 cookie | |
| title | 标题 | |
| dir | 文本方向 | |
| designMode | 是否可编辑：on，off（默认） | |
| ============== | ============== | |
| 状态 | readyState | 就绪状态： 1. loading：解析 HTML 代码，遇到无 defer 和 async 属性的 script 则暂停解析，执行脚本； 2. interactive：解析完成，开始加载图片、样式表、字体文件等外部资源； 3. complete：外部资源全部加载完成； |
| hidden | 是否可见（窗口最小化、浏览器切换了 Tab ，或被完全遮挡时为 true） | |
| visibilityState | 可见状态： visible 页面可见； hidden 页面不可见； prerender 渲染中，对用户不可见； unloaded 从内存卸载了； | |
| fullscreenEnabled | 是否支持全屏模式 | |
| ============== | ============== | |
| 节点对象 | doctype | <DOCTYPE> 节点的 DocumentType 对象 |
| documentElement | <html> 节点的 HTMLElement 对象（又称根节点） | |
| head | <head> 节点的 HTMLHeadElement 对象 | |
| body | <body> 节点的 HTMLBodyElement 对象 | |
| currentScript | 当前脚本所在的<script> 节点的 HTMLScriptElement 对象 | |
| scrollingElement | 滚动元素的 HTMLElement 对象，标准模式下返回 <html> 节点 | |
| activeElement | 获得当前焦点的节点的 HTMLElement 对象，无则返回 <body> 节点或 null | |
| fullscreenElement | 当前以全屏状态展示的元素节点的 HTMLElement 对象，无则返回 null | |
| ============== | ============== | |
| 节点对象集合 | links | 所有设定了 href 属性的 <a> 及 <area> 节点的 HTMLCollection 对象 |
| forms | 所有 <form> 节点的 HTMLCollection 对象 | |
| images | 所有 <img> 节点的 HTMLCollection 对象 | |
| embeds | 所有<embed> 节点的 HTMLCollection 对象 | |
| plugins | 所有<embed> 节点的 HTMLCollection 对象 | |
| scripts | 所有<scripts> 节点 HTMLCollection 对象 | |
| styleSheets | 所有内嵌或引入的 CSS 样式表的 StyleSheetList 对象 | |
| ============== | ============== | |
| 引用对象 | location | location 对象 |
| defaultView | window 对象 | |
| implementation | DOMImplementation 对象 |
2. 对象方法
| 对象方法 | 描述 | |
|---|---|---|
| 写文档 | open() | 清除文档，打开新的输出流 |
| write(str1, str2...) | 向文档追加写入html内容，如当前无输出流会先隐式调用 open 方法 | |
| writeln(str1, str2...) | 追加写入内容和换行符 | |
| close() | 关闭输出流 | |
| ============== | ============== | |
| 获取元素 | querySelector(selector) | 返回匹配 CSS 选择器的第一个元素节点对象（不支持伪元素和伪类） |
| querySelectorAll(selector) | 返回匹配 CSS 选择器的所有元素节点的 NodeList 对象 | |
| getElementById(id) | 返回指定 id 名的元素节点对象 | |
| getElementsByName(name) | 返回指定 name 名的所有元素节点的 NodeList 对象 | |
| getElementsByClassName(className) | 返回包含指定 class 名的所有元素节点的 HTMLCollection 对象 （参数可以是多个 class，空格分隔，不区分顺序，如 "foo bar"） | |
| getElementsByTagName(tagName) | 返回指定 HTML 标签名的所有元素节点的 HTMLCollection 对象 （不区分大小写） | |
| elementFromPoint(xNum, yNum) | 返回位于页面指定位置最上层元素节点的 HTMLElement 对象 | |
| elementsFromPoint(xNum, yNum) | 返回位于页面指定位置所有元素节点的 Array 对象 | |
| createNodeIterator(node, type) | 返回一个子节点遍历器 | |
| createTreeWalker(node, type) | 返回一个 DOM 的子树遍历器 | |
| ============== | ============== | |
| 创建元素 | createElement(tagName) | 返回新生成的元素节点的 HTMLElement 对象（可以是自定义的标签名） |
| createTextNode(text) | 返回新生成的文本节点的 Text 对象 | |
| createAttribute(attrName) | 返回新生成的属性节点的 Attr 对象 | |
| createComment(data) | 返回新生成的注释节点的 Comment 对象 | |
| createDocumentFragment() | 返回新生成的文档片段的 DocumentFragment 对象 | |
| ============== | ============== | |
| 拷贝元素 | adoptNode(externalNode) | 将某个节点及其子节点，从原来所在的文档（如 DocumentFragment 或 iframe 里的 document）里面剪切到当前 document 对象，返回新归属后的节点。此时只是改变节点归属，还需要 appendChild 之类的方法插入当前文档树。 |
| importNode(externalNode, deep) | 同 adoptNode 方法，其中剪切改为拷贝。 | |
| ============== | ============== | |
| 其他 | exitFullscreen() | 退出全屏（按 ESC ，F11 键也可退出全屏） |
| hasFocus() | 返回当前文档之中是否有元素被激活或获得焦点 | |
| getSelection() | 返回 Selection 对象 getSelection().toString() 获取当前选择的文本 | |
| execCommand(command[, showUI, value]) | 对当前焦点元素或文档执行命令， command 取值：selectAll 全选，print 打印，copy 复制，cut 剪切，delete 删除... | |
| queryCommandSupported(command) | 返回浏览器是否支持某个命令 | |
| queryCommandEnabled(command) | 返回某个命令当前是否可用（如 copy 命令需要当前有选中文本才可用） |
3. cookie
Cookie - JavaScript 教程 - 网道 (wangdoc.com)
获取 cookie，返回所有 cookie 值，以分号隔开，示例：
document.cookie → "a=1; b=2; c"
设置 cookie，一次只能设置一个，示例：
document.cookie = "a=2;max-age=36000;sameSite=none;secure";
属性项：
- path：关联路径，默认当前文档路径；
- domain：关联域名，默认当前文档域名，只能设置为当前域名或父域名；
- max-age：有效时长，以秒形式从创建时计算，默认当前会话；
- expires：过期时间，GMT 格式字符串，如：“Fri, 22 Mar 2024 07:59:29 GMT”，可以通过
new Date().toUTCString()获取； - secure：默认 false，为 true 时只有安全连接（https）时才发送 cookie；
- httpOnly：默认 false，为 true 时只能在请求中携带和设置，Js 无法获取和设置；
- samesite：第三方 cookie 限制
- Strict：完全禁止
- Lax：仅跨站点导航到目标网址的 GET 请求时携带（默认）
- None：无限制（必须同时设置 secure 才有效），后续将被禁止
注意1
跨域请求默认不携带 cookie，需要在请求中设置 withCredentials: true，并且服务端设置响应头 Access-Control-Allow-Credentials: true 才允许携带；
客户端只能获取或设置当前页面域名或父域名的 cookie，服务端只能获取或设置当前接口域名或父域名的 cookie。
注意2
假设当前在 one.yh.com 站点下，并且浏览器中保存了 yh.com、one.yh.com、file.one.yh.com、two.yh.com、yuhuo.com 5 种域名的 cookie。
- 发起 one.yh.com/xx 的请求时，携带 one.yh.com 和 yh.com 的 cookie；
- 发起 yh.com/xx 的请求时，跨域，携带 yh.com 的 cookie；
- 发起 file.one.yh.com/xx 的请求时，跨域，携带 file.one.yh.com、one.yh.com 和 yh.com 的 cookie；
- 发起 two.yh.com/xx 的请求时，跨域，携带 two.yh.com 和 yh.com 的 cookie；
- 发起 yuhuo.com/xx 的请求时，第三方跨域，只能携带 yuhuo.com 中 sameSite=None 的 cookie（服务端也只能设置 sameSite=None 的 cookie）
4. 全屏
相关事件，属性和方法记录的位置比较分散，以下合并展示
var box = document.getElementById("box");
// 支持开启全屏模式，开启全屏
function fullscreen(event) {
if(document.fullscreenEnabled) {
box.requestFullscreen()
}
}
// 当前存在全屏元素，退出全屏
function exitscreen() {
if(document.fullscreenElement) {
document.exitFullscreen()
}
}
// 全屏状态改变成功事件
box.addEventListener("fullscreenchange",function (event) {
console.log(event)
});
// 全屏状态改变失败事件
box.addEventListener("fullscreenerror",function (event) {
console.log(event)
});
注意
通过 F11 键进入或退出全屏，以上事件，属性和方法都无效，可以说两种全屏不相干。
DocumentType 类
文档类型声明：Document Type Declaration，简称 DTD
1. 创建对象
<!DOCTYPE html>
2. 对象属性
| 对象属性 | 描述 |
|---|---|
| name | 文档类型，一般为 "html" |
Attr 类
属性对象，继承了 Node 类。
1. 原型属性
| 原型属性 | 描述 |
|---|---|
| name | 返回属性名 |
| value | 属性值 |
Text 类
文本对象，继承了 Node 类。
1. 创建对象
var text = new Text("文本");
2. 原型属性
| 原型属性 | 描述 |
|---|---|
| data | 文本内容 |
| wholeText | 返回当前文本节点与毗邻的文本节点，作为一个整体返回文本内容 |
| length | 返回文本内容长度 |
| nextElementSibling | 返回紧跟在当前文本节点后面的同级元素节点 |
| previousElementSibling | 返回紧跟在当前文本节点前面的同级元素节点 |
2. 原型方法
| 原型方法 | 描述 |
|---|---|
| appendData(data) | 在尾部追加文本 |
| deleteData(index, length) | 根据指定位置和长度删除子字符串 |
| insertData(index, data) | 在指定位置插入文本 |
| replaceData(index, length, data) | 在指定位置的指定长度替换成新文本 |
| subStringData(index, length) | 根据指定位置和长度获取子字符串 |
| splitText(index) | 在指定位置分割为两个毗邻的文本节点，之前的文本节点变为前半部分，该方法返回后半部分 |
DocumentFragment 类
文档片段对象，继承了 Node 类，ParentNode。
1. 创建对象
var docFrag = document.createDocumentFragment();
var docFrag = new DocumentFragment();
注意
DocumentFragment 节点本身不能被插入当前文档。当它作为 appendChild()、insertBefore()、replaceChild() 等方法的参数时，是它的所有子节点插入当前文档，而不是它自身。一旦 DocumentFragment 节点被添加进当前文档，它自身就变成了空节点，可以被再次使用。如果想要保存 DocumentFragment 节点的内容，可以使用 cloneNode 方法。
HTMLElement 类
Element 节点 - JavaScript 教程 - 网道 (wangdoc.com)
元素对象，继承了 Node 类 和 Element 类。（以下部分属性和方法来自 Element 类，还未做区分）
1. 原型属性
| 原型属性 | 描述 | |
|---|---|---|
| 读写 | id | 元素 id 值 |
| className | 元素的 class 列表字符串，如 “box content” | |
| title | 鼠标悬浮元素时弹出的文字提示框 | |
| innerHTML | 元素所有子元素的 HTML 代码 | |
| outerHTML | 元素本身和所有子元素的 HTML 代码（设置 outerHTML 后，变量依然指向原本的元素对象，即被替换的元素还存在内存中；没有父节点时设置 outerHTML 会报错；） | |
| innerText | 返回或设置元素的子文本（与 Node.textContent 的区别：不包含隐藏的元素，style，script标签的文本内容） | |
| scrollLeft | 元素的水平滚动条向右侧滚动的像素数量 | |
| scrollTop | 元素的垂直滚动条向下侧滚动的像素数量 | |
| hidden 布尔 | 元素是否隐藏（为 true 时系统自动添加一个优先级最低的样式 display: none，即当设定了 display 的有效值，则 hidden 的效果就会被覆盖） | |
| draggable | 元素是否可拖动（不同元素默认值不同，如 img 默认为 true，div 默认为 false） | |
| contentEditable | 元素内容是否可编辑：“true” 可编辑，"false" 不可编辑，"inherit" 继承父元素（注意，取值是字符串，非布尔值） | |
| spellcheck | 是否开启拼写检查，默认 true | |
| tabIndex | Tab 键切换焦点顺序：先遍历从小到大的正整数，再遍历 0（无法获取焦点的元素 tabIndex 默认为 -1，当需要改为允许获取焦点时，可设 tabIndex 为 0 或正整数） | |
| accessKey | 选择元素的快捷键（比如 element.accessKey = "a"，则按 Alt + a 键就能转移焦点到该元素上） | |
| dir | 元素的文字方向：ltr 从左到右，rtl 从右到左 | |
| lang | 元素的语言设置 | |
| ============== | ============== | |
| 只读 | isContentEditable | 返回元素内容是否可编辑 |
| tagName | 返回元素的大写标签名 | |
| classList | 返回元素所有 class 的 DOMTokenList 对象 | |
| attributes | 返回元素所有属性节点的 NamedNodeMap 对象 | |
| dataset | 返回元素所有 data- 属性的 DOMStringMap 对象 | |
| style | 返回元素样式的 CSSStyleDeclaration 对象 | |
| ============== | ============== | |
| children | 返回元素所有子元素的 HTMLCollection 对象 | |
| childElementCount | 返回元素所有子元素的个数 | |
| firstElementChild | 返回元素的第一个子元素 | |
| lastElementChild | 返回元素的最后一个子元素 | |
| nextElementSibling | 返回元素的后一个同级元素 | |
| previousElementSibling | 返回元素的前一个同级元素 | |
| ============== | ============== | |
| clientWidth | 返回元素宽度（包括 padding，不包括 border，marging 和滚动条；只对块级元素有效；整数；html 元素返回的是视口的宽高） | |
| clientHeight | 返回元素高度（同上） | |
| offsetWidth | 返回元素的宽度（包括 padding，border 和滚动条） | |
| offsetHeight | 返回元素的高度（同上） | |
| scrollWidth | 返回元素总宽度（包括 padding，溢出部分和伪元素，不包括 border，marging 和滚动条） | |
| scrollHeight | 返回元素总高度（同上） | |
| clientLeft | 返回元素左边框的宽度（只对块级元素有效，整数） | |
| clientTop | 返回元素顶边框的宽度（同 clientLeft） | |
| offsetLeft | 返回元素左上角相对于 Element.offsetParent 节点的水平位移 | |
| offsetTop | 返回元素左上角相对于 Element.offsetParent 节点的垂直位移 | |
| scrollLeft | 返回元素左滚动过的距离 | |
| scrollTop | 返回元素顶滚动过的距离 | |
| offsetParent | 返回最靠近当前元素的、并且 CSS 的 position 属性不等于 static 的上层元素 |
2. 原型方法
| 原型方法 | 描述 | |
|---|---|---|
| 属性操作 | getAttribute(name) | 获取指定属性的字符串值 |
| getAttributeNames() | 获取所有属性的名称 | |
| setAttribute(name, value) | 设置属性值 | |
| hasAttribute(name) | 判断是否包含指定属性 | |
| hasAttributes() | 判断是否包含任意属性 | |
| removeAttribute(name) | 移除属性 | |
| ============== | ============== | |
| 获取元素 | querySelector(selector) | 返回匹配 CSS 选择器的第一个后代元素节点对象（不支持伪元素和伪类） |
| querySelectorAll(selector) | 返回匹配 CSS 选择器的所有后代元素节点的 NodeList 对象 | |
| getElementsByClassName(className) | 返回包含指定 class 名的所有后代元素节点的 HTMLCollection 对象 （参数可以是多个 class，空格分隔，不区分顺序，如 "foo bar"） | |
| getElementsByTagName(tagName) | 返回指定 HTML 标签名的所有后代元素节点的 HTMLCollection 对象 （不区分大小写） | |
| closest(selector) | 返回匹配 CSS 选择器的最接近当前节点的一个祖先节点（包括当前节点本身 | |
| matches(selector) | 判断元素是否匹配 CSS 选择器 | |
| ============== | ============== | |
| 插入元素 | insertAdjacentElement(position, element) | 相对于当前元素的指定位置，插入一个新的节点 position：beforebegin 之前，afterend 之后，afterbegin 第一个子元素，beforeend 最后一个子元素 |
| insertAdjacentHTML(position, html) | 相对于当前元素的指定位置，插入一个 HTML 字符串，解析成新节点 | |
| insertAdjacentText(position, text) | 相对于当前元素的指定位置，插入一个文本 | |
| ============== | ============== | |
| 矩形信息 | getBoundingClientRect() | 返回元素矩形信息的 DOMRect 对象（块级元素） |
| getClientRects() | 返回元素所有矩形信息的 DOMRectList 对象（行内元素，一行对应一个矩形） | |
| ============== | ============== | |
| 事件 | scrollIntoView(type) | 滚动当前元素，进入浏览器的可见区域，type：true 顶部对齐（默认），false 底部对齐 |
| `scrollTo({top: number, left: number, behavior: 'smooth' | 'auto' })` | |
| focus({preventScroll: false}) | 获取焦点，通过 preventScroll 设置是否阻止滚动到可见区域 | |
| blur() | 失去焦点 | |
| click() | 点击元素 |
DOMTokenList 类
1. 原型属性
| 原型属性 | 描述 |
|---|---|
| length | class 的数量 |
| [index] | 返回指定位置的类 |
2. 原型方法
| 原型方法 | 描述 |
|---|---|
| add(class) | 添加指定类 |
| remove(class) | 移除指定类 |
| toggle(class) | 类存在就移除，不存在就添加 |
| contains(class) | 返回是否包含指定类 |
| item(index) | 返回指定位置的类 |
| toString() | 返回 class 列表字符串，如 “box content” |
NamedNodeMap 类
1. 原型属性
| 原型属性 | 描述 |
|---|---|
| [key] | 返回对应属性名的 Attr 对象 |
| [index] | 返回对应顺序的 Attr 对象 |
DOMStringMap 类
1. 原型属性
| 原型属性 | 描述 |
|---|---|
| [key] | 对应 data-[key] 属性的值，进行增删改查 |
CSSStyleDeclaration
CSSStyleDeclaration 类
1. 获取对象
var ele = document.querySelector(".box");
// 内联样式
var cssStyle = ele.style;
// 最终样式
var cssStyle = window.getComputedStyle(ele);
2. 原型属性
| 原型属性 | 描述 |
|---|---|
| length | 样式数量 |
| cssText | 内联样式字符串 |
| parentRule | 返回当前规则所属样式块的 CSSRule 对象 |
| [index] | 返回获取指定位置的样式属性名 |
| [font-size] | 样式属性值（属性名为原始写法，需要用方括号） |
| fontSize | 样式属性值（属性名为驼峰写法） |
| ... |
3. 原型方法
| 原型属性 | 描述 |
|---|---|
| getPropertyPriority(name) | 判断样式属性是否有设置 important，有则返回 “important”，无则返回 “” |
| getPropertyValue(name) | 获取指定样式属性值 |
| item(index) | 获取指定位置的样式属性名 |
| removeProperty(name) | 移除指定样式属性 |
| setProperty(name[, value, priority]) | 根据属性名设置属性值，value 省略则默认空字符串，priority 唯一合法值是 important |
注意
- 返回的 CSS 值都是绝对单位，如长度都是 px，颜色是 rgb(#, #, #) 或 rgba(#, #, #, #)；
- window.getComputedStyle 方式返回的 CSSStyleDeclaration 对象的 cssText 属性为 undefined；
Css 对象
1. 对象方法
| 原型属性 | 描述 |
|---|---|
| escape(selector) | 转义选择器中的特殊字符 |
| supports(name, value) supports("name: value") | 判断当前环境是否支持指定 css 属性名及属性值 |