回顾

javascript分为三部分：

        1、ECMAScript5.0 es6(阮一峰) es7 es8    es6中有类的概念

            声明变量 var  let(es6中语法)

            内置函数 Date Math.random

            if else  switch while do-while  for

        2、DOM  Document Object Model

            获取DOM事件的三种方式

            getElementById()

            getElementsByTagName()

            getElementsByClassName()

            DOM的三步走

            1、事件对象

            2、事件、

            3、事件驱动

            值操作： <div></div> too liang

            oDiv.innerText='too liang';仅仅设置文本

            oDiv.innerHTML='<h2>too liang</h2>';文本和标签一起渲染

            oInput.value='alex';仅仅是对表单控件有效

            标签属性操作；

                设置类名：oDiv.className+=' active';追加类名、

                设置id：oDiv.id='box';

            样式操作：

                oDiv.style.(css中所有的样式属性）

                注意驼峰体：如果margin-left 使用js的时候marginLeft

        3、BOM

<script></script>在head和body中放置的区别

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        //加载顺序：1DOM元素加载 2图片加载

        //1等待DOM和图片资源加载完成之后才调用window.onload后面的方法

        //2事件覆盖事件，也即同时存在多个window.noload时，后面的覆盖前面的

        window.onload=function () {

            // var oBtn=document.getElementById('btn');

            // console.log(oBtn);

            function $(idName){

                return document.getElementById(idName);

            }

            $('btn').onclick=function(){

　　　　　　　　。。。。。。

            };

        }

    </script> <!--没有操作DOM时可以将script放在这里面，如果要使用DOM的相关操作，使用window.onload，建议最好写在body里面-->

</head>

DOM的增删改查

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id="btn">追加</button>

<button id="del">删除</button>

<div id="box">

    <p>测试段落</p>

</div>

    <script>

        //加载顺序：1DOM元素加载 2图片加载

        //1等待DOM和图片资源加载完成之后才调用window.onload后面的方法

        //2事件覆盖现在，同时存在多个window.noload时，后面的覆盖前面的

        window.onload=function () {

            // var oBtn=document.getElementById('btn');

            // console.log(oBtn);

            function $(idName){

                return document.getElementById(idName);

            }

            $('btn').onclick=function(){

                //1DOM的创建

                var oP=document.createElement('p');

                //2 DOM的追加

                $('box').appendChild(oP);

                //3 DOM的修改

                oP.innerText='alex';

                oP.id='p1';//设置id

                var oA=document.createElement('abc');//自定义创建

                oA.innerText='321';

                oA.id='abc';

                $('box').insertBefore(oA,oP);//在oA之前插入

            };

            //4 DOM的删除操作

            $('del').onclick=function(){

                $('box').removeChild($('p1'));

                $('box').removeChild($('abc'));

            }

        }

    </script>

</body>

</html>

应用场景分析

# 如果是一开始页面有初始化渲染开销；应用：频繁的切换：display:none|block  或者 追加className 删除className

#如果是DOM的创建和删除 如果你是频繁的切换，对DOM的性能消耗很大，所以最好应用在少量的切换上面

js中script的上下放置区别 ， Dom的增删改创建的更多相关文章

  1. JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

    JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...

  2. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  3. js中的substr和substring区别

    js中的substr和substring区别 Substring: 该方法可以有一个参数也可以有两个参数. (1)  一个参数: 示例: var str=“Olive”: str.substring( ...

  4. JS 中的require 和 import 区别整理

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...

  5. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie，Session，Application的用法与区别？ c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  6. JS实例—DOM的增删改

    <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" ...

  7. 第 9 章 DOM 的增删改查

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

  8. JavaScript之DOM的增删改查

    JavaScript的组成: 1. ECMAScript-语法规范 2. Web APIs(浏览器提供的工具) (1).BOM (浏览器对象模型) (2).DOM (文档对象模型) 今天就来讲讲DOM ...

  9. PHP程序中使用PDO对象实现对数据库的增删改查操作的示例代码

    PHP程序中使用PDO对象实现对数据库的增删改查操作(PHP+smarty) dbconn.php <?php //------------------------使用PDO方式连接数据库文件- ...

随机推荐

  1. ASP.NET AJAX入门系列（5）：使用UpdatePanel控件（二） UpdatePanel

    UpdatePanel可以用来创建丰富的局部更新Web应用程序,它是ASP.NET 2.0 AJAX Extensions中很重要的一个控件,其强大之处在于不用编写任何客户端脚本,只要在一个页面上添加 ...

  2. 关于Firedac的一点看法

    Firedac集成在Delphi中已经有几个版本了,偶尔也拖到Form上试着用用,虽然知道Firedac有可能是最终的(或很很长时间内)数据访问技术,可一直不能接受它,其中最大的原因就是过于“复杂” ...

  3. Video Processing subsystem例程分析

    Video Processing subsystem例程分析 1.memory_ss模块 slave端口: S00: 连接设备: microblaze_ss----M_AXI_DC 时钟来源: S01 ...

  4. JavaScript学习总结（二、隐式类型转换、eval（））

    一.(避免)隐式类型转换 console.log(false == 0);   //logs true; console.log(false === 0);   //logs false; conso ...

  5. linux 简单笔记

    Linux查看端口使用状态.关闭端口方法    http://blog.csdn.net/wudiyi815/article/details/7473097

  6. Flask--四种请求钩子函数

    请求钩子函数:请求前,请求后需要做的处理 @app.before_first_request-在第一次请求之前执行 @app.before_request-在每一次请求之前执行 @app.after_ ...

  7. python selenium right click on an href and choose Save link as... on Chrome.

    From:https://stackoverflow.com/questions/42781483/right-click-on-an-href-and-choose-save-link-as-in- ...

  8. 基于单片机的Wifi温度湿度测量仪

    这次的制作背景是由于单片机课程实训课程要求 刚好手上有块ESP8266-12F的WiFi模块 于是就选择了制作一个基于单片机,使用WiFi传输数据的温湿度采集测量仪 制作过程: 由于有使用过WiFi模 ...

  9. 学习笔记之Supervised Learning with scikit-learn | DataCamp

    Supervised Learning with scikit-learn | DataCamp https://www.datacamp.com/courses/supervised-learnin ...

  10. HttpServletRequest接收参数的几种方法

    HttpServletRequest接收参数的几种方法 我们经常用servlet和jsp, 经常用request.getParameter() 来得到数据. request.getParameter( ...