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 问题描述 给定一个字符串,要求将字符串前面的若干个字符移到字符串的尾部.例如,将字符串"abcdef"的前3个字符'a'.'b'和'c'移到字符串的尾部,那么原字符串将变成&q ...

  2. java实现低碳生活大奖赛

    某电视台举办了低碳生活大奖赛.题目的计分规则相当奇怪: 每位选手需要回答 10 个问题(其编号为 1 到 10),越后面越有难度. 答对的,当前分数翻倍:答错了则扣掉与题号相同的分数(选手必须回答问题 ...

  3. java实现猜算式

    题目:猜算式 你一定还记得小学学习过的乘法计算过程,比如: x 15 ------ 273 ------ 请你观察如下的乘法算式 *** x *** -------- *** *** *** ---- ...

  4. Java实现第九届蓝桥杯方格计数

    方格计数 题目描述 如图p1.png所示,在二维平面上有无数个1x1的小方格. 我们以某个小方格的一个顶点为圆心画一个半径为1000的圆. 你能计算出这个圆里有多少个完整的小方格吗? 注意:需要提交的 ...

  5. 用vue实现一个简单的时间屏幕

    前言 去年用了一个小的 app,叫做 一个木函,本来想着用来做动画优化就删掉了的,不过看到他有个时间屏幕的小工具,就点进去看了下,觉得挺好玩的,就想着能不能自己实现一下. ps: 闲话不多说,先上例子 ...

  6. 「从零单排canal 01」 canal 10分钟入门（基于1.1.4版本）

    1.简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据 订阅 和 消费.应该是阿里云DTS(Data Transfer Servi ...

  7. opencl(7) 内核执行命令入队]工作组、工作项

    1:将内核执行命令入队(该命令可被多个工作项执行) cl_int clEnqueueNDRangeKernel( cl_command_queue command_queue, cl_kernel k ...

  8. Ansible facts详解

    Ansible是一个系列文章,我会尽量以通俗易懂.诙谐幽默的总结方式给大家呈现这些枯燥的知识点,让学习变的有趣一些. Ansible系列博文直达链接:Ansible入门系列 前言 如果你跟着前面的文章 ...

  9. Python 报错：NameError: name 'ctypes' is not defined

    使用python中的ctypes模块可以很方便的调用windows的dll(也包括linux下的so等文件) 引入ctypes库 有两种方法 from ctypes import * import c ...

  10. mac 排查被占端口

    Last login: Wed Sep :: on ttys000 sam:~ sam$ sudo lsof -i : Password: COMMAND PID USER FD TYPE DEVIC ...