原生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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 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 iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
详解php中 === 的使用
2016/10/24 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
node.JS二进制操作模块buffer对象使用方法详解
2020/02/06 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python Requests 基础入门
2016/04/07 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
保证书范文大全
2014/04/28 职场文书
检讨书怎么写
2015/01/23 职场文书
勤俭节约主题班会
2015/08/13 职场文书
董事长秘书工作总结
2015/08/14 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
一篇文章学会Vue中间件管道
2021/06/20 Vue.js