js中script的上下放置区别,Dom的增删改创建操作实例分析


Posted in Javascript onDecember 16, 2019

本文实例讲述了js中script的上下放置区别,Dom的增删改创建操作。分享给大家供大家参考,具体如下:

回顾

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的三步走

  • ①、事件对象
  • ②、事件、
  • ③、事件驱动

值操作: <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的性能消耗很大,所以最好应用在少量的切换上面

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Javascript 各浏览器的 Javascript 效率对比
Jan 23 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
Oct 12 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 #Javascript
javascript自定义右键菜单插件
Dec 16 #Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 #Javascript
js实现数字滚动特效
Dec 16 #Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 #Javascript
js实现内置计时器
Dec 16 #Javascript
js实现秒表计时器
Dec 16 #Javascript
You might like
PHP脚本的10个技巧(3)
2006/10/09 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
js操作iframe父子窗体示例
2014/05/22 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
python控制台显示时钟的示例
2014/02/24 Python
python实用代码片段收集贴
2015/06/03 Python
python装饰器与递归算法详解
2016/02/18 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python实现三维拟合的方法
2018/12/29 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
SpringBoot实现登录注册常见问题解决方案
2020/03/04 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
企业管理部经理岗位职责
2013/12/24 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang