溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js中script上下放置的區別是什么，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體如下：
回顧
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 liangoDiv.innerText='too liang';僅僅設置文本oDiv.innerHTML='<h3>too liang</h3>';文本和標簽一起渲染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.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“js中script上下放置的區別是什么”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
