回顾

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. Go并发控制--context的使用

    并发控制 Cancel Example 通过使用WithCancel可以取消一个或多个goroutine的执行,以实现对并发的控制. package main import ( "conte ...

  2. RedHat7.3创建本地yum源

    [root@master ~]# mkdir -p /var/www/html 使用安装系统的ISO镜像文件rhel-server-7.3-x86_64-dvd.iso 把rhel-server-7. ...

  3. 【java】JDK与JRE的区别

    JRE和JDK区别: JDK和JRE提供的服务包: JDK是整个JAVA的核心,JDK包含如下核心组件: ·javac – 编译器 ·jar – 打包工具 ·javadoc – 文档生成器 ·jdb ...

  4. Video Processing subsystem例程分析

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

  5. Go 缓冲信道和非缓冲信道

    非缓冲信道是一个进一个出,再一个进再一个出,信道内是不保存数据的 缓冲信道是可以很多个依次进去,存储在信道里,然后一个一个的按次序取出来. 不过缓冲信道如果超过了预期的存入个数,会发生信道阻塞,只有把 ...

  6. svn项目清除svn链接信息

    如果copy的项目原来有svn连接信息,测试新技术新方案时可能会有隐患,不小心上传svn很造成很多麻烦. 这时先删除svn连接是比较好的选择. 删除svn的方法是删除项目根目录下的.svn文件夹.这个 ...

  7. C++中sort函数小结

    我们都知道,sort函数是C++标准库<algorithm>中的一个库函数.它的功能是对数组/容器中的元素进行排序.用法示例如下: 一.对数组进行排序 示例: int a[] = {1,3 ...

  8. 【ApplicationContext】通过实现ApplicationContextAware接口获取bean

    SpringApplicationUtils.java import org.springframework.beans.BeansException; import org.springframew ...

  9. gmake缺失错误

    原文:http://blog.csdn.net/syh_486_007/article/details/53862831 编译nachos程序的时候发现了这样一个错误gmake: command no ...

  10. 1118 Birds in Forest （25 分）

    1118 Birds in Forest (25 分) Some scientists took pictures of thousands of birds in a forest. Assume ...