javascript 常用DOM操作整理
.选取了DOM操作中实用并常用的部分,省略了实用但有明显兼容性的部分
2.DOM属性和方法的类型归属可能并不完全准确
3.某些一般兼容性和特点做了标识(主要是ie8-9上下)
节点类型
节点类型 | 节点值 |
---|---|
标签节点(Element) | 1 |
属性节点(Attr) | 2 |
文本节点(Text) | 3 |
CDATA节点(CDATASetion) | 4 |
实体引用节点(EntityReference) | 5 |
实体节点(Entity) | 6 |
处理指令节点(ProcessingInstruction) | 7 |
注释节点(Comment) | 8 |
文档节点(Document) | 9 |
文档类型节点(DocumentType) | 10 |
文档片段节点(DocumentFragment) | 11 |
DTD声明节点(Notation) | 12 |
Node类型
属性 | 说明 |
---|---|
nodeType | 节点类型 |
nodeName | 节点名 |
nodeValue | 节点值 |
childNodes | 子节点 |
parentNode | 父节点 |
ownerDocument | 文档节点 |
previousSibling | 上一个节点 |
nextSibling | 下一个节点 |
firstChild | 第一个子节点 |
lastChild | 最后一个子节点 |
Document类型
属性 | 说明 |
---|---|
documentElement | html标签 |
head[兼容性不够] | head标签 |
body | body标签 |
URL | 当前页url |
referrer | 来源页url |
domain[可修改] | 页面域名 |
images | 所有图片集合 |
cookie | cookie信息 |
title | 页面标题 |
activeElement | 当前焦点元素 |
documentMode | 文档模式 |
readyState | 文档状态 |
doctype | 文档类型声明 |
scripts | 脚本集合 |
forms | form标签集合 |
children | 元素类型的子节点集合 |
defaultView | document关联的window对象 |
方法 | 说明 |
---|---|
getElementById() | 返回对应id的元素 |
getElementsByName() | 返回对应名称元素集合 |
getElementsByTagName() | 返回对应标签名元素集合 |
getElementsByClassName() | 返回指定类名的元素集合 |
querySelector() | 返回符合选择器的第一个元素 |
querySelectorAll() | 返回符合选择器的元素集合 |
createElement() | 创建元素节点 |
createTextNode() | 创建文本节点 |
createAttribute() | 创建属性节点 |
createComment() | 创建注释节点 |
createDocumentFragment() | 创建空的 DocumentFragment 对象 |
matchesSelector()[兼容性不够,需要前缀] | 该选择器是否符合元素匹配 |
write()[输出后光标不换行] | 文档文本写入 |
writeIn()[输出后光标换行] | 文档文本写入 |
implementation.hasFeature(特性,版本) | 特性监测 |
Element类型
属性 | 说明 |
---|---|
id | id |
className | 类名 |
title | 标题 |
style | 设置或返回元素的样式属性 |
innerHTML | 设置或者返回元素的内容 |
outerHTML[包含自身] | 设置或者返回元素的内容 |
textContent[ie-innerText] | 设置或返回文本内容 |
contentEditable | 设置或返回元素的可编辑状态 |
isContentEditable | 是否可编辑 |
childElementCount | 子元素节点个数 |
firstElementChild | 第一个子元素节点 |
lastElementChild | 最后一个子元素节点 |
previousElementSibling | 上一个元素节点 |
nextElementSibling | 下一个元素节点 |
方法 | 说明 | 返回 |
---|---|---|
focus() | 设置焦点 | |
blur() | 失去焦点 | |
appendChild(节点) | 在子节点列表之后插入 | 新增节点 |
insertBefore(节点,参照节点) | 在参照节点之前插入节点 | 插入节点 |
removeChild(节点) | 节点删除 | 被删节点 |
replaceChild(节点,被替换的节点) | 节点替换 | 被替换节点 |
cloneNode(布尔值) | 复制节点 | 克隆节点 |
importNode(节点,布尔值) | 从A文档中取得a节点,将其导入B文档(类似cloneNode方法) | |
contains(节点) | 该节点是否为调用节点的子级 | 布尔值 |
hasFocus() | 是否获得了焦点 | 布尔值 |
hasChildNodes() | 是否存在子节点 | 布尔值 |
isDefaultNamespace(url) | 是否指定了名称空间 | 布尔值 |
isEqualNode(节点) | 两个元素是否相等 | 布尔值 |
isSupported(特性,版本) | 是否支持某特性 | 布尔值 |
Attr类型
属性 | 说明 |
---|---|
name | 属性名 |
value | 属性值 |
isId | 是否为id类型 |
specified | 属性是否被指定 |
length | 属性长度 |
attributes | 属性集合 |
方法 | 说明 |
---|---|
getAttribute() | 获取属性值 |
getAttributeNode() | 获取属性节点 |
setAttribute() | 设置属性值 |
setAttributeNode() | 设置属性节点 |
removeAttribute() | 删除属性 |
removeAttributeNode()[ie不支持] | 删除属性节点 |
hasAttribute() | 是否存在指定的属性 |
hasAttributes() | 是否存在属性 |
Text类型
方法 | 说明 |
---|---|
appendData(文本) | 将text添加到节点的末尾 |
deleteData(位置,数量) | 从指定位置开始删除n个字符 |
insertData(位置,文本) | 从指定位置插入文本 |
replaceData(位置,数量,文本) | 用text替换从offset位置开始到offset+count为止处的文本 |
splitText(位置) | 从指定位置将当前文本节点分裂成两个文本节点 |
substringData(位置,数量) | 截取从offset位置开始到offset+count为止处的字符串 |
normalize() | 合并相邻文本节点,并删除空的文本节点 |
表格操作
table元素
属性方法 | 说明 |
---|---|
caption | caption元素指针 |
tBodies | tbody集合 |
tFoot | tfoot集合 |
tHead | thead元素 |
rows | 表格所有行集合 |
createTHead() | 创建 <thead> 元素,将其放到表格中,返回引用 |
createTFoot() | 创建 <tfoot> 元素,将其放到表格中,返回引用 |
createCaption() | 创建caption元素,将其放到表格中,返回引用 |
deleteTHead() | 删除thead元素 |
deleteTFoot() | 删除tfoot元素 |
deleteCaption() | 删除caption元素 |
deleteRow(pos) | 删除指定位置的行 |
insertRow(pos) | 向行集合中的指定位置插入一行 |
tbody元素
属性方法 | 说明 |
---|---|
rows | tbody所有行集合 |
deleteRow(pos) | 删除指定位置的行 |
insertRow(pos) | 向行集合中的指定位置插入一行,返回引用 |
tr元素
属性方法 | 说明 |
---|---|
cells | tr所有单元格集合 |
deleteCell(pos) | 删除指定位置的单元格 |
insertCell(pos) | 向单元格集合中的指定位置插入一个单元格,返回引用 |
样式操作
访问元素样式
- DOM样式——js通过dom.style只能访问直接样式属性,不能访问嵌入样式表和外部样式表
属性方法(dom.style) | 说明 |
---|---|
cssText | 返回style特性中所有样式的字符串形式 |
length | 返回元素中CSS属性数量 |
parentRule | 返回CSS信息的CSSRule对象 |
getPropertyCSSValue(name) | 返回属性值的CSSValue对象(包含cssText和cssValueType) |
getPropertyPriority(name) | 是否使用了!important属性 |
getPropertyValue(name) | 返回给定属性的字符串值 |
removeProperty(name) | 从样式中删除给定属性 |
setProperty(name,value,优先级) | 将给定属性设置为相应的值并加上优先级 |
- 计算样式——样式层叠后实际起用的样式
属性方法 | 说明 |
---|---|
document.defaultView.getComputedStyle(dom,伪元素字符串)[ie不支持] | 返回当前元素所有计算后的样式 |
dom.currentStyle[ie支持] | 返回当前元素所有计算后的样式 |
操作样式表
- document.styleSheets——应用于文档的所有样式表
属性(document.styleSheet[n]) | 说明 |
---|---|
cssRules[ie不支持] | 单个样式表中的所有样式规则 |
rules[ie支持] | 同上 |
insertRule(rule,index)[ie不支持] | 向cssRules集合中指定位置插入rule字符串 |
addRule(rule,index)[ie支持] | 同上 |
deleteRule(index)[ie不支持] | 删除cssRules集合中指定位置的规则 |
removeRule(index)[ie支持] | 同上 |
- document.styleSheets[n].cssRules/rules下
属性 | 说明 |
---|---|
cssText[ie不支持] | 整条样式规则的字符串 |
selectorText | 样式选择符 |
style | 具体样式对象 |
大小和偏移
属性 | 说明 |
---|---|
offsetParent | 偏移的父容器 |
getBoundingClientRect() | 获取页面元素实际位置和宽高(返回属性对象) |
offsetWidth | 元素宽度(可视内容区+滚动条+内边距+边框) |
offsetHeight | 元素高度(可视内容区+滚动条+内边距+边框) |
offsetLeft | 与相邻父级的左距离 |
offsetTop | 与相邻父级的上距离 |
clientWidth | 元素宽度(可视内容区+内边距) |
clientHeight | 元素高度(可视内容区+内边距) |
clientLeft | 内边距边缘与边框边缘的距离(左边框) |
clientTop | 内边距边缘与边框边缘的距离(上边框) |
scrollWidth | 元素宽度(可视内容区+滚动内容区+内边距) |
scrollHeight | 元素高度(可视内容区+滚动内容区+内边距) |
scrollLeft | 隐藏的滚动宽度(待滚动宽度) |
scrollTop | 隐藏的滚动高度(待滚动宽度) |
兼容性
clientWidth/clientHeight和scrollWidth/scrollHeight存在游览器差异
学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!
javascript 常用DOM操作整理的更多相关文章
- js的DOM操作整理(整理)
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- 第一百一十六节,JavaScript,DOM操作样式
JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检 ...
- Python之路day13 web 前端(JavaScript,DOM操作)
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- 第一百一十五节,JavaScript,DOM操作表格
JavaScript,DOM操作表格 学习要点: 1.操作表格 DOM在操作生成HTML上,还是比较简明的.不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了.本章主要了解一下DO ...
- Javascript的DOM操作 - 你真的了解吗?
摘要 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维导图方便阅读,同时加入性能上的一些问题. 前言 在前端开发的过程中,javascript极为重 ...
- js常用DOM操作
在博客园看到了苏夏写的常用DOM整理文章,地址:http://www.cnblogs.com/cabbagen/p/4579412.html,然后抽时间都试了一下这些常用的DOM操作.在这里记录一下. ...
- (转)Javascript的DOM操作 - 性能优化
转载:https://my.oschina.net/blogshi/blog/198910 摘要: 想稍微系统的说说对于DOM的操作,把Javascript和jQuery常用操作DOM的内容归纳成思维 ...
- JavaScript之DOM操作,事件操作,节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
随机推荐
- lalala
<script type="text/javascript"> var a_idx = 0; var b_idx = 0; var a = new Array(&quo ...
- BZOJ4584 & 洛谷3643 & UOJ204:[APIO2016]划艇——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=4584 https://www.luogu.org/problemnew/show/P3643 ht ...
- bzoj3157: 国王奇遇记
emmm...... 直接看题解好了: BZOJ-3157. 国王奇遇记 – Miskcoo's Space O(m)不懂扔掉 总之,给我们另一个处理复杂求和的方法: 找到函数之间的递推公式! 这里用 ...
- Codeforces Round #345 (Div. 2) B
B. Beautiful Paintings time limit per test 1 second memory limit per test 256 megabytes input standa ...
- Naming Company CodeForces - 794C
Oleg the client and Igor the analyst are good friends. However, sometimes they argue over little thi ...
- The Shortest Path in Nya Graph HDU - 4725
Problem Description This is a very easy problem, your task is just calculate el camino mas corto en ...
- HDU1078记忆化搜索
FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- Moq/moq4
moq The most popular and friendly mocking framework for .NET var mock = new Mock<ILoveThisFramewo ...
- 如何生成Java Key以及sign一个jar
1. 生成Java Key: keytool -genkey -alias mydomain -keyalg RSA -keystore keystore.jks -keysize mydomain ...
- 设置zookeeper开机自启动
1.进入到/etc/init.d目录下,新建一个zookeeper脚本 cd /etc/init.d vi zookeeper #!/bin/bash #chkconfig:2345 20 90 #d ...