回顾

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. mysql二进制日志详解

    一.什么是二进制日志 二进制日志主要记录mysql数据库的变化,二进制日志包含所有更新了数据或者潜在更新了数据(如没有匹配到任何行的delete语句),语句以时间的形式保存,描述了数据的更改.二进制日 ...

  2. OpenCV相机标定坐标系详解

    在OpenCV中,可以使用calibrateCamera函数,通过多个视角的2D/3D对应,求解出该相机的内参数和每一个视角的外参数. 使用C++接口时的输入参数如下: objectPoints - ...

  3. SQL Server 数值四舍五入，小数点后保留2位

    1.round() 函数是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置我们四舍五入之后小数点后显示几位. 2.numeric 函数的2个参数,第一个表示数据长度,第二个参数表示小数点后 ...

  4. 手机浏览器User-Agent信息

    ChormeMozilla/5.0 (Linux; Android 4.2.1; AMOI N828 Build/JOP40D) AppleWebKit/537.36 (KHTML, like Gec ...

  5. [转] LINUX内核代码编程规范

    这是一个简短的文档,描述了linux内核的首选代码风格.代码风格是因人而异的,而且我 不愿意把我的观点强加给任何人,不过这里所讲述的是我必须要维护的代码所遵守的风格, 并且我也希望绝大多数其他代码也能 ...

  6. 转：区块链开发（一）搭建基于以太坊go-ethereum的私有链环境

    区块链开发(一)搭建基于以太坊go-ethereum的私有链环境 wo541075754 · 2016-11-07 13:00:03 · 3730 次点击 · 预计阅读时间 3 分钟 · 约1小时前  ...

  7. iCheck .js各种各样的插件 fuck Javascript

    http://www.bootcss.com/p/icheck/ 1.先看下网上下载的demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  8. 【巷子】---redux---【react】

    一.flux的缺陷 因为dispatcher和Store可以有多个互相管理起来特别麻烦 二.什么是redux 其实redux就是Flux的一种进阶实现.它是一个应用数据流框架,主要作用应用状态的管理 ...

  9. docker-compose网络设置之networks

    networks使用方式之官网教程 官网的docker-compose.yml参考文档:Compose file version 3 reference 较为准确的中文翻译版:Compose file ...

  10. 黄聪：VPS服务器轻松备份工具配置