JavaScript:实例演示dom元素的增删改查操作

2021年04月08日 14:51:25阅读数:29博客 / JiaJieChen / 前端学习

实例演示dom元素的增删改查操作

1.类数组

类数组
类似数组,长得像数组,但它又不是数组,它有两个特征
1.有length索引
2.有递增的整数索引

下面让我们来看看什么是类数组,请看下图

大家可以看到,用document.querySelectorAll方法访问超链接和li都是一个类数组

①先模拟一个类数组然后用 Array.from()方法把类数组转换成一个真正的数组,再用push()在尾部追加一个成员

代码块

  1. <body>
  2. <div class="data">
  3. <a class="clj" href="">超链接1</a>
  4. <a class="clj" href="">超链接2</a>
  5. <a class="clj" href="">超链接3</a>
  6. <a class="clj" href=""> 超链接4</a>
  7. <a class="clj" href="">超链接5</a>
  8. <ul class="list">
  9. <li class="item">item1</li>
  10. <li class="item">item2</li>
  11. <li class="item">item3</li>
  12. <li class="item">item4</li>
  13. <li class="item">item5</li>
  14. </ul>
  15. </div>
  16. <script>
  17. //document.querySelectorAll 打印类数组类型
  18. console.log(document.querySelectorAll(".clj"));
  19. console.log(document.querySelectorAll(".item"));
  20. // 1. Array.from() 将“类数组”转为真正的数组,方便我们使用强大的数组方法来操作
  21. const hobby = {
  22. 0: "跑步",
  23. 1: "羽毛球",
  24. 2: "驾驶",
  25. 3: "看电影",
  26. length: 4,
  27. };
  28. let arr1 = Array.from(hobby);
  29. //用push()在尾部新增一个成员
  30. arr1.push("学习php");
  31. console.log(arr1);
  32. </script>
  33. </body>

2.dom元素的增删改查操作

方法 含义
createElement() 创建dom元素
querySelectorAll() 获取dom元素
querySelector() 获取满足条件的元素集合中的第一个元素
append() 将参数做为父元素的最后一个子元素追加到列表中,无返回值
prepend() 将参数做为父元素的头部追加
replaceWith() 当前节点替换方法
remove() 删除节点,在被删除的节点上直接调用
insertAdjacentElement() (‘插入位置’, 元素)
afterBegin 开始标签之后,第一个子元素
beforeBegin 开始标签之前,是它的前一个兄弟元素
afterEnd 结束标签之后,它的下一个兄弟元素
beforeEnd 结束标签之前,它的最后一个子元素

①创建dom元素

用 document.createElement 创建两个dom元素,div和span 并用textContent传入文本。

②append将span传入div元素

还可以传入到body里面,但是要用到cloneNode克隆一个span,这样span才不会从控制台消失

③用append和for循环创建ul li 无序列表

首先创建 ul dom元素,用for循环创建多个li 并且用 append 传入到ul里面,在用append 传入到body里面在页面中显示。

④prepden在父元素头部添加

⑤before 在参考节点前面添加元素

首先拿到该节点位置,然后我们用before在它前面添加一个li标签元素

⑤after 在参考节点后面添加元素

⑥replaceWith 替换元素

⑦remove()删除元素

可以看到之前的item3被删除了。remove不需要传值。

代码块

  1. <script>
  2. //创建dom元素
  3. let div = document.createElement("div");
  4. let span = document.createElement("span");
  5. span.textContent = "绿水青山常在";
  6. console.log(div, span);
  7. //用append(ele,'text'),将span参数传入div中
  8. div.append(span);
  9. console.log(div);
  10. //将span传入body中并且用cloneNode()克隆一个span
  11. document.body.append(span.cloneNode(true));
  12. //用append 创建一个列表
  13. // 首先创建 ul dom元素
  14. const ul = document.createElement("ul");
  15. //用for循环创建多个li 并且用 append 传入到ul里面
  16. for (let i = 1; i <= 5; i++) {
  17. const li = document.createElement("li");
  18. li.textContent = `item${i}`;
  19. ul.append(li);
  20. }
  21. // 在用append 传入到body里面在页面中显示
  22. document.body.append(ul);
  23. //用prepend在父元素头部追加
  24. li = document.createElement("li");
  25. li.textContent = "我在父元素头部";
  26. li.style.background = "red";
  27. ul.prepend(li);
  28. //在任意一个节点添加,首先拿到该节点位置
  29. // 拿到li标签第三个元素
  30. const beFore = document.querySelector("li:nth-of-type(3)");
  31. // 背景改为青色
  32. beFore.style.background = "cyan";
  33. //然后我们在它前面添加一个li标签元素
  34. li = document.createElement("li");
  35. li.style.background = "yellow";
  36. li.textContent = "我在item2前面";
  37. // before 在节点前面添加
  38. beFore.before(li);
  39. //after 在参考节点后面添加
  40. li = document.createElement("li");
  41. li.textContent = "我在item2后面";
  42. li.style.background = "#ccc";
  43. beFore.after(li);
  44. //replaceWith 替换元素
  45. const lilast = document.querySelector("li:last-of-type");
  46. let a = document.createElement("a");
  47. a.textContent = "百度一下";
  48. a.href = "www.baidu.com";
  49. lilast.replaceWith(a);
  50. //remove()删除元素
  51. ul.querySelector(":nth-of-type(6)").remove();
  52. </script>
批改状态:合格

老师批语:

全部评论

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

条评论
  • 博主信息
    JiaJieChen
    博文
    19
    粉丝
    0
    评论
    2
    访问量
    1764
    积分:0
    P豆:38