亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript WebAPI、DOM、事件和操作元素實例詳解

 更新時間：2021年06月11日 10:57:16   作者：YuLong~W  
這篇文章主要給大家介紹了關于JavaScript WebAPI、DOM、事件和操作元素的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友可以參考下

WebAPI

API：應用程序編程接口，是一些預先定義的函數(shù)，由某個軟件開放給開發(fā)人員使用的，幫助開發(fā)者實現(xiàn)某種功能，開發(fā)人員無須訪問源碼、無須理解其內(nèi)部工作機制細節(jié)，只需知道如何使用即可

簡單理解： API 是給程序員提供的一種工具，以便能更輕松的實現(xiàn)想要完成的功能

WebAPI：主要針對瀏覽器的API，在JavaScript語言中被封裝成了對象，通過調(diào)用對象的屬性和方法就可以使用Web API

簡單理解：Web API 是瀏覽器提供的一套操作瀏覽器功能和頁面元素的 API ( BOM 和 DOM )

DOM

文檔對象模型，是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口

DOM樹

DOM將HTML文檔處理成樹形(倒)結構，將html文檔看作是一棵樹，文檔中的標簽、標簽的屬性、標簽的內(nèi)容都是數(shù)的節(jié)點

4Mg==,size_16,color_FFFFFF,t_70)

DOM樹最頂端是document，BOM最頂端是window

  • 文檔（document）一個頁面當成文檔
  • 元素（element）頁面中所有標簽元素
  • 節(jié)點（node）網(wǎng)頁中的所有內(nèi)容，在文檔樹中都是節(jié)點（如：元素節(jié)點、屬性節(jié)點、文本節(jié)點、注釋節(jié)點等），每個節(jié)點都是對象，都有屬性和方法

DOM獲取元素方式

