原生JS DOM操作方法汇总
创建节点
1. document.createElement(tagname)
创建一个由tagName决定的HTML元素
2. document.createTextNode(data)
创建一个文本节点,文本内容为data
3. document.createDocumentFragment()
创建一个空白的文档片段。文档片段是 DocumentFragment
对象的引用。是DOM节点,但并不是主DOM树的一部分。一般利用文档片段创建一个临时节点,将需要添加到DOM树中的节点先添加到文档片段中,再将文档片段添加到DOM树中,这个时候文档片段中的子元素会替换文档片段。
由于文档片段是存在于内存中的,所以将子元素添加到文档片段中不会引起 reflow(回流)
。能够起到性能优化的效果。
通过节点关系获取节点
1. Node.parentNode
返回指定节点在DOM树中的父节点。
2. Node.parentElement
返回指定节点在DOM树中的父元素节点,如果没有父元素或者父元素不是一个元素节点
,则返回null。
3. Node.childNodes
返回指定节点的所有子元素的集合。包括文本节点
等。
4. Node.children
返回指定节点的所有子元素的集合。只包含元素节点
。
5. Node.nextSibling
返回指定节点的下一个兄弟节点。包括文本节点
等。
6. Node.nextElementSibling
返回指定节点的下一个兄弟元素节点
。
7. Node.previousSibling
返回指定节点的上一个兄弟节点。包括文本节点
等。
8. Node.previousElementSibling
返回指定节点的上一个兄弟元素节点
。
9. Node.firstChild
返回指定节点的第一个子节点。包括文本节点
等。
10. Node.firstElementChild
返回指定节点的第一个子元素节点
。
11. Node.lastChild
返回指定节点的最后一个子节点。包括文本节点
等。
12. Node.lastElementChild
返回指定节点的最后一个子元素节点
。
节点操作
1. Node.appendChild()
将一个节点添加到指定节点的子节点列表的末尾。
var child = node.appendChild(child)
// node 要插入子节点的父节点
// child 既是参数又是返回值
复制代码
2. Node.removeChild()
将一个节点从DOM树中移除。移除后还存在于内存中,还可以继续添加到DOM树中。
var oldChild = node.removeChild(child);
// node child的父节点
// child 要移除的子节点
// oldChild 保存对移除子节点child的引用。可以继续将其添加到DOM树中
复制代码
3. Node.insertBefore()
在当前节点的某个子节点之前再插入一个子节点。
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
// 如果referenceElement为空,则插入到parentElement的子节点末尾。
// insertedElement 插入的子节点,即newElement
// parentElement 新插入节点的父节点
// newElement 新插入的节点
// referenceElement 在该节点之前插入newElement。可以通过将referenceElement改为referenceElement.nextElementSibling方式让newElement插入到referenceElement之后。实现类似insertAfter方法。
复制代码
4. Node.replaceChild()
用指定节点替换当前节点的一个子节点,返回被替换掉的节点。
var replacedChild = parentNode.replaceChild(newChild, oldChild);
// newChild 会替换掉 oldChild。如果newChild已经存在于DOM树中,则会从DOM树中删除
// oldChild 被替换掉的节点。
// replacedChild 等于 oldChild
复制代码
节点选择
1. document.querySelector(selectors)
selectors 是一个字符串,包含一个或多个css选择器。返回获取到的元素。
2. document.querySelectorAll(selectors)
和querySelector用法类似,只是返回值为NodeList对象。
3. document.getElementById()
根据元素ID获取元素。
4. document.getElementsByTagName()
根据元素标签名获取元素,返回值为HTMLCollection
集合。
5. document.getElementsByName()
根据元素name属性获取元素,返回值为NodeList对象。
6. document.getElementsByClassname()
根据元素类名获取元素,返回值为HTMLCollection
集合。
属性操作
1. element.setAttribute(name /*属性名*/, value /*属性值*/)
给元素设置属性。如果该属性已存在,则更新。
2. element.removeAttribute(attrName /*要删除的属性名*/)
删除元素的某个属性。
3. element.getAttribute(attrName)
获取元素上属性名为attrName属性的值。如果该属性名不存在则放回null或者 ''空字符串。
4. element.hasAttribute(attrName)
检测该元素上是否有该属性。返回值为true or false
。
DOM事件
1. element.addEventListener(type, listener, [, options])
给元素添加指定事件type
以及响应该事件的回调函数listener
。
2. element.removeEventListener(type, listener, [, options])
移除元素上指定事件,如果元素上分别在捕获和冒泡阶段都注册了事件,需要分别移除。
3. document.createEvent()
创建一个自定义事件,随后必须使用init
进行初始化。
4. element.dispatchEvent(event)
对指定元素触发一个事件。
elem.disapcthEvent(new Event('click'));
// 在elem上模拟一次单击事件
复制代码
元素样式尺寸
1. window.getComputedStyle(elem)
获取elem所有应用了css后的属性值。返回一个实时的 CSSStyleDeclaration
对象。
2. elem.getBoundingClientRect()
返回元素的大小以及相对于视口的位置。返回一个DOMRect对象。包括元素的 left
right
top
bottom
width
height
x
y
属性值。
转载于:https://juejin.im/post/5a54210bf265da3e47444067
原生JS DOM操作方法汇总相关推荐
- 原生JS字符串操作方法汇总
1.转换为字符串类型(三种实现方式) 1 var num=110; 2 var mystr=num.toString(); //"110" 3 4 var num=111; 5 v ...
- 微信小程序JS字符串操作方法汇总
微信小程序JS字符串操作方法汇总 JS对字符串进行切割截取 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico| ...
- 微信小程序JS字符串操作方法汇总,包含切割截取split,合并字符串join,连接字符串concat,返回指定字符串charAt,提取字符串substring等
微信小程序JS字符串操作方法汇总 JS对字符串进行切割截取 1.函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str="jpg|bmp|gif|ico| ...
- 【DOM系列】DOM操作方法汇总
目录 前言: 1.创建节点 1.1 document.createElement(tagname) 1.2 document.createTextNode(data) 1.3 document.cre ...
- 原生js来实现对dom元素class的操作方法
jQuery操作class的方式非常强大 写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的 ...
- 原生 遍历_细品原生JS从初级到高级知识点汇总(三)
作者:火狼1 转发链接:https://juejin.im/post/5daeefc8e51d4524f007fb15 目录 细品原生JS从初级到高级知识点汇总(一) 细品原生JS从初级到高级知识点汇 ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- Angualr中通过原生js和ViewChild的方式获取dom
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
- 原生JS实现的DOM操作笔记(草稿整理)
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
最新文章
- lvs后端realserver的vip管理脚本lvs-realsvr.sh
- Leangoo看板协作工具与Trello还真的不一样
- java静态分派_Java基础——重载、静态分派与动态分派
- 不是技术也能看懂容器技术与容器平台
- javaWeb_JSP 动态指令 forward 的程序
- 面向对象初始应用和认知2
- 【APICloud系列|36】小米应用商店可以检测同个应用不同版本信息
- Java Set接口详细讲解 TreeSet的定制排序和自然排序
- mysql时间戳转日期
- Safari技术预览版141来啦,增加了哪些新功能?
- Java 集合深入理解(15):AbstractMap
- ijkplayer框架详解
- 【2017CCPC哈尔滨赛区 HDU 6242】Geometry Problem【随机化】
- otool是mac自带的工具
- 分享一个蛋白互作网站——String (一)
- js怎样向html中添加内容,使用js向网页中写入html内容
- HDU - 1573 X问题
- sccm安装linux系统,SCCM Client for LINUX on FIPS Enabled Systems
- 怎样连接网站的服务器ipad,ipad可以连接云服务器地址
- 扑克牌顺子java_算法练习篇之:扑克牌顺子
热门文章
- 心中的狂野--最近的感想
- Linux基础之grep攻坚
- .NET一个线程更新另一个线程的UI(两种实现方法及若干简化)
- 解决org.apache.jasper.JasperException: Failed to load or instantiate TagLibraryVal
- 从“IBM刀片服务器广告告别电视”说起
- 复杂数据权限设计方案
- Hosts文件实际应用 配置内部服务器提高访问效率和速度
- 还是畅通工程(1233 并查集+kruskal)
- Microsoft.Jet.OLEDB.4.0”提供程序不支持 ITransactionLocal 接口。本地事务不可用于当前提供程序...
- 基于局部均方差相关信息的图像去噪及其在实时磨皮美容算法中的应用。