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. StringBuilder的线程为什么不安全

    StringBuffer和StringBuilder的区别在哪里? StringBuffer是线程安全的,StringBuilder是线程不安全的. 那么StringBuilder不安全在哪里?在想这 ...

  2. java实现第六届蓝桥杯三角形面积

    三角形面积 题目描述 如图1所示.图中的所有小方格面积都是1. 那么,图中的三角形面积应该是多少呢? 请填写三角形的面积.不要填写任何多余内容或说明性文字. 28 简单的数学平面几何问题: 大正方形面 ...

  3. java实现第五届蓝桥杯圆周率

    圆周率 数学发展历史上,圆周率的计算曾有许多有趣甚至是传奇的故事.其中许多方法都涉及无穷级数. 图1.png中所示,就是一种用连分数的形式表示的圆周率求法. 下面的程序实现了该求解方法.实际上数列的收 ...

  4. STL关联容器

    这里简单学习一下STL关联容器,主要是map.multimap.set.multiset以及unordered_map.前四个底层实现都是利用红黑树实现的,查找算法时间复杂度为\(O(log(n))\ ...

  5. 钻进 Linux 内核看个究竟

    Linux 内核,这个经常听见,却不不知道它具体是干嘛的东西,是不是觉得非常神秘? Linux 内核看不见摸不着,而对于这类东西,我们经常无从下手.本文就以浅显易懂的语言,带你钻进 Linux 内核, ...

  6. map集合 可变对象

    #map集合 可变对象 stu = {'xiaoming':34,'xiaohogn':56,'小王':569} print(stu['小王']) ''' 如果key不存在,dict就会报错: > ...

  7. windows server2012 安装SQL SERVER 2016环境监测出错

    Windows Server 2012 R2 安装SQL Server 2016 顺序为:KB2919442 ——> KB2919355 ——> SQL Server 2016 并且还要安 ...

  8. 在Unix系统中执行可执行文件

    这篇文章是我在一个叫做Charlotte数据挖掘的公众号上看到的文章,文首提到转载自"朱小厮的博客",当我今天执行一个自己编译的可执行文件后的运行阶段想到了这篇文章,直接一次成功. ...

  9. Android学习笔记BroadcastReceiver（广播接收者）

    Android发送广播的过程 代码实现 MainActivity.java import androidx.appcompat.app.AppCompatActivity; import androi ...

  10. Matlab 常用语法速记 1

    ===快捷帮助=== 查找帮助:doc 函数名 强制终止: ctrl + c 注释: % 清屏 clc,清临时变量窗口 clear NaN: not a number inf: infinite == ...