原生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 相关文章推荐
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
Oct 10 Javascript
学习node.js 断言的使用详解
Mar 18 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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添加MySQL数据记录代码
2008/06/07 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP实现的用户注册表单验证功能简单示例
2019/02/25 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
详解Python locals()的陷阱
2019/03/26 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
使用python模拟命令行终端的示例
2019/08/13 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
毕业典礼主持词大全
2014/03/26 职场文书
授权委托书公证
2014/09/14 职场文书
工商局个人工作总结
2015/03/03 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android