原生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 相关文章推荐
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
href下载文件根据id取url并下载
May 28 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
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
php中inlcude()性能对比详解
2012/09/16 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
PHP实现Markdown文章上传到七牛图床的实例内容
2020/02/11 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
python实现获取序列中最小的几个元素
2014/09/25 Python
python图像处理之镜像实现方法
2015/05/30 Python
python中子类继承父类的__init__方法实例
2016/12/15 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
解释下面关于J2EE的名词
2013/11/15 面试题
班班通项目实施方案
2014/02/25 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
公司节能减排方案
2014/05/16 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
同志主要表现材料
2014/08/21 职场文书
服装店员工管理制度
2015/08/07 职场文书
干部考核工作总结
2015/08/12 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Python四款GUI图形界面库介绍
2022/06/05 Python