亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 29
粉絲 0
評論 0
訪問量 18917
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JavaScript DOM 基本操作：元素獲取、遍歷以及修改
尹輝
原創(chuàng)
473人瀏覽過

DOM 基本操作

（1）獲取 DOM 元素

1，通用方式

  1. <!-- HTML 文檔結(jié)構(gòu) -->
  2. <ul class="list">
  3.     <li>item1</li>
  4.     <li>item2</li>
  5.     <li>item3</li>
  6.     <li>item4</li>
  7.     <li>item5</li>
  8.     <li>item6</li>
  9. </ul>

  1. querySelectorAll(選擇器)：獲取滿足選擇器（ CSS 選擇器 ）條件的所有元素

    1. let liList = document.querySelectorAll("li");
    2. console.log(liList);
    3. /** 返回元素節(jié)點(diǎn)列表（“類”數(shù)組）
    4.  * NodeList(6)
    5.  * 0: li
    6.  * 1: li
    7.  * 2: li
    8.  * 3: li
    9.  * 4: li
    10.  * 5: li
    11.  * length: 6
    12.  */

    獲取的元素節(jié)點(diǎn)列表（NodeList）不是數(shù)組，但可以使用部分的數(shù)組方法：forEach()、entries()、item()、keys()、values() 等，也擁有 length 屬性，也可以用 for of 遍歷。

    1. // for of 遍歷
    2. let liList = document.querySelectorAll("li");
    3. console.log(liList);
    4. for (let item of liList){
    5.     console.log(item);
    6. }
    8. // forEach() 遍歷
    9. liList.forEach(item => console.log(item));
    11. // forEach() 遍歷無返回值，如果需要返回值，需要將 NodeList 轉(zhuǎn)換為數(shù)組，然后用 map() 操作
    12. // 類數(shù)組 轉(zhuǎn)換為 數(shù)組：Array.from() 或者 ...rest
    13. let arrList = Array.from(liList);    // 等同于：let arrList = [...liList];
    14. console.log(arrList);
    15. // 然后就可以用 map() 進(jìn)行操作了
    16. arrList.map(item => item.style.color = 'red')    // 所有列表項(xiàng)的內(nèi)容都顯示為紅色

  2. querySelector(選擇器)：獲取滿足選擇器條件的第一個(gè)元素

    1. let firstList = document.querySelector("li");
    2. console.log(firstList);    /* <li>item1</li> */
    4. // 也可以使用 querySelectorAll(選擇器) 加索引獲取第一個(gè)元素
    5. let first = document.querySelectorAll("li")[0];
    6. console.log(first.textContent);    /* item1 */

  3. 過時(shí)的用法（不建議使用）

    1. let firstList = document.getElementById('first');
    2. let firstOne = document.getElementsByClassName('one')[0];
    3. let firstOneByTag = document.getElementsByTagName('li')[0];

2，快捷獲取頁面主要元素/信息

  1. body : document.body，獲取元素

    1. console.log(document.body);
    2. // 等同于： console.log(document.querySelector('body'));

  2. head : document.head，獲取元素

    1. console.log(document.head);
    2. // 等同于： console.log(document.querySelector('head'));

  3. title : document.title，獲取<title>元素內(nèi)部的文本

    1. console.log(document.title);
    2. // 等同于： console.log(document.querySelector('title').textContent);

  4. html : document.documentElement，獲取元素

    1. console.log(document.documentElement);
    2. // 等同于： console.log(document.querySelector('html'));

  5. doctype : document.doctype，獲取文檔類型：<!DOCTYPE html>

    1. console.log(document.doctype);

  6. url : document.URL，獲取當(dāng)前頁面的 url 地址

    1. console.log(document.URL);

  7. window : document.defaultView，獲取 window 對象

    1. console.log(document.defaultView);

  8. cookie : document.cookie，獲取 cookie

    1. console.log(document.cookie);

  9. script : document.scripts，獲取 script 腳本

    1. console.log(document.scripts);

  10. styleSheets: document.styleSheets，獲取樣式

    1. console.log(document.styleSheets);

