原生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 面向对象 function类
May 13 Javascript
Javascript学习指南
Dec 01 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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
ThinkPHP路由详解
2015/07/27 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
宝塔面板在NGINX环境中TP5.1如何运行?
2021/03/09 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python网络爬虫中的同步与异步示例详解
2018/02/03 Python
python 列表降维的实例讲解
2018/06/28 Python
python样条插值的实现代码
2018/12/17 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
烹饪自我鉴定
2014/03/01 职场文书
会计学习心得体会
2014/09/09 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
白酒代理协议书范本
2014/10/26 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
中学生学习保证书
2015/02/26 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
html+css实现文字折叠特效实例
2021/06/02 HTML / CSS
HttpClient实现文件上传功能
2022/08/14 Java/Android