欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年12月16日 11:25:39   作者:dawn-liu  
這篇文章主要介紹了js中script的上下放置區(qū)別,Dom的增刪改創(chuàng)建操作,結(jié)合實(shí)例形式分析了JavaScript基本dom事件、script在head和body中放置的區(qū)別、以及Dom的增刪改創(chuàng)建等相關(guān)操作技巧,需要的朋友可以參考下

本文實(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)文章

  • nodejs分離html文件里面的js和css的方法

    nodejs分離html文件里面的js和css的方法

    這篇文章主要介紹了nodejs分離html文件里面的js和css的方法,本文需要分離出一個(gè)html 文件里面的script 和style 里面的內(nèi)容,然后單獨(dú)生成js文件和css 文件,感興趣的可以了解一下
    2019-04-04
  • javascript實(shí)現(xiàn)手機(jī)震動(dòng)API代碼

    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-08
  • JavaScript Array對(duì)象詳解

    JavaScript Array對(duì)象詳解

    這篇文章主要為大家詳細(xì)介紹了JavaScript function函數(shù)種類(lèi),知識(shí)點(diǎn)很全面,包括普通函數(shù)、匿名函數(shù)、閉包函數(shù),感興趣的小伙伴們可以參考一下
    2016-03-03
  • JS加載器如何動(dòng)態(tài)加載外部js文件

    JS加載器如何動(dòng)態(tài)加載外部js文件

    這篇文章主要介紹了JS加載器如何動(dòng)態(tài)加載外部js文件的相關(guān)資料,需要的朋友可以參考下
    2016-05-05
  • JS獲取img圖片原始尺寸高度與寬度的七種方式

    JS獲取img圖片原始尺寸高度與寬度的七種方式

    近期做項(xiàng)目由于每張圖片加載的時(shí)候比例大小都不一樣,加載圖片時(shí)大部分圖片會(huì)變形,導(dǎo)致圖片展示效果非常差,所以我們可以獲取圖片的原始寬高,然后以等比例展示,效果會(huì)非常好,這篇文章主要給大家介紹了關(guān)于JS獲取img圖片原始尺寸高度與寬度的七種方式,需要的朋友可以參考下
    2022-11-11
  • js中 計(jì)算兩個(gè)日期間的工作日的簡(jiǎn)單實(shí)例

    js中 計(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í)例代碼

    利用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-01
  • JS中函數(shù)科里化的背景與應(yīng)用實(shí)例教程

    JS中函數(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-06
  • 模擬windows平臺(tái)的上下文菜單效果代碼

    模擬windows平臺(tái)的上下文菜單效果代碼

    技術(shù)上沒(méi)什么難的,就是定義一個(gè)隱藏的box,當(dāng)觸發(fā)上下文事件時(shí)顯示它,當(dāng)單擊body任意處時(shí)又隱藏它。
    2011-03-03
  • VBS通過(guò)WMI監(jiān)視注冊(cè)表變動(dòng)的代碼

    VBS通過(guò)WMI監(jiān)視注冊(cè)表變動(dòng)的代碼

    似乎有人覺(jué)得用VBS監(jiān)視注冊(cè)表很高級(jí)?使用了WMI事件而已,跟《用VBS監(jiān)視進(jìn)程創(chuàng)建和刪除》一樣
    2011-10-10

最新評(píng)論