JavaScript DOM 基本操作：元素获取、遍历以及修改

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
DOM 基本操作（1）获取 DOM 元素1，通用方式
  1. <!-- HTML 文档结构 -->
  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. /** 返回元素节点列表（“类”数组）
    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.  */

    获取的元素节点列表（NodeList）不是数组，但可以使用部分的数组方法：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 转换为数组，然后用 map() 操作
    12. // 类数组 转换为 数组：Array.from() 或者 ...rest
    13. let arrList = Array.from(liList);    // 等同于：let arrList = [...liList];
    14. console.log(arrList);
    15. // 然后就可以用 map() 进行操作了
    16. arrList.map(item => item.style.color = 'red')    // 所有列表项的内容都显示为红色

  2. querySelector(选择器)：获取满足选择器条件的第一个元素

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

  3. 过时的用法（不建议使用）

    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>元素内部的文本

    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，获取当前页面的 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，获取表单数据
  1. // HTML 文档结构
  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 为起点查找获取
    2. // 通过控件 name 属性获取
    3. console.log(document.forms.login.my_email);    // 邮箱 <input> 元素
    4. // 通过控件 id 属性获取
    5. console.log(document.forms.login.email);    // 邮箱 <input> 元素
    7. // 也可以先获取 form 元素并赋值给变量，然后从获取的 form 元素为起点查找获取
    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 中用户提交的邮箱和密码，然后进行封装和解析

    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};   // 属性名 和 属性值变量名 相同时可以只写 属性名。
    8. // 2，对象（obj） 解析为 json 字符串
    9. let json = JSON.stringify(user);
    10. console.log(json);  // {"email":"admin@php.cn","passWorld":"123456"}
4，遍历 DOM

知识点：节点类型（nodeType）

document：文档节点，9

element：元素节点，1

text：文本节点，3

  1. <!-- HTML 文档结构 -->
  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：获取所有元素类型子节点。（childNodes：获取所有 {各种类型的} 子节点）

    1. // 获取 <ul> 元素
    2. const list = document.querySelector('.list');
    4. // childNodes 获取所有子节点（包含 文本节点 和 元素节点）
    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. // 只获取所有元素类型子节点，不要其他类型的节点
    9. // 方法一：将 childNodes 获取的所有节点集合，转为数组，再用 filter() 筛选出元素节点
    10. nodeList = [...nodeList].filter(item => item.nodeType == 1);
    11. console.log(nodeList);    /* [li, li, li, li, li, li] */ // 数组
    12. // 方法二：children 直接获取所有元素类型子节点，推荐方法
    13. elemList = list.children;
    14. console.log(elemList);    /* HTMLCollection(6) [li, li, li, li, li, li] */

  2. firstElementChild：获取第一个元素

    1. console.log(list.firstElementChild);

  3. lastElementChild：获取最后一个元素

    1. console.log(list.lastElementChild);

  4. nextElementSibling：获取下一个兄弟元素

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

  5. previousElementSibling：获取前一个兄弟元素

    1. let last = list.lastElementChild;    /* 最后一个 li */
    2. console.log(last.previousElementSibling);    /* 倒数第二个 li */

  6. parentElement：获取父元素

    1. let last = list.lastElementChild;    /* 最后一个 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(): 创建新元素

    1. document.createElement('ul');

  2. append(): 添加新元素，在父元素上调用，默认添加到父元素的尾部（添加为最后的子元素）

    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. // 注意，每次执行 append() 都会刷行一次页面，会造成页面闪烁和卡顿。
    19. // 应该将要添加所有元素先添加到文档片段中，然后再 append() 将文档片段一次性添加到文档。
    20. // 方法见下面的 createDocumentFragment()

  3. createDocumentFragment(): 创建文档片断

    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(): 在前面追加，兄弟元素上调用

    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(): 在后面追加，兄弟元素上调用

    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(): 克隆节点，带参数 true 表示包括子元素和文本，不带 true 则只复制元素本身（空元素）

    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(): 替换元素，两个参数，第一个是新的元素，第二个是要被替换的元素

    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(): 移除元素，在当前元素（要被删除的）上调用

    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，元素内容的获取与修改

  1. textContent: 全部内容(包括 js,css,隐藏内容)，推荐

    1. /**
    2.  * HTML 内容：
    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> 标签也被当做 <h3> 的文本内容
    15.  */

  2. innerText: 返回已渲染(可见)内容

    1. /**
    2.  * HTML 内容：
    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. // 只能获取页面显示的内容
    11. // 修改
    12. document.querySelector('h3').innerText = '<p>new text</p>'
    13. /**
    14.  * 页面显示：<p>new text</p>
    15.  * <p> 标签也被当做 <h3> 的文本内容
    16.  */

  3. innerHTML: 替换元素内容(html)

    1. /**
    2.  * HTML 内容：
    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> 标签是 <h3> 的子元素
    15.  */

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

    1. /**
    2.  * HTML 内容：
    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. /* 调用的元素 <h3> 自己被更改为 <p> */
    13. document.querySelector('p').outerHTML = null;
    14. /**
    15.  * 刚才生成的 <p> 被删除了
    16.  * 相当于 document.querySelector('p').remove();
    17.  */
3，指定位置插入
  1. <!-- HTML 文档结构 -->
  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:元素自身的前面，被调用元素起始标签（begin）的前面插入
  2. afterbegin:插入元素内部的第一个子节点之前，被调用元素起始标签（begin）的后面插入
  3. beforeend:插入元素内部的最后一个子节点之后，被调用元素结束标签（end）的前面插入
  4. afterend:元素自身的后面，被调用元素结束标签（end）的后面插入
（2）插入方法（API 方法）

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

    两个参数：第一个插入位置，第二个要插入的元素

    注意：连续使用 insertAdjacentElement() 插入同一个元素，前面的插入语句会被后面的语句覆盖（即使插入的位置不同，或者元素的内容不同）！

    1. const ul = document.querySelector('.list');
    2. // 创建需要插入的元素
    3. const h3beforebegin = document.createElement('h3');
    4. h3beforebegin.textContent = 'beforebegin';
    5. // 插入新创建的元素
    6. ul.insertAdjacentElement('beforebegin', h3beforebegin);    // 相当于 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);    // 相当于 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);   // 相当于 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(): 指定位置插入文本节点（不常用）

    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(): 指定位置插入元素节点(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.  */
【转自：武汉网站开发 http://www.1234xp.com/wuhan.html 网络转载请说明出处】
更多阅读