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 获取网页参数系统
Jul 19 Javascript
关于javascript document.createDocumentFragment()
Apr 04 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
javascript实现下拉提示选择框
Dec 29 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
js实现文字截断功能
Sep 14 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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强制下载类型的实现代码
2011/04/21 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
pyhton列表转换为数组的实例
2018/04/04 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python中的itertools的使用详解
2020/01/13 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
怎样声明子类
2013/07/02 面试题
机械设计专业应届生求职信
2013/11/21 职场文书
升职自荐信
2013/11/28 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
德语专业求职信
2014/03/12 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
美术教师个人总结
2015/02/06 职场文书
表彰大会新闻稿
2015/07/17 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
初中思想品德教学反思
2016/02/24 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
nginx对http请求处理的各个阶段详析
2021/03/31 Servers