獲取方式 用法 返回值
根據(jù)Id獲取 document.getElementById(‘id') 返回指定id的元素對象，未找到返回null，存在多個id返回undefined
根據(jù)標簽名 document.getElementsByTagName(‘標簽名') 返回的是指定標簽的動態(tài)集合，是一個類數(shù)組對象，偽數(shù)組，但不是數(shù)組?？梢酝ㄟ^下標索引訪問
根據(jù)Name獲取 document.getElementByName(‘name屬性值') 返回指定name的元素對象集合
根據(jù)ClassName獲?。╤tml5新增） document.getElementByClassName(‘class屬性值') 返回指定classname的元素對象集合
根據(jù)選擇器獲?。ㄐ略觯?/td> document.querySelector(‘選擇器') 獲取的是給定選擇器元素，只能返回給定選擇器第一個元素
根據(jù)選擇器獲?。ㄐ略觯?/td> document.querySelectorAll(‘選擇器') 獲取的是給定選擇器元素，返回元素的集合

document對象屬性

方法 作用
document.body 返回文檔的body元素
document.title 返回文檔的title元素，表示頁面的標題
document.documentElement 返回文檔的html元素，即HTML頁面的全部信息（通過此可以將文檔全部元素放進一個字符串，供別人讀取分析
document.froms 返回對文檔中所有From對象引用，復數(shù)形式，可以返回多個表單
document.images 返回對文檔中所有的image對象，與上述一樣

事件

事件：用戶進行某種操作（可被JavaScript偵測到的行為），是一種“觸發(fā)-響應”的機制，是實現(xiàn)頁面交互的方式

事件三要素：

事件源：誰觸發(fā)了事件事件類型：觸發(fā)了什么事件事件處理程序：事件被觸發(fā)后所執(zhí)行的代碼（函數(shù)形式）

事件的使用步驟

<body>
  <button id="btn">單擊</button>
  <script>
    var btn = document.getElementById('btn')// 第1步：獲取事件源
    // 第2步：注冊事件btn.onclick
    btn.onclick = function () { // 第3步：添加事件處理程序（采取函數(shù)賦值形式）
        alert('彈出')
    }
  </script>
</body>

事件名=函數(shù)名（[參數(shù)]）

注意：創(chuàng)建按鈕的方式（2種）

<input type="button" value="按鈕顯示文字">
<button type="button">按鈕顯示文字</value>

事件的類型

操作元素

操作元素內(nèi)容

DOM提供的屬性實現(xiàn)對元素內(nèi)容的操作方法：

  • innerHTML （W3C）識別html標簽。在使用時會保留編寫的格式以及標簽樣式
  • innerText（非標準）不識別html標簽。去掉所有格式以及標簽的純文本內(nèi)容
  • textContent屬性在去掉標簽后會保留文本格式
<body>
    <div id="box">
        The first paragraph...
        <p>
            The second paragraph...
            <a href="#">third</a>
        </p>
    </div>
</body>
<script>
    var box = document.getElementById('box')
    console.log(box.innerHTML)
    console.log(box.innerText)
    console.log(box.textContent)
</script>

操作元素屬性

在DOM中，HTML屬性操作是指使用JavaScript來操作一個元素的HTML屬性

  • 元素中：src、href等
  • 表單中：id、alt、title等

操作元素樣式

①操作style屬性：元素對象.style.樣式屬性名

樣式屬性名對應CSS樣式名，但需要去掉CSS樣式名里的半字線“-”，并將半字線后面的英文的首字母大寫

<body>
    <div id="box"></div>
    <script>
        var ele = document.querySelector('#box'); // 獲取元素對象
        ele.style.backgroundColor= 'red';
        ele.style.width = '100px';
        ele.style.height = '100px';
        ele.style.transform = 'rotate(7deg)';
    </script>
    <!-- 上述3行代碼相當于在CSS中添加以下樣式： -->
    <style>
        #box {
            background-color: red;
            width: 100px;
            height: 100px;
            transform: rotate(7deg);
        }
    </style>
</body>

②操作className屬性：元素對象.className

  • 在開發(fā)中，如果樣式修改較多，可以采取操作類名的方式更改元素樣式
  • 訪問className屬性的值表示獲取元素的類名，為className屬性賦值表示更改元素類名
  • className會更改元素的類名，會覆蓋原先的類名
  • 如果元素有多個類名，在className中以空格分隔

排他思想

如果有同一組元素，要某一個元素實現(xiàn)某種樣式， 需要用到循環(huán)的排他思想算法：

  • 所有元素全部清除樣式（干掉其他人）
  • 給當前元素設置樣式 （留下我自己）
  • 注意順序不能顛倒，首先干掉其他人，再設置自己

H5自定義屬性

自定義屬性目的： 是為了保存并使用數(shù)據(jù)。有些數(shù)據(jù)可以保存到頁面中而不用保存到數(shù)據(jù)庫中

有些自定義屬性很容易引起歧義，不容易判斷是元素的自帶屬性還是自定義屬性，HTML5新增了自定義屬性的規(guī)范，在HTML5中規(guī)定通過“data-屬性名”的方式設置自定義屬性

設置屬性值：

①在HTML中設置自定義屬性

data-屬性名=‘值'

// 在div元素上設置data-index屬性
<div data-index="2"></div>

②在JavaScript中設置自定義屬性

  • element.setAttribute(‘屬性', 值)
  • element.dataset.屬性名=‘值'
<div></div>
<script>
    var div = document.querySelector('div');
    div.dataset.index = '2';
     div.setAttribute('data-name', 'andy');
</script>

獲取屬性值：

  • element.getAttribute()
  • element.dataset.屬性
  • element.dataset[‘屬性'] （有兼容性問題）

注意： dataset是一個集合，里面存放了所有以data開頭的自定義屬性，如果自定義屬性里面包含有多個連字符（-）時，獲取的時候采取駝峰命名法

<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
  var div = document.querySelector('div');
  console.log(div.getAttribute('data-index'));       // 結果為：2
  console.log(div.getAttribute('data-list-name')); // 結果為：andy
  // HTML5新增的獲取自定義屬性的方法，只能獲取“data-”開頭的屬性
  console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
  console.log(div.dataset.index);           // 結果為：2
  console.log(div.dataset['index']);        // 結果為：2
  console.log(div.dataset.listName);      // 結果為：andy
  console.log(div.dataset['listName']);  // 結果為：andy
</script>

移除屬性值：

element.removeAttribute(‘屬性')

<div id="test" class="footer" ></div>
<script>
    var div = document.querySelector('div');   
    div.removeAttribute('id');        // 移除div元素的id屬性
    div.removeAttribute('class');   // 移除div元素的class屬性                        
</script>

具體操作元素案例見文章： JavaScript 操作元素案例練習

總結

到此這篇關于JavaScript WebAPI、DOM、事件和操作元素的文章就介紹到這了,更多相關js WebAPI、DOM、事件和操作元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • JS async 函數(shù)的含義和用法實例總結

    JS async 函數(shù)的含義和用法實例總結

    這篇文章主要介紹了JS async 函數(shù)的含義和用法,結合實例形式總結分析了JS async 函數(shù)的基本功能、含義、使用方法及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • 每天一篇javascript學習小結（String對象）

    每天一篇javascript學習小結（String對象）

    這篇文章主要介紹了javascript中的String對象知識點，對String對象的基本使用方法，以及各種方法進行整理，感興趣的小伙伴們可以參考一下
    2015-11-11
  • Js 本頁面?zhèn)髦祵崿F(xiàn)代碼

    Js 本頁面?zhèn)髦祵崿F(xiàn)代碼

    記得以前在學校的時候,例如要修改信息,需要要修改的部分的值顯示出來,都是先把數(shù)據(jù)傳到后臺,然后再在前臺顯示的,想想真夠笨的,這個可以在客戶端就實現(xiàn)的,何必要傳到后臺呢
    2009-05-05
  • 網(wǎng)站繁簡切換的JS遇到頁面卡死的解決方法

    網(wǎng)站繁簡切換的JS遇到頁面卡死的解決方法

    最近開發(fā)了繁體版本的網(wǎng)站，在網(wǎng)上找了一段比較流行的繁簡切換的JS實現(xiàn)了，不過后來卻發(fā)現(xiàn)，有些頁面會卡死，針對這個問題，下面有個不錯的解決方法
    2014-03-03
  • javascript實現(xiàn)的字符串轉換成數(shù)組操作示例

    javascript實現(xiàn)的字符串轉換成數(shù)組操作示例

    這篇文章主要介紹了javascript實現(xiàn)的字符串轉換成數(shù)組操作,涉及javascript字符串與數(shù)組相互轉換、以及數(shù)組反轉相關操作技巧,需要的朋友可以參考下
    2019-06-06
  • Bootstrap導航條學習使用(二)

    Bootstrap導航條學習使用(二)

    這篇文章主要為大家詳細介紹了Bootstrap導航條的使用方法第二篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-02-02
  • 《JavaScript DOM 編程藝術》讀書筆記之JavaScript 語法

    《JavaScript DOM 編程藝術》讀書筆記之JavaScript 語法

    這篇文章主要介紹了《JavaScript DOM 編程藝術》讀書筆記之JavaScript 語法,需要的朋友可以參考下
    2015-01-01
  • uniapp內(nèi)置組件scroll-view案例詳解(完整代碼)

    uniapp內(nèi)置組件scroll-view案例詳解(完整代碼)

    這篇文章主要介紹了uniapp內(nèi)置組件scroll-view案例詳解,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧
    2024-07-07
  • 公共js在頁面底部加載的注意事項介紹

    公共js在頁面底部加載的注意事項介紹

    JavaScript腳本文件都放在頁面底部加載，可以有效地加快頁面的加載速度，下面為大家介紹下書寫時的注意事項
    2013-07-07
  • JavaScript indexOf的第二個參數(shù)用法

    JavaScript indexOf的第二個參數(shù)用法

    indexOf 是我們非常熟悉的一個方法,它可以用來獲取某一個元素在一個數(shù)組里的位置,我們一般就會使用 array.indexOf(element) 的方法來進行使用,但是,大家有沒有使用過 indexOf 的第二個參數(shù)呢？本文將給大家介紹一下indexOf的第二個參數(shù)用法,需要的朋友可以參考下
    2024-02-02

最新評論