js的增删查改的DOM操作

1.DOM元素查询

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>dom的查询</title>
  6. </head>
  7. <body>
  8. <form action="" id="login">
  9. <ul class="list">
  10. <li class="item">item1</li>
  11. <li class="item">item2</li>
  12. <li class="item">item3</li>
  13. <li class="item">item4</li>
  14. <li class="item">item5</li>
  15. </ul>
  16. <input type="text" data-my-age='16' name="" placeholder="123" id="hello"><button id="">提交</button>
  17. </form>
  18. <script>
  19. let $ = (selector) => document.querySelector(selector);
  20. //元素的查询
  21. console.log(document.querySelectorAll('.item'));
  22. //元素的遍历
  23. const items = document.querySelectorAll('.item');
  24. items.forEach(function (item, index, items) {
  25. console.log(item, index, items)
  26. })
  27. //获取第一个元素
  28. console.log("<hr>")
  29. console.log( document.querySelector('.item'))
  30. //元素的遍历
  31. for (let item of items) {
  32. console.log(item)
  33. }
  34. console.log(document.forms.login);
  35. // 所有子节点包括文本节点
  36. console.log(document.querySelector(".list").childNodes)
  37. //只包括元素节点
  38. console.log(document.querySelector(".list").children)
  39. let eles = document.querySelector(".list").children;
  40. let firstItem = eles[0];
  41. firstItem.style.background = 'red';
  42. secondItem = firstItem.nextElementSibling;
  43. secondItem.style.background = 'green';
  44. let prive = secondItem.previousElementSibling;
  45. prive.style.background = "yellow";
  46. // 自定义属性的查询
  47. let input = document.querySelector("input");
  48. console.log(input.dataset.myAge);
  49. </script>
  50. </body>
  51. </html>

效果图

2.DOM元素的修改增加和删除

代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <script>
  9. let div = document.createElement("div");
  10. let span = document.createElement("span");
  11. console.log(div,span);
  12. span.textContent = "hello";
  13. // 将span添加到div中
  14. div.append(span, ' world');
  15. console.log(div);
  16. //document.body.append(div);
  17. // 要想保留span,要克隆span
  18. document.body.append(span.cloneNode(true),' world');
  19. const ul = document.createElement("ul");
  20. for (let i = 1; i <=5; i++ ) {
  21. let li = document.createElement("li");
  22. li.textContent = `item${i}`;
  23. li.style.color = 'red';
  24. ul.append(li);
  25. }
  26. document.body.append(ul);
  27. let li = document.createElement("li");
  28. li.textContent = "fisrt li";
  29. li.style.color = "green";
  30. //添加到头部
  31. ul.prepend(li);
  32. const three = document.querySelector("li:nth-of-type(4)");
  33. three.style.background = "cyan";
  34. three.before(li);
  35. three.after(li);
  36. //修改
  37. three.replaceWith(li);
  38. //删除元素
  39. ul.querySelector(":first-of-type").remove();
  40. // 在第一个元素之前插入
  41. li = document.createElement("li");
  42. li.textContent = 123;
  43. ul.insertAdjacentElement("afterbegin",li);
  44. // 插入到ul标签之前
  45. ul.insertAdjacentElement("beforebegin",li);
  46. // 作为字符串插入到子元素的最后
  47. ul.insertAdjacentHTML('beforeEnd',"<li>321</li>");
  48. </script>
  49. </body>
  50. </html>

效果图