回顾

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. 读DataSnap源代码（五）

    function TDSHTTPWebDispatcher.DispatchRequest(Sender: TObject; Request: TWebRequest; Response: TWebR ...

  2. Linux 命令自动补齐快捷键

    Linux 命令自动补齐快捷键 : TAB

  3. 响应json去除参数值为空的参数-springboot配置

    1.添加jackson相关依赖 <!--jackson 开始--><dependency> <groupId>com.fasterxml.jackson.core& ...

  4. CAD中的各种Polyline

    序号 类 类名 dxf代码 1 Polyline2d AcDb2dPolyline POLYLINE 2 Polyline3d AcDb3dPolyline POLYLINE 3 Polyline A ...

  5. 黄聪： $(document).click() 在iphone上不触发事件解决办法

    解决方案:加上 touchstart 事件 $(document).on(“click touchstart”, “.name”, function() { alert(“name”); });  

  6. Daubechies小波介绍

    Daubechies小波是正交.连续且紧支撑的. 正交条件下,$H(\omega)$必须满足下式: $|H(\omega)|^2+|H(\omega + \pi)|^2 =1$ 连续紧支撑条件下,$H ...

  7. C++进阶--命名空间和关键字using

    //############################################################################ /* * C++关键字:using * * ...

  8. TweenMax 参考

    http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的"怪事&qu ...

  9. Java知识之运算符篇

    运算符 算术运算符:+.-.*./ 和 %,两个整数相除,结果还是整数. 赋值运算符:=.+=.-=.*=./=.%=.&=.|=.~=.^=.<<=.>>= . &g ...

  10. MyBatis 值的传递

    1.值的传递 - Map传值 可以通过对象获取Map传递值,在配置文件中通过 #{} 或 ${} 进行应用 查询30-40岁的用户 <!-- 值的传递 - Map传值 --> <se ...