原生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[];//表单集合
var img=document.images[];//图片集合
var img=document.links[];//所有带连接的a节点
然后是更新,我理解的是替换,常用实现
parent.replaceChild(div,dom1.querySelector("p"));
dom1.innerHTML="hhh";
dom1.innerText="";
最后是删除的实现
parent.removeChild(dom1.querySelector("p"));
dom1.innerHTML="";
dom1.innerText="";
本文结束。
原生js操作Dom节点:CRUD的更多相关文章
- 原生js操作dom的方法
今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离
关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...
- 原生JS的DOM节点操作
DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...
- JS 操作Dom节点之CURD
许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...
- 原生js操作DOM基础-笔记
原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...
- 原生Js操作DOM
查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...
- JS 操作Dom节点之样式
为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...
- 原生js 操作dom
1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...
随机推荐
- Python编程从入门到实践,个人笔记
3-9 晚餐嘉宾:在完场练习3-6时编写的程序之一中,使用len()打印一条消息,指出有多少位嘉宾来与你共进晚餐. 自己先写的程序如下: # coding=gbk #邀请一些人吃饭 per_list= ...
- Python-入门必备
·Python入门必备 @ 交互式编程 交互式编程不需要创建脚本文件,而是直接通过Python解释器的交互模式进来编写代码.下面我们来打开python自带的交互式编程客户端,打印一个hello,wor ...
- vowels_单元音
vowels(美式): 单元音: [i]:需要用劲喊出类似于“yi”的四声,费力咧开嘴,单词eat.need.thief.meet. [?]:卷舌音,单词bird.her.worry.certain. ...
- Python学习手册之类和继承
在上一篇文章中,我们介绍了 Python 的函数式编程,现在我们介绍 Python 的类和继承. 查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/100106 ...
- jetson tx2 安装tensorflow
官方的安装方法很简单: 可能会出现以下错误: 说的是dist-packages 权限不允许 consider using the "--user" to option or che ...
- Stream的顺序流与并行流
/** * @auther hhh * @date 2019/1/2 22:52 * @description */ public class StreamAPI2 { /** * 流的特性:支持并行 ...
- Docker入门系列02
上篇用一个简单的示例,简单的介绍了 Dockerfile 的配置及其相关的命令.这一篇会在上篇的示例程序里,继续添加新代码及如何将单元测试也放入 Image 建立过程内. 首先,我们需要建一个新的类库 ...
- 优步UBER司机全国各地奖励政策汇总 (3月21日-3月27日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- nginx下pagespeed使用详解
目录 1.简介 2.安装 2.1脚本安装 查看该脚本的如何使用 使用脚本自动安装 替换以前的nginx 2.2 手动安装 先安装基本依赖 构建pagespeed 重新编译安装nginx 3.配置 3. ...
- VMware 15.0下载及安装教程
虚拟机 VMware WorkStation Pro15 下载及安装详细解 9虚拟机 VMware WorkStation Pro15 下载及安装详细解. 虚拟机官方网站: https://www.v ...