原生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 相关文章推荐
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
js数组的操作详解
Mar 27 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
理解javascript回调函数
Dec 28 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
js严格模式总结(分享)
Aug 22 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
JS实现横向轮播图(初级版)
Jun 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
yii操作session实例简介
2014/07/31 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
javascript实现汉字转拼音代码分享
2015/04/20 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
Ionic项目中Native Camera的使用方法
2017/06/07 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
Python搭建APNS苹果推送通知推送服务的相关模块使用指南
2016/06/02 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Python通过文本和图片生成词云图
2020/05/21 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
教师年终个人自我评价
2013/10/04 职场文书
个性大学生自我评价
2013/12/04 职场文书
求职简历自我评价范例
2014/03/12 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
世界文化遗产导游词
2015/02/13 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
导游词之日月潭
2019/11/05 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
MySQL 开窗函数
2022/02/15 MySQL
Python中的socket网络模块介绍
2022/07/23 Python