原生JavaScript常用的DOM操作
之前项目一直都是用JQuery或者Vue来做的,确实好用,毕竟帮我们解决了很多浏览器兼容问题,但是后面发现大公司面试题都是要原生Javascript来做,然后我就一脸懵逼哈哈哈,毕竟大公司需要的框架或者库好多都是公司内部自己构建的,所以说到头来还是要原生JavaScript,这里总结了一些原生js常用的dom操作函数。
一:节点关系
//元素的子元素都可以通过someNode下的childNodes对象来访问
var firstChild = someNode.firstChild; //获得第一个子元素
var lastChild = someNode.lastChild; //获得最后一个子元素
var secondChild = someNode.childNodes[1]; //获得第二个子元素
var secondChild = someNode.childNodes.item(1) //获得第二个子元素
var count = someNode.childNodes.length; //获得子元素个数
var parentNode = someNode.parentNode; //获得父元素 var prevNode = someNode.previousSibling; //获得前一个同胞元素,如果没有则为null
var nextNode = someNode.nextSibling; //获得后一个同胞元素,如果没有则为null var isHave = someNode.hasChildNodes(); //节点包含一个或多个子节点返回true var owner = someNode.ownerDocument; //指向表示整个文档的文档节点
二:操作节点
appendChild(newNode): 在节点子元素列表最后插入一个新节点,返回新增节点,如果节点本来就是文档的一部分,那就是将节点从原来的位置移到新位置。
var returnedNode = someNode.appendChild(newNode);
insertBefore(newNode, 参照节点): 在指定节点之前插入一个新的节点。
var returnedNode = someNode.insertBefore(newNode, null) //参照物为null,则插入子节点列表最后
var returnedNode = someNode.insertBefore(newNode, someNode.fisrtChild) //以第一个子节点为参照物,相当于新节点变成了第一个子节点
replaceChild(newNode,参照节点): 用新的节点替换旧节点,返回被替换的节点,被替换的节点依然属于文档,只是没有了位置。
var returnedChild = someNode.replaceChild(newNode, someNode.firstChild) //新节点替换第一个子元素
removeChild(): 移除一个子节点,并且作为返回值返回,被移除的节点依然属于文档,只是没有了位置。
var formerFirstChild= someNode.removeChild(someNode.firstChild); //移除第一个子节点
cloneNode(布尔值):复制一个节点,当参数为false时只复制节点本身,当参数为true是复制节点和他的所有子节点树。该函数不会复制事件处理程序,但是ie存在一个bug会复制处理程序,所以复制前最好先移除事件处理程序。
有这样的html代码:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
假设我们已经将<ul>元素的引用保存在了myList中。
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length); //3(IE < 9) 或 7(其他浏览器) var deepList = myList.cloneNode(false);
alert(deepList.childNodes.length); //
原生JavaScript常用的DOM操作的更多相关文章
- 原生JavaScript常用本地浏览器存储方法一(方法类型)
有时需要将网页中的一些数据保存在浏览器端.好处就是当下次访问页面时,直接就可以从本地读取数据,不需要再次向服务器请求数据.目前常用的有以下几种方法: 1.cookie cookie会随着每次HTTP请 ...
- [笔记]原生JS实现的DOM操作笔记
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...
- javascript教程2:---DOM操作
1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...
- mui项目中如何使用原生JavaScript代替jquery来操作dom 转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html
最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容 ...
- mui项目中如何使用原生JavaScript代替jquery来操作dom
最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容 ...
- MUI常用脚本及原生JavaScript常用操作元素方法
1.mui元素转换html元素 var obj=mui("#id")[0]; 2.事件绑定 var btn = document.getElementById("logi ...
- 原生JavaScript对【DOM元素】的操作——增、删、改、查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 网页制作之JavaScript部分 2 - DOM操作
1.DOM的基本概念 htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对 ...
- JavaScript基础:DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
随机推荐
- 妙味课堂:JavaScript初级--第12课:json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 阿里云ECS连接阿里云Redis问题
描述 项目之前的服务器使用Windows,Redis使用阿里云的云数据库Redis版,一切正常. 后来了更换了Linux,也配置好了Redis,但连接阿里云的Redis时却怎么也连接不上 原因 ECS ...
- thinkinginjava学习笔记09_内部类
定义与创建 将一个类定义放在另一个类.方法.作用域.匿名类等地方,就是内部类:内部类只能由外部类对象创建(通过外部方法或者.new方法),内部类对象创建时必须已经有一个外部类对象,并且与之连接(在内部 ...
- Bash shell编程的语法知识点(1)
Bash shell脚本编程知识点如下(初学,不全,欢迎讨论补充): shell简介 脚本的简单介绍 变量和引用 算术运算 交互式编程 选择判断 条件测试 循环 函数 shell简介 shell是一种 ...
- pagelatch等待在tempdb的gsm页面上
Each data file has a gam page, sql will update it when allocate space in the file. Will see contenti ...
- 【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面
1.引入资源包 在上一节中,我们把基本的框架都搭好了,用了Spring,SPringMVC.这一节,我们先来画页面,前端框架采用EasyUI来实现. easyui是一种基于jQuery的用户界面插件集 ...
- mysql分组查询前n条数据
建表: CREATE TABLE hard(id INT,aa varchar(50) ,bb INT,PRIMARY key(id))insert into hard values(1,'a',9) ...
- Hyperledger Fabric 1.0 从零开始(十二)——fabric-sdk-java应用
Hyperledger Fabric 1.0 从零开始(十)--智能合约 Hyperledger Fabric 1.0 从零开始(十一)--CouchDB 上述两章,最近网上各路大神文章云集,方案多多 ...
- Python各类图像库的图片读写方式总结
最近在研究深度学习视觉相关的东西,经常需要写python代码搭建深度学习模型.比如写CNN模型相关代码时,我们需要借助python图像库来读取图像并进行一系列的图像处理工作.我最常用的图像库当然是op ...
- MariaDB的"response time"插件
"响应时间"是衡量数据库性能的常用指标.在MariaDB中可以使用插件"QUERY_RESPONSE_TIME"来获取查询时间区间的统计信息. // 安装插 件 ...