3，獲取表單數(shù)據(jù)

  1. // HTML 文檔結(jié)構(gòu)
  2. <form action="#" method="post" id="login">
  3.     <fieldset class="login" style="display: inline-grid; gap: 10px">
  4.         <legend>用戶登錄</legend>
  5.         <div>
  6.             <label for="email">郵箱:</label>
  7.             <input type="email" name="my_email" id="email" value="admin@php.cn" autofocus />
  8.         </div>
  9.         <div>
  10.             <label for="password">密碼:</label>
  11.             <input type="password" name="password" id="password" value="123456" />
  12.         </div>
  13.         <button>提交</button>
  14.     </fieldset>
  15. </form>

  1. 表單: document.forms.id，獲取表單元素

    1. // 通用方法
    2. console.log(document.querySelector('#login'));
    3. // 快捷方法
    4. console.log(document.forms);    // 獲取的是所有表單的集合
    5. // 以下是獲取指定的表單元素
    6. console.log(document.forms[0]);
    7. console.log(document.forms.item(0));
    8. console.log(document.forms.login);    // 推薦用法，簡便、高效

  2. 控件: forms.name/id，獲取表單控件元素

    1. // 從 document 為起點(diǎn)查找獲取
    2. // 通過控件 name 屬性獲取
    3. console.log(document.forms.login.my_email);    // 郵箱 <input> 元素
    4. // 通過控件 id 屬性獲取
    5. console.log(document.forms.login.email);    // 郵箱 <input> 元素
    7. // 也可以先獲取 form 元素并賦值給變量，然后從獲取的 form 元素為起點(diǎn)查找獲取
    8. let form = document.forms.login;
    9. console.log(form.my_email);
    10. console.log(form.my_email.value);
    12. // 獲取控件的值：forms.name/id.value
    13. console.log(form.my_email.value);    /* admin@php.cn */
    14. console.log(form.password.value);    /* 123456 */

  3. 拿到 form 中用戶提交的郵箱和密碼，然后進(jìn)行封裝和解析

    1. // 1，獲取用戶郵箱和密碼
    2. let email = document.forms.login.my_email.value;
    3. let passWorld = document.forms.login.password.value;
    5. // 2，封裝成對象
    6. let user = {email, passWorld};   // 屬性名 和 屬性值變量名 相同時(shí)可以只寫 屬性名。
    8. // 2，對象（obj） 解析為 json 字符串
    9. let json = JSON.stringify(user);
    10. console.log(json);  // {"email":"admin@php.cn","passWorld":"123456"}

4，遍歷 DOM

知識(shí)點(diǎn)：節(jié)點(diǎn)類型（nodeType）

document：文檔節(jié)點(diǎn)，9

element：元素節(jié)點(diǎn)，1

text：文本節(jié)點(diǎn)，3

  1. <!-- HTML 文檔結(jié)構(gòu) -->
  2. <ul class="list">
  3.     <li>item1</li>
  4.     <li>item2</li>
  5.     <li>item3</li>
  6.     <li>item4</li>
  7.     <li>item5</li>
  8.     <li>item6</li>
  9. </ul>

  1. children：獲取所有元素類型子節(jié)點(diǎn)。（childNodes：獲取所有 {各種類型的} 子節(jié)點(diǎn)）

    1. // 獲取 <ul> 元素
    2. const list = document.querySelector('.list');
    4. // childNodes 獲取所有子節(jié)點(diǎn)（包含 文本節(jié)點(diǎn) 和 元素節(jié)點(diǎn)）
    5. let nodeList = list.childNodes;
    6. console.log(nodeList);    /* NodeList(13) [text, li, text, li, text, li, text, li, text, li, text, li, text] */
    8. // 只獲取所有元素類型子節(jié)點(diǎn)，不要其他類型的節(jié)點(diǎn)
    9. // 方法一：將 childNodes 獲取的所有節(jié)點(diǎn)集合，轉(zhuǎn)為數(shù)組，再用 filter() 篩選出元素節(jié)點(diǎn)
    10. nodeList = [...nodeList].filter(item => item.nodeType == 1);
    11. console.log(nodeList);    /* [li, li, li, li, li, li] */ // 數(shù)組
    12. // 方法二：children 直接獲取所有元素類型子節(jié)點(diǎn)，推薦方法
    13. elemList = list.children;
    14. console.log(elemList);    /* HTMLCollection(6) [li, li, li, li, li, li] */

  2. firstElementChild：獲取第一個(gè)元素

    1. console.log(list.firstElementChild);

  3. lastElementChild：獲取最后一個(gè)元素

    1. console.log(list.lastElementChild);

  4. nextElementSibling：獲取下一個(gè)兄弟元素

    1. let first = list.firstElementChild;    /* 第一個(gè) li */
    2. console.log(first.nextElementSibling);    /* 第二個(gè) li */

  5. previousElementSibling：獲取前一個(gè)兄弟元素

    1. let last = list.lastElementChild;    /* 最后一個(gè) li */
    2. console.log(last.previousElementSibling);    /* 倒數(shù)第二個(gè) li */

  6. parentElement：獲取父元素

    1. let last = list.lastElementChild;    /* 最后一個(gè) li */
    2. console.log(last.parentElement);    /* li 的父元素 ul */

  7. contains()：是否是后代

    1. let last = list.lastElementChild;    /* 子元素 li */
    2. let parent = last.parentElement;    /* 父元素 ul */
    3. console.log(parent.contains(last));    /* true */

