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