JavaScript的组成：

1. ECMAScript-语法规范

2. Web APIs（浏览器提供的工具）

(1).BOM （浏览器对象模型）

(2).DOM （文档对象模型）

今天就来讲讲DOM的增删改查 （废话不多说上代码）。

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <title>Document</title>

 </head>

 <body>

   <div class="app">

     <div class="title">123</div>

   </div>

   <script>

     /*

         获取节点的方式

         1.  document.getElementById()  //根据节点的id值来获取该节点

         2.  document.getElementByTagName()  //根据节点的标签来获取该节点

         3.  document.getElementByName()   //根据节点的属性值来获取该节点

         4.  document.getElementByClassName()  //根据节点的类名来获取该节点

         5.  document.querySelectorAll()   //根据元素标签获取节点  考虑兼容

     */

     var app = document.getElementsByClassName("app")[0]

     /*

       从一个中心节点访问其所有直系或亲属节点

       1，访问父节点   parentNode

       2, 访问上一个兄弟节点   previousSibling

       3，访问下一个兄弟节点   nextSibling

       4，访问该节点的第一个属性节点   attributes[1]

       5, 访问最后一个子节点   lastChild 或 childNodes[childNodes.length-1]

     */

   //---------------------------------------------------------------------------

     /*

       获取属性

         getAttribute("属性名")  //返回属性值

         getAttributeNode("属性名")  //返回属性节点

     */

   //---------------------------------------------------------------------------

     /*

       创建 （常用）

       document.createElement()  //创建元素节点

       document.createTextNode()  //创建文本节点

       document.createAttribute()  //创建属性节点

       innerHTML

       innerText

       cloneNode()       //克隆

     */

   //---------------------------------------------------------------------------

     /*

       加入

       appendChild()       //追加到尾出

       insertBefore()      //将元素插入到某一元素的前面

       用法： 父元素.insertBefore(要插入的新元素,新元素插入其前面的元素)

     */

   //---------------------------------------------------------------------------

     /*

       删除

       removeChild //删除子元素

       removeAttributeNode  //删除属性节点

     */

   //---------------------------------------------------------------------------

     /*

       修改节点

         删除再加入

       修改样式

         style.***=***

         setAttribute("style","****")

       修改文本

         .innerHTML

         .innerText

         节点操作

         .nodeValue

       修改属性

         .属性名=属性值

         .setAttribute("属性名","属性值")

     */

   //---------------------------------------------------------------------------

     /*

       其余常用的操作

       style //修改css样式

       setAttribute("属性名","属性值")  // 设置属性

     */

   </script>

 </body>

 </html>

JavaScript之DOM的增删改查的更多相关文章

  1. JavaScript（JS）之Javascript对象DOM之增删改查（四）

    创建节点:var ele_a = document.createElement('a');添加节点:ele_parent.appendChild(ele_img);删除节点:ele_parent.re ...

  2. 第 9 章 DOM 的增删改查

    DOM 的增删改查 本文不会详细讲解,只是简单提及知识要点,详细可以参考<dom高级编程>. 1. document.write document.write('<h1>创建节 ...

  3. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

  4. JavaScript中数组的增删改查

                                               数组的增加 ary.push()   向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 ary.uns ...

  5. JavaScript中数组的增删改查以及应用方式

    数组的增加方法 1.push()方法向数组中末尾添加一个元素,原数组改变 var arr=[1,2,3,4]; var arr1=arr.push(6); console.log(arr);//打印出 ...

  6. DOM节点的增删改查

    在开始展开DOM操作前,首先需要构建一棵DOM树. <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. js中script的上下放置区别 ， Dom的增删改创建

    回顾 javascript分为三部分: 1.ECMAScript5.0 es6(阮一峰) es7 es8 es6中有类的概念 声明变量 var let(es6中语法) 内置函数 Date Math.r ...

  8. JavaScript HTML DOM增删改查

    首先 js 可以修改HTML中的所有元素和属性,它还可以改变CSS样式,并且可以监听到所有事件并作出响应,这篇笔记呢 主要记录如何对HTML元素进行增删改查. 1 查找DOM 第一种方式是我们最常用的 ...

  9. HTML DOM(二)：节点的增删改查

    上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点.元素节点.文本节点.属性节点.注释节点,其中,属性节点是属于元素节点),本篇的内容就是通过DOM对这 ...

随机推荐

  1. java实现第五届蓝桥杯奇怪的分式

    奇怪的分式 题目描述 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明居然把分子拼接在一起,分母拼接在一起,答案是:18/45 (参见图1.png) 老师刚想批 ...

  2. Charles（青花瓷/花瓶）的基本使用

    前言 Charles 其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的.其次该软件是用 Java 写的,能够在 Windows,Mac,Linux 上使用. ...

  3. ubuntu18启动zabbix-agent失败/故障记录

    故障现象 ubuntu 16 升级18 之后 安装了zabbix agent 今天突然agent掉了 上去的时候发现 报错: 后来打算-c 启动然后发现 /usr/sbin/zabbix_agentd ...

  4. MySQL进阶篇(02)：索引体系划分，B-Tree结构说明

    本文源码:GitHub·点这里 || GitEE·点这里 一.索引简介 1.基本概念 首先要明确索引是什么:索引是一种数据结构,数据结构是计算机存储.组织数据的方式,是指相互之间存在一种或多种特定关系 ...

  5. 【Flutter实战】移动技术发展史

    老孟导读:大家好,这是[Flutter实战]系列文章的第一篇,这并不是一篇Flutter技术文章,而是介绍智能手机操作系统.跨平台技术的演进以及我对各种跨平台技术看法的文章. 智能手机操作系统 塞班( ...

  6. 掌握SpringBoot-2.3的容器探针：深入篇

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:原创分类汇总及配套源码,涉及Java.Docker.K8S.DevOPS等 关于<Spr ...

  7. Cron表达式，springboot定时任务

    详细请看这篇博客 参考:https://blog.csdn.net/belonghuang157405/article/details/83410197 Cron表达式是一个字符串,字符串以5或6个空 ...

  8. 让LED程序在片外SDRAM中运行

    让LED程序在片外SDRAM中运行 一.引子 在前一篇文章中,我们已经成功点亮过LED了,为什么还要再重复一次呢? 我们已经知道,Mini2440开发板有两种启动模式:从NorFlash启动和从Nan ...

  9. .net core 部署到windows服务上的方法

    前言 Net core 项目部门在Windows有很多种方式,大致有以下几种, dotnet 命令, iis(windowshosts), 一些开源的应用容器(docker ) 基于一些exe 程序, ...

  10. 在Xcode11上开发“面向低于iOS13版本的App”时的一些注意点

    相关知识: https://blog.csdn.net/BUG_delete/article/details/103699563 'AppDelegate' is only available in ...