原生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 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
JavaScript 中的replace方法说明
Apr 13 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
浅谈js原生拖放
Nov 21 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
详解React 条件渲染
Jul 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删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php实现水仙花数示例分享
2014/04/03 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
angularJS 入门基础
2015/02/09 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
js处理层级数据结构的方法小结
2017/01/17 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
详解Vue之事件处理
2020/07/10 Javascript
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python 调用钉钉机器人的方法
2019/02/20 Python
python tkinter实现屏保程序
2019/07/30 Python
python实现的生成word文档功能示例
2019/08/23 Python
python自动生成model文件过程详解
2019/11/02 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
2014年心理健康教育工作总结
2014/12/06 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
国富论读书笔记
2015/06/26 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis