0406作业-dom元素的增删改查

2021年04月08日 10:10:00阅读数:28博客 / 千山暮雪 / 作业

查找元素

  • querySelector : 查找单个元素
    querySelector
    1. <h2>Hello World</h2>
    2. <script>
    3. // querySelector 单元素
    4. let h2 = document.querySelector('h2');
    5. h2.style.backgroundColor = 'cyan';
    6. </script>
  • querySelectorAll : 查找多个元素
    querySelectorAll
    1. <ul>
    2. <li>基础元素1</li>
    3. <li>基础元素2</li>
    4. <li>基础元素3</li>
    5. <li>基础元素4</li>
    6. <li>基础元素5</li>
    7. </ul>
    8. <script>
    9. let lis = document.querySelectorAll('ul li');
    10. lis.forEach((env) => env.style.backgroundColor = 'red');
    11. </script>
  • forms 查找表单元素
    1. <form action="" id="login">
    2. <div>
    3. <lable>邮箱:</lable>
    4. <input type="text" name="email" data-id="emailId">
    5. </div>
    6. <div class="">
    7. <lable>密码:</lable>
    8. <input type="password" name="pwd" id="pwd">
    9. </div>
    10. <div>
    11. <button>提交</button>
    12. </div>
    13. </form>
    14. <script>
    15. // 使用forms 获得表单元素
    16. let login = document.forms.login;
    17. console.log(login);
    18. // 使用elements 获得表单子元素
    19. let email = login.elements;
    20. console.log(email);
    21. </script>

    添加元素

    添加元素
    1. <ul>
    2. <li>基础元素1</li>
    3. <li>基础元素2</li>
    4. <li>基础元素3</li>
    5. <li>基础元素4</li>
    6. <li>基础元素5</li>
    7. </ul>
  • append 在当前元素的子元素未尾添加子元素
    1. const ul = document.querySelector('ul');
    2. // append在当前元素的子元素未尾添加子元素
    3. let liA = document.createElement('li');
    4. liA.style.backgroundColor = 'yellow';
    5. liA.textContent = 'append添加的子元素';
    6. ul.append(liA);
  • prepend 在当前元素的子元素头部添加子元素
    1. let liB = document.createElement('li');
    2. liB.style.backgroundColor = 'red';
    3. liB.textContent = 'prepend添加的子元素';
    4. ul.prepend(liB);
  • before 在当前元素前添加兄弟元素
    1. let li3 = document.querySelector('ul li:nth-of-type(4)');
    2. let liC = document.createElement('li');
    3. liC.style.backgroundColor = 'green';
    4. liC.textContent = 'before添加的兄弟元素';
    5. li3.before(liC);
  • after 在当前元素后添加兄弟元素
    1. let liD = document.createElement('li');
    2. liD.style.backgroundColor = 'cyan';
    3. liD.textContent = 'after添加的兄弟元素';
    4. li3.after(liD);

    insertAdjacentElement(position,insertedElement):添加元素
    insertAdjacentHTML(where,html):添加html字符串
    insertAdjacentText(where, text):添加文本
    where共有四个参数,beforebegin,afterbegin,beforeend,afterend

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Title</title>
    6. </head>
    7. <body>
    8. <ul>
    9. <li>基础元素1</li>
    10. <li>基础元素2</li>
    11. <li>基础元素3</li>
    12. <li>基础元素4</li>
    13. <li>基础元素5</li>
    14. </ul>
    15. </body>
    16. <script>
    17. const ul = document.querySelector('ul');
    18. // beforebegin 在元素起始标签前添加
    19. let liE = document.createElement('li');
    20. liE.textContent = 'beforebegin添加的元素';
    21. ul.insertAdjacentElement('beforebegin',liE);
    22. // afterbegin 在元素起始标签后添加
    23. ul.insertAdjacentHTML("afterbegin",'<li>afterbegin添加的元素</li>');
    24. // beforeend 在元素结束标签前添加
    25. ul.insertAdjacentHTML("beforeend",'<li>beforeend添加的元素</li>');
    26. // afterend 在元素结束标签后添加
    27. ul.insertAdjacentText("afterend",'afterend添加的内容');
    28. </script>
    29. </html>

删除元素

  • remove
    remove
    1. <ul>
    2. <li>基础元素1</li>
    3. <li>基础元素2</li>
    4. <li>基础元素3</li>
    5. <li>基础元素4</li>
    6. <li>基础元素5</li>
    7. </ul>
    8. <script>
    9. // 获得要删除的元素
    10. let liDel = document.querySelector('ul li:nth-of-type(3)');
    11. liDel.remove();
    12. </script>

修改元素

  • replaceWith
    replaceWith
  1. <ul>
  2. <li>基础元素1</li>
  3. <li>基础元素2</li>
  4. <li>基础元素3</li>
  5. <li>基础元素4</li>
  6. <li>基础元素5</li>
  7. </ul>
  8. <script>
  9. // 获得要修改的元素
  10. let liMod = document.querySelector('ul li:nth-of-type(3)');
  11. // 修改的数据
  12. let a = document.createElement('a');
  13. a.textContent = 'php中文网';
  14. a.href = 'www.php.cn';
  15. // replaceWith
  16. liMod.replaceWith(a);
  17. </script>
批改状态:合格

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    千山暮雪
    博文
    14
    粉丝
    0
    评论
    0
    访问量
    400
    积分:0
    P豆:30