（2）修改 DOM 元素

1，增刪改 DOM 元素(寫操作)

  1. createElement(): 創(chuàng)建新元素

    1. document.createElement('ul');

  2. append(): 添加新元素，在父元素上調(diào)用，默認(rèn)添加到父元素的尾部（添加為最后的子元素）

    1. const ul = document.createElement('ul');
    2. document.body.append(ul);
    3. for (let i = 0; i < 6; i++){
    4.     const li = document.createElement('li');
    5.     li.append('item-' + (i +1));
    6.     ul.append(li);
    7. }
    8. /**
    9.  * 頁面顯示：
    10.  * · item-1
    11.  * · item-2
    12.  * · item-3
    13.  * · item-4
    14.  * · item-5
    15.  * · item-6
    16.  */
    18. // 注意，每次執(zhí)行 append() 都會(huì)刷行一次頁面，會(huì)造成頁面閃爍和卡頓。
    19. // 應(yīng)該將要添加所有元素先添加到文檔片段中，然后再 append() 將文檔片段一次性添加到文檔。
    20. // 方法見下面的 createDocumentFragment()

  3. createDocumentFragment(): 創(chuàng)建文檔片斷

    1. const ul = document.createElement('ul');
    2. document.body.append(ul);
    4. const frag = document.createDocumentFragment();
    5. for (let i = 0; i < 6; i++){
    6.     const li = document.createElement('li');
    7.     li.append('item-' + (i +1));
    8.     frag.append(li);
    9. }
    11. ul.append(frag);

  4. before(): 在前面追加，兄弟元素上調(diào)用

    1. const three = ul.querySelector(':nth-child(3)');
    2. const li = document.createElement('li');
    3. li.append('new item before three');
    4. three.before(li);
    5. /**
    6.  * · item-1
    7.  * · item-2
    8.  * · new item before three
    9.  * · item-3
    10.  * · item-4
    11.  * · item-5
    12.  * · item-6
    13.  */

  5. after(): 在后面追加，兄弟元素上調(diào)用

    1. li = document.createElement('li');
    2. li.append('new item after three');
    3. three.after(li);
    4. /**
    5.  * · item-1
    6.  * · item-2
    7.  * · new item before three
    8.  * · item-3
    9.  * · new item after three
    10.  * · item-4
    11.  * · item-5
    12.  * · item-6
    13.  */

  6. cloneNode(): 克隆節(jié)點(diǎn)，帶參數(shù) true 表示包括子元素和文本，不帶 true 則只復(fù)制元素本身（空元素）

    1. ul.append(li.cloneNode(true));
    2. /**
    3.  * · item-1
    4.  * · item-2
    5.  * · new item before three
    6.  * · item-3
    7.  * · new item after three
    8.  * · item-4
    9.  * · item-5
    10.  * · item-6
    11.  * · new item after three
    12.  */

  7. replaceChild(): 替換元素，兩個(gè)參數(shù)，第一個(gè)是新的元素，第二個(gè)是要被替換的元素

    1. const p = document.createElement('p');
    2. p.textContent = 'replaced';
    3. ul.replaceChild(p, ul.lastElementChild);
    4. /**
    5.  * · item-1
    6.  * · item-2
    7.  * · new item before three
    8.  * · item-3
    9.  * · new item after three
    10.  * · item-4
    11.  * · item-5
    12.  * · item-6
    13.  *
    14.  *   replaced
    15.  */

  8. remove(): 移除元素，在當(dāng)前元素（要被刪除的）上調(diào)用

    1. ul.lastElementChild.remove();
    2. /**
    3.  * · item-1
    4.  * · item-2
    5.  * · new item before three
    6.  * · item-3
    7.  * · new item after three
    8.  * · item-4
    9.  * · item-5
    10.  * · item-6
    11.  */

2，元素內(nèi)容的獲取與修改

  1. textContent: 全部內(nèi)容(包括 js,css,隱藏內(nèi)容)，推薦

    1. /**
    2.  * HTML 內(nèi)容：
    3.  * <h3>php.cn<span style="display: none">hidden text</span></h3>
    4.  */
    6. // 獲取
    7. let textContent = document.querySelector('h3').textContent;
    8. console.log(textContent);    /* php.cnhidden text */
    10. // 修改
    11. document.querySelector('h3').textContent = '<p>new text</p>'
    12. /**
    13.  * 頁面顯示：<p>new text</p>
    14.  * <p> 標(biāo)簽也被當(dāng)做 <h3> 的文本內(nèi)容
    15.  */

  2. innerText: 返回已渲染(可見)內(nèi)容

    1. /**
    2.  * HTML 內(nèi)容：
    3.  * <h3>php.cn<span style="display: none">hidden text</span></h3>
    4.  */
    6. // 獲取
    7. textContent = document.querySelector('h3').innerText;
    8. console.log(textContent);    /* php.cn */
    9. // 只能獲取頁面顯示的內(nèi)容
    11. // 修改
    12. document.querySelector('h3').innerText = '<p>new text</p>'
    13. /**
    14.  * 頁面顯示：<p>new text</p>
    15.  * <p> 標(biāo)簽也被當(dāng)做 <h3> 的文本內(nèi)容
    16.  */

  3. innerHTML: 替換元素內(nèi)容(html)

    1. /**
    2.  * HTML 內(nèi)容：
    3.  * <h3>php.cn<span style="display: none">hidden text</span></h3>
    4.  */
    6. // 獲取
    7. textContent = document.querySelector('h3').innerHTML;
    8. console.log(textContent);    /* php.cn<span style="display: none">hidden text</span> */
    10. // 修改
    11. document.querySelector('h3').innerHTML = '<p>new text</p>'
    12. /**
    13.  * 頁面顯示：new text
    14.  * <p> 標(biāo)簽是 <h3> 的子元素
    15.  */

  4. outerHTML: 替換元素自身(html)

    1. /**
    2.  * HTML 內(nèi)容：
    3.  * <h3>php.cn<span style="display: none">hidden text</span></h3>
    4.  */
    6. // 獲取
    7. const outHtml = document.querySelector('h3').outerHTML;
    8. console.log(outHtml);    /* <h3>php.cn<span style="display: none">hidden text</span></h3> */
    10. // 修改
    11. document.querySelector('h3').outerHTML = '<p>Hello world!</p>';
    12. /* 調(diào)用的元素 <h3> 自己被更改為 <p> */
    13. document.querySelector('p').outerHTML = null;
    14. /**
    15.  * 剛才生成的 <p> 被刪除了
    16.  * 相當(dāng)于 document.querySelector('p').remove();
    17.  */

3，指定位置插入

  1. <!-- HTML 文檔結(jié)構(gòu) -->
  2. <ul class="list">
  3.     <li>item1</li>
  4.     <li>item2</li>
  5.     <li>item3</li>
  6.     <li>item4</li>
  7.     <li>item5</li>
  8.     <li>item6</li>
  9. </ul>
