知识点,依然会遗忘。我在思考到底是什么原因。想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系;正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题。

按照知识体系建设这个思路,追求长久的深刻的记忆。决定建立正向知识体系。本文系正向知识体系的第一篇。

原生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的更多相关文章

  1. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  2. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  3. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

  4. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  5. JS 操作Dom节点之CURD

    许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document. ...

  6. 原生js操作DOM基础-笔记

    原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e ...

  7. 原生Js操作DOM

    查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个 ...

  8. JS 操作Dom节点之样式

    为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式 ...

  9. 原生js 操作dom

    1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节 ...

随机推荐

  1. Python编程从入门到实践,个人笔记

    3-9 晚餐嘉宾:在完场练习3-6时编写的程序之一中,使用len()打印一条消息,指出有多少位嘉宾来与你共进晚餐. 自己先写的程序如下: # coding=gbk #邀请一些人吃饭 per_list= ...

  2. Python-入门必备

    ·Python入门必备 @ 交互式编程 交互式编程不需要创建脚本文件,而是直接通过Python解释器的交互模式进来编写代码.下面我们来打开python自带的交互式编程客户端,打印一个hello,wor ...

  3. vowels_单元音

    vowels(美式): 单元音: [i]:需要用劲喊出类似于“yi”的四声,费力咧开嘴,单词eat.need.thief.meet. [?]:卷舌音,单词bird.her.worry.certain. ...

  4. Python学习手册之类和继承

    在上一篇文章中,我们介绍了 Python 的函数式编程,现在我们介绍 Python 的类和继承. 查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/100106 ...

  5. jetson tx2 安装tensorflow

    官方的安装方法很简单: 可能会出现以下错误: 说的是dist-packages 权限不允许 consider using the "--user" to option or che ...

  6. Stream的顺序流与并行流

    /** * @auther hhh * @date 2019/1/2 22:52 * @description */ public class StreamAPI2 { /** * 流的特性:支持并行 ...

  7. Docker入门系列02

    上篇用一个简单的示例,简单的介绍了 Dockerfile 的配置及其相关的命令.这一篇会在上篇的示例程序里,继续添加新代码及如何将单元测试也放入 Image 建立过程内. 首先,我们需要建一个新的类库 ...

  8. 优步UBER司机全国各地奖励政策汇总 (3月21日-3月27日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. nginx下pagespeed使用详解

    目录 1.简介 2.安装 2.1脚本安装 查看该脚本的如何使用 使用脚本自动安装 替换以前的nginx 2.2 手动安装 先安装基本依赖 构建pagespeed 重新编译安装nginx 3.配置 3. ...

  10. VMware 15.0下载及安装教程

    虚拟机 VMware WorkStation Pro15 下载及安装详细解 9虚拟机 VMware WorkStation Pro15 下载及安装详细解. 虚拟机官方网站: https://www.v ...