回顾

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程序之mysqladmin详解

    mysqladmin命令 mysqladmin是执行管理操作的客户端.您可以使用它来检查服务器的配置和当前状态,以创建和删除数据库等 用法: mysqladmin [OPTIONS] command ...

  2. Linux shell脚本读取用户输入的参数

    新建一个test.sh文件 #!/bin/sh echo "1 : For Test" echo "2 : For nohup &" whiletrue ...

  3. Eclipse各个版本及其对应代号、下载地址列表

    版本号 代码 日期 下载地址 Eclipse 3.1 IO[木卫一,伊奥] 2005 http://archive.eclipse.org/eclipse/downloads/drops/R-3.1- ...

  4. mac里安装Mycrypt扩展

    https://jingyan.baidu.com/article/e3c78d644cf1ed3c4c85f5a8.html 先用homebrew安装mycrpt 再下载php5.6版本源码 然后进 ...

  5. Opencv 视频保存为图像

    // 视频存为图片.cpp : 定义控制台应用程序的入口点. // /*================================================================ ...

  6. Java Base64编码

    使用commons-codec, 下载地址 http://commons.apache.org/proper/commons-codec/ 下载commons-codec-1.12-bin.zip,解 ...

  7. PHP批量添加数据

    <?php // 连接数据库 header('content-type:text/html;charset=utf-8'); define('DB_HOST','127.0.0.1'); def ...

  8. 【springBoot】之快速构建一个web项目

    基于maven,首先看pom文件 <parent> <groupId>org.springframework.boot</groupId> <artifact ...

  9. bzoj5045: 打砖块

    Description 小Q最近沉迷于一款新型<打砖块>游戏.在每局游戏中,呈现在屏幕上的是一堵无限大小的墙壁.墙壁上镶嵌着 无数长度为2.宽度为1的砖块.墙壁被分成若干行,每行宽度都为1 ...

  10. etcd集群部署与遇到的坑(转)

    原文 https://www.cnblogs.com/breg/p/5728237.html etcd集群部署与遇到的坑 在k8s集群中使用了etcd作为数据中心,在实际操作中遇到了一些坑.今天记录一 ...