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中ThreadLocal类的详细介绍（详解）

    ThreadLocal简介 变量值的共享可以使用public static的形式,所有线程都使用同一个变量,如果想实现每一个线程都有自己的共享变量该如何实现呢?JDK中的ThreadLocal类正是为 ...

  2. vue使用 video.js动态切换视频源视频源不刷新问题

    网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video  id="my-player" con ...

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

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

  4. 一篇文章教会你用Python抓取抖音app热点数据

    今天给大家分享一篇简单的安卓app数据分析及抓取方法.以抖音为例,我们想要抓取抖音的热点榜数据. 要知道,这个数据是没有网页版的,只能从手机端下手. 首先我们要安装charles抓包APP数据,它是一 ...

  5. 用头发换JS的第一天

    因为平时也在上班,这些都是在地铁上抽空开始看的,总结来说还是有一些收获存在,每次看都能发现一些新东西,废话不多说,开撸! JavaScript是一种网页编程语言,可以对网页的行为进行编程,简单来说HT ...

  6. PowerBuilder中调用NPOI进行Excel导出格式设置示例

    // 功能 :新建excel带边框的单元格,格式为数字并显示为美元货币 // 参数 :ai_row,行号:ai_col,列号 // 返回值 :true/false // 作者 :潮崖之飔 // 日期 ...

  7. vc6.0代码转vs2017相关问题

    vc6.0代码转vs2017相关问题 命令行 error D8016: “/ZI”和“/Gy-”命令行选项不兼容fatal error C1083: 无法打开包括文件: “WinSock2.h”: N ...

  8. cb51a_c++_STL_算法_根据第n个元素排序nth_element

    cb51a_c++_STL_算法_根据第n个元素排序nth_elementnth_element(b,n,e),比如最大的5个数排序,或者最小的几个数nth_element(b,n,e,p)对比:pa ...

  9. 资料共享-源代码-视频教程-PLC-OpenCV-C++-MFC

    资料共享-源代码-视频教程-PLC-OpenCV-C++-MFC 资料共享-源代码-视频教程 资料共享-源代码-视频教程-PLC-OpenCV-C++-MFC

  10. uni-app之实现分页

    一.下载库 官方文档地址为:https://ext.dcloud.net.cn/plugin?id=32 点击下载zip压缩包即可,下载完毕后解压到放置前端相关组件目录,即components目录. ...