快捷導航

js中script的上下放置區(qū)別，Dom的增刪改創(chuàng)建操作實例分析

更新時間：2019年12月16日 11:25:39 作者：dawn-liu

這篇文章主要介紹了js中script的上下放置區(qū)別，Dom的增刪改創(chuàng)建操作,結(jié)合實例形式分析了JavaScript基本dom事件、script在head和body中放置的區(qū)別、以及Dom的增刪改創(chuàng)建等相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了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>';文本和標簽一起渲染
oInput.value='alex';僅僅是對表單控件有效

標簽屬性操作；

設(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>

應用場景分析

如果是一開始頁面有初始化渲染開銷；應用：頻繁的切換：display:none|block 或者追加className 刪除className

如果是DOM的創(chuàng)建和刪除如果你是頻繁的切換，對DOM的性能消耗很大，所以最好應用在少量的切換上面

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關(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è)計有所幫助。

您可能感興趣的文章: