网站优化

微信邀请函小程序_js中script的上下放置差异,D

作者:admin 发布时间:2021-01-06
js中script的上下放置区别,Dom的增删改创建操作实例分析     -liu   这篇文章主要介绍了js中script的上下放置区别,Dom的增删改创建操作,结合实例形式分析了JavaScript基本dom事件、script在head和body中放置的区别、以及Dom的增删改创建等相关操作技巧,需要的朋友可以参考下

本文实例讲述了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'). unction(){
 。。。。。。
 /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'). unction(){
 //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'). unction(){
 $('box').removeChild($('p1'));
 $('box').removeChild($('abc'));
 /script 
 /body 
 /html 

应用场景分析

如果是一开始页面有初始化渲染开销;应用:频繁的切换:display:none|block  或者 追加className 删除className

如果是DOM的创建和删除 如果你是频繁的切换,对DOM的性能消耗很大,所以最好应用在少量的切换上面

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

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



收缩