js中script的上下放置區(qū)別,Dom的增刪改創(chuàng)建操作實(shí)例分析
本文實(shí)例講述了js中script的上下放置區(qū)別,Dom的增刪改創(chuàng)建操作。分享給大家供大家參考,具體如下:
回顧
javascript分為三部分:
1、ECMAScript5.0 es6(阮一峰) es7 es8 es6中有類的概念
聲明變量 var let(es6中語法)
內(nèi)置函數(shù) Date Math.random
if else switch while do-while for
2、DOM Document Object Model
獲取DOM事件的三種方式
- getElementById()
- getElementsByTagName()
- getElementsByClassName()
DOM的三步走
- ①、事件對象
- ②、事件、
- ③、事件驅(qū)動
值操作: <div></div> too liang
oDiv.innerText='too liang';
僅僅設(shè)置文本
oDiv.innerHTML='<h2>too liang</h2>';
文本和標(biāo)簽一起渲染
oInput.value='alex';
僅僅是對表單控件有效
標(biāo)簽屬性操作;
設(shè)置類名:oDiv.className+=' active';
追加類名、
設(shè)置id:oDiv.id='box';
樣式操作:
oDiv.style.(css中所有的樣式屬性)
注意駝峰體:如果margin-left 使用js的時候marginLeft
3、BOM
<script></script>在head和body中放置的區(qū)別
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //加載順序:1DOM元素加載 2圖片加載 //1等待DOM和圖片資源加載完成之后才調(diào)用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的相關(guān)操作,使用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和圖片資源加載完成之后才調(diào)用window.onload后面的方法 //2事件覆蓋現(xiàn)在,同時存在多個window.noload時,后面的覆蓋前面的 window.onload=function () { // var oBtn=document.getElementById('btn'); // console.log(oBtn); function $(idName){ return document.getElementById(idName); } $('btn').onclick=function(){ //1DOM的創(chuàng)建 var oP=document.createElement('p'); //2 DOM的追加 $('box').appendChild(oP); //3 DOM的修改 oP.innerText='alex'; oP.id='p1';//設(shè)置id var oA=document.createElement('abc');//自定義創(chuàng)建 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>
應(yīng)用場景分析
如果是一開始頁面有初始化渲染開銷;應(yīng)用:頻繁的切換:display:none|block 或者 追加className 刪除className
如果是DOM的創(chuàng)建和刪除 如果你是頻繁的切換,對DOM的性能消耗很大,所以最好應(yīng)用在少量的切換上面
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
javascript實(shí)現(xiàn)手機(jī)震動API代碼
一個新的API出來了。HTML5 (很快)將支持用戶設(shè)備振動。這明顯是很有趣的事情,比如它可以用戶觸發(fā)提醒,提升游戲體驗(yàn),下面小編給大家整理javascript手機(jī)震動api,需要的朋友可以參考下2015-08-08利用iscroll4實(shí)現(xiàn)輪播圖效果實(shí)例代碼
iScroll 4 這個版本完全重寫了iScroll這個框架的原始代碼。這個項(xiàng)目的產(chǎn)生完全是因?yàn)橐苿影鎤ebkit瀏覽器(諸如iPhone,iPad,Android 這些系統(tǒng)上廣泛使用)。下面這篇文章主要介紹了利用iscroll4實(shí)現(xiàn)輪播圖效果的方法教程,需要的朋友可以參考下。2017-01-01JS中函數(shù)科里化的背景與應(yīng)用實(shí)例教程
在數(shù)學(xué)和計算機(jī)科學(xué)中,柯里化是一種將使用多個參數(shù)的一個函數(shù)轉(zhuǎn)換成一系列使用一個參數(shù)的函數(shù)的技術(shù),下面這篇文章主要給大家介紹了JS中函數(shù)科里化的背景與應(yīng)用實(shí)例的相關(guān)資料,需要的朋友可以參考下2022-06-06