（1）插入位置
  1. beforebegin:元素自身的前面，被調(diào)用元素起始標(biāo)簽（begin）的前面插入
  2. afterbegin:插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)之前，被調(diào)用元素起始標(biāo)簽（begin）的后面插入
  3. beforeend:插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后，被調(diào)用元素結(jié)束標(biāo)簽（end）的前面插入
  4. afterend:元素自身的后面，被調(diào)用元素結(jié)束標(biāo)簽（end）的后面插入
（2）插入方法（API 方法）

  1. insertAdjacentElement():指定位置插入元素

    兩個(gè)參數(shù)：第一個(gè)插入位置，第二個(gè)要插入的元素

    注意：連續(xù)使用 insertAdjacentElement() 插入同一個(gè)元素，前面的插入語句會(huì)被后面的語句覆蓋（即使插入的位置不同，或者元素的內(nèi)容不同）！

    1. const ul = document.querySelector('.list');
    2. // 創(chuàng)建需要插入的元素
    3. const h3beforebegin = document.createElement('h3');
    4. h3beforebegin.textContent = 'beforebegin';
    5. // 插入新創(chuàng)建的元素
    6. ul.insertAdjacentElement('beforebegin', h3beforebegin);    // 相當(dāng)于 ul.before(h3beforebegin);
    7. /**
    8.  * <h3>beforebegin</h3>
    9.  * <ul class="list">
    10.  *    <li>item1</li>
    11.  *    ......
    12.  *    <li>item6</li>
    13.  * </ul>
    14.  */
    16. const h3afterebegin = document.createElement('h3');
    17. h3afterebegin.textContent = 'afterebegin';
    18. ul.insertAdjacentElement('afterbegin', h3afterebegin);
    19. /**
    20.  * <h3>beforebegin</h3>
    21.  * <ul class="list">
    22.  *    <h3>afterebegin</h3>
    23.  *    <li>item1</li>
    24.  *    ......
    25.  *    <li>item6</li>
    26.  * </ul>
    27.  */
    29. const h3beforeend = document.createElement('h3');
    30. h3beforeend.textContent = 'beforeend';
    31. ul.insertAdjacentElement('beforeend', h3beforeend);    // 相當(dāng)于 ul.append(h3beforeend);
    32. /**
    33.  * <h3>beforebegin</h3>
    34.  * <ul class="list">
    35.  *    <h3>afterebegin</h3>
    36.  *    <li>item1</li>
    37.  *    ......
    38.  *    <li>item6</li>
    39.  *    <h3>beforeend</h3>
    40.  * </ul>
    41.  */
    43. const h3afterend = document.createElement('h3');
    44. h3afterend.textContent = 'afterend';
    45. ul.insertAdjacentElement('afterend', h3afterend);   // 相當(dāng)于 ul.after(h3afterend);
    46. /**
    47.  * <h3>beforebegin</h3>
    48.  * <ul class="list">
    49.  *    <h3>afterebegin</h3>
    50.  *    <li>item1</li>
    51.  *    ......
    52.  *    <li>item6</li>
    53.  *    <h3>beforeend</h3>
    54.  * </ul>
    55.  * <h3>afterend</h3>
    56.  */

  2. insertAdjacentText(): 指定位置插入文本節(jié)點(diǎn)（不常用）

    1. const ul = document.querySelector('.list');
    2. const textInsert = 'Hello world!';
    3. ul.insertAdjacentText('beforebegin', textInsert);
    4. /**
    5.  * Hello world!
    6.  * <ul class="list">
    7.  *    <li>item1</li>
    8.  *    ......
    9.  *    <li>item6</li>
    10.  * </ul>
    11.  */

  3. insertAdjacentHTML(): 指定位置插入元素節(jié)點(diǎn)(DOMString)，重要

    1. // 可以將 HTML 代碼片段，直接添加到頁面中的指定的任何位置
    2. // 而不用先封裝成 Fragment，然后再 append() 添加
    4. const ul = document.querySelector('.list');
    5. ul.insertAdjacentHTML("afterend", '<button>刪除</button>');
    6. /**
    7.  * <ul class="list">......</ul>
    8.  * <button>刪除</button>
    9.  */
批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)