原生js实现针对Dom节点的CRUD操作示例


Posted in Javascript onAugust 26, 2019

本文实例讲述了原生js实现针对Dom节点的CRUD操作。分享给大家供大家参考,具体如下:

知识点,依然会遗忘。我在思考到底是什么原因。想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系;正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题。

按照知识体系建设这个思路,追求长久的深刻的记忆。决定建立正向知识体系。本文系正向知识体系的第一篇。

原生js操作dom节点:所谓的CRUD,代表create,read,update,del;也就是创建,读取,更新和删除。dom提供了api用于创建节点常用有

var div=document.createElement("div");
var p=document.createElement("p");
div.innerHTML="这是插入内容";
var text=document.createTextNode("这是文本内容");
var img=new Image();

创建元素、文本内容和图片。创建要和插入一起使用,所以

dom1.appendChild(div);
dom1.insertBefore(div,dom1.querySelector("p")); 
function inertAfter(newElement,targetElement){
   var parent=targetElement.parentNode;
   if (parent.lastChild==targetElement) {
     parent.appendChild(newElement);
   }else{
     parent.inertBefore(newElement,targetElement.nestSibling);
   }
}
document.getElementById('id名称').preappend(div);//直接插入到父元素第一个位置
document.getElementById('id名称').append(div);//直接插入到父元素最后位置
//还有另一个api
dom1.insertAdjacentHTML("afterBegin","<h1> 在文本前容器内插入内容1</h1>"); 
dom1.insertAdjacentHTML("beforeEnd","<h2> 在文本后容器内插入内容2</h2>"); 
dom1.insertAdjacentHTML("beforeBegin","<h4> 在文本前容器外插入内容4</h1>"); 
dom1.insertAdjacentHTML("afterEnd","<h5> 在文本后容器外插入内容5</h2>");

读取也就是选择器的功能实现

//直接选择器
var dom1=document.getElementById("dom1");
var dom1=document.querySelector("#dom1");
var matches = document.querySelectorAll("div.note, div.alert");
var div=document.getElementsByClassName(".div");
var div=document.getElementsByTagName("div");
//节点关系选择器
var divC=div.innerHTML;//内部
var divC=div.outerHTML;//整个节点
var divS=div.children;//子节点集合
var divS=div.firstChild;//第一个子节点,如果有空格返回#text
var divS=div.lastChild;//最后一个子节点,如果有空格返回#text
var divS=div.nextSibling;//下一个节点,如果有空格返回#text
var divS=div.prvSibling;//前一个节点,如果有空格返回#text
var divS=div.parentNode;//父节点
//节点集合
var form=document.forms[0];//表单集合
var img=document.images[0];//图片集合
var img=document.links[0];//所有带连接的a节点

然后是更新,我理解的是替换,常用实现

parent.replaceChild(div,dom1.querySelector("p"));
dom1.innerHTML="hhh";
dom1.innerText="999";

最后是删除的实现

parent.removeChild(dom1.querySelector("p"));
dom1.innerHTML="";
dom1.innerText="";

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
浅谈发布订阅模式与观察者模式
Apr 09 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
Moment.js实现多个同时倒计时
Aug 26 #Javascript
vue获取验证码倒计时组件
Aug 26 #Javascript
seajs和requirejs模块化简单案例分析
Aug 26 #Javascript
JavaScript实现身份证验证代码实例
Aug 26 #Javascript
基于vue、react实现倒计时效果
Aug 26 #Javascript
tweenjs缓动算法的使用实例分析
Aug 26 #Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 #Javascript
You might like
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
php实现水印文字和缩略图的方法示例
2016/12/29 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
TensorFlow实现模型评估
2018/09/07 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
违反校纪校规检讨书
2014/02/15 职场文书
求职意向书范文
2014/04/01 职场文书
怎样写离婚协议书
2014/09/10 职场文书
通知范文怎么写
2015/04/16 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书