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实现迷宫走法

    ** 迷宫走法** 迷宫问题 对于走迷宫,人们提出过很多计算机上的解法.深度优先搜索.广度优先搜索是使用最广的方法.生活中,人们更愿意使用"紧贴墙壁,靠右行走"的简单规则. 下面的 ...

  2. java实现第六届蓝桥杯牌型整数

    牌型整数 题目描述 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不 ...

  3. 优雅的敲JS代码的几个原则

    一.条件语句        1,使用 Array.includes 来处理多重 || 条件          // ----- 一般 ------ if (fruit == 'apple' || fr ...

  4. Tomcat线程模型分析及源码解读

    1 四种线程模型  配置方法:在tomcat conf 下找到server.xml,在<Connector port="8080" protocol="HTTP/1 ...

  5. Java I/O模型及其底层原理

    Java I/O是Java基础之一,在面试中也比较常见,在这里我们尝试通过这篇文章阐述Java I/O的基础概念,帮助大家更好的理解Java I/O. 在刚开始学习Java I/O时,我很迷惑,因为网 ...

  6. Promise相关学习

    what? Promise对象表示一个异步操作的最终状态(完成或失败),以及其返回的值 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/ ...

  7. Firefox中input元素,不能重新获取焦点函数focus()

    js校验输入框的函数: function is_number(feild) { var strRegExp = /^\d+(\.\d{1,2})?$/; if (!strRegExp.test(fei ...

  8. Python：列表和列表的增删改查

    目录 列表 列表的取值 通过下标 切片 用len()取得列表的长度 用下标改变列表中的值 列表连接和列表复制 用 del 语句从列表中删除值 in和not in操作符 多重赋值 列表的方法 查找 增加 ...

  9. fiddler修改请求参数

    1.打开fiddler ,点击界面左侧左侧底部 2.此图标为before request请求(修改请求参数时,设置这个,可以修改请求参数) 3..再次点击该按钮,将图标切换到下图after respo ...

  10. Dubbo——服务引用

    文章目录 引言 正文 服务订阅 Invoker的创建 单注册中心的Invoker创建 Dubbo直连的Invoker创建 创建代理类 引言 上一篇我们分析了服务发布的原理,可以看到默认是创建了一个Ne ...