search

博客列表 >DOM 元素的增删改查操作 ----0406

DOM 元素的增删改查操作 ----0406

木樨
木樨原创
2021年04月12日 20:04:48639浏览

一、快速获取 DOM 元素

1.使用 js 基本语法，仿写 jQuery 的 “$”

  1. <body>
  2.     <ul class="list">
  3.       <li class="item">item1</li>
  4.       <li class="item">item2</li>
  5.       <li class="item">item3</li>
  6.       <li class="item">item4</li>
  7.       <li class="item">item5</li>
  8.     </ul>
  9.     <script>
  10.       // $("body"): jQuery 用这个语法来获取'body'元素
  11.       let $ = selector => document.querySelector(selector);
  12.       console.log($);
  13.       console.log($("body"));
  14.       // 设置 body 的背景颜色
  15.       $('body').style.background = "lightcyan";
  16.     </script>
  17. </body>

2.获取所有满足条件的元素的集合

  1. <ul class="list">
  2.     <li class="item">item1</li>
  3.     <li class="item">item2</li>
  4.     <li class="item">item3</li>
  5.     <li class="item">item4</li>
  6.     <li class="item">item5</li>
  7. </ul>
  8. <script>
  9.     // 获取满足条件的元素的集合
  10.     const items = document.querySelectorAll(".list .item");
  11.     // NodeList: 类数组
  12.     // 遍历 items 元素
  13.     // NodeList有一个forEach()接口
  14.     // item: 正在遍历的当前元素,必选
  15.     // index: 当前元素的索引
  16.     // items: 当前遍历的数组对象
  17.     items.forEach(function (item, index, items) {
  18.     console.log(item, index, items);
  19.     });
  20.     // 使用箭头函数简化，以后这个语法使用更多
  21.     items.forEach(item => console.log(item));
  23.     // 思考：如何获取第一个满足条件的元素？
  24.     let firstItem = items[0];
  25.     console.log(firstItem);
  26.     firstItem.style.background = "lightgreen";
  27. </script>

3.获取满足条件的元素集合中的第一个元素

  1. <ul class="list">
  2.   <li class="item">item1</li>
  3.   <li class="item">item2</li>
  4.   <li class="item">item3</li>
  5.   <li class="item">item4</li>
  6.   <li class="item">item5</li>
  7. </ul>
  8. <script>
  9.   // 获取满足条件的元素集合中的第一个元素
  10.   firstItem = document.querySelector(".list .item");
  11.   console.log(firstItem);
  12.   firstItem.style.background = "green";
  13.   // querySelector()总是返回唯一元素，常用于 id
  15.   // querySelectorAll, querySelector, 也可以用在元素上
  16.   let list = document.querySelector(".list");
  17.   let items = list.querySelectorAll(".item");
  18.   console.log(items);
  19.   // NodeList它自了一个迭代器接口, for-of 进行遍历
  20.   for (let item of items) {
  21.     console.log(item);
  22.   }
  24.   //  以下传统方式, es6 以后不推荐使用
  25.   //   document.getElementById()
  26.   //   document.getElementsByTagName()
  27.   //   document.getElementsByName()
  28.   //   document.getElementsByClassName()
  29. </script>

4.快速获取一些特定的元素

  1. <ul class="list">
  2.   <li class="item">item1</li>
  3.   <li class="item">item2</li>
  4.   <li class="item">item3</li>
  5.   <li class="item">item4</li>
  6.   <li class="item">item5</li>
  7. </ul>
  9. <form action="" name="hello" id="login">
  10.   <input type="email" placeholder="demo@email.com" />
  11.   <button>提交</button>
  12. </form>
  13. <script>
  14.   // 快速获取一些特定的元素
  15.   // body
  16.   console.log(document.body);
  17.   // head
  18.   console.log(document.head);
  19.   // title
  20.   console.log(document.title);
  21.   // html
  22.   console.log(document.documentElement);
  24.   //forms
  25.   console.log(document.forms);
  26.   console.log(document.forms[0]);
  27.   // <form action="" name="hello" id="login">
  28.   console.log(document.forms["hello"]);
  29.   console.log(document.forms["login"]);
  30.   console.log(document.forms.item(0));
  31.   console.log(document.forms.item("hello"));
  32.   console.log(document.forms.item("login"));
  33.   console.log(document.forms.namedItem("hello"));
  34.   // forms.id
  35.   // 推荐用id,因为id方便添加样式
  36.   console.log(document.forms.login);
  37.   console.log(document.forms.hello);
  38. </script>

二、DOM 树的遍历和元素的获取

1. 将类数组转为真正的数组类型

  1. <ul class="list">
  2.   <li class="item">item1</li>
  3.   <li class="item">item2</li>
  4.   <li class="item">item3</li>
  5.   <li class="item">item4</li>
  6.   <li class="item">item5</li>
  7.   <li class="item">item6</li>
  8. </ul>
  10. <script>
  11.   // dom树中的所有内容都是:节点
  12.   // 节点是有类型的: 元素,文本,文档,属性..
  13.   let nodes = document.querySelector(".list");
  14.   console.log(nodes.childNodes);
  15.   // 通常只关注元素类型的节点
  16.   console.log(nodes.children);
  17.   let eles = nodes.children;
  19.   // 遍历
  20.   // 将类数组转为真正的数组类型
  21.   console.log([...eles]);
  22.   [...eles].forEach(ele => console.log(ele));
  23.   // 获取第一个
  24.   let firstItem = eles[0];
  25.   firstItem.style.background = "yellow";
  26.   // 最后一个
  27.   //   let lastItem = eles[4];
  28.   let lastItemIndex = eles.length - 1;
  29.   let lastItem = eles[lastItemIndex];
  30.   lastItem.style.background = "lightblue";
  31. </script>

2. 使用 js 提供的快捷方式来获取第一个和最后一个

  • firstElementChild 获取第一个
  • lastElementChild 获取最后一个
  1. <ul class="list">
  2.   <li class="item">item1</li>
  3.   <li class="item">item2</li>
  4.   <li class="item">item3</li>
  5.   <li class="item">item4</li>
  6.   <li class="item">item5</li>
  7.   <li class="item">item6</li>
  8. </ul>
  10. <script>
  11.   // js提供一些快捷方式来获取第一个和最后一个
  12.   const list = document.querySelector(".list");
  13.   firstItem = list.firstElementChild;
  14.   firstItem.style.background = "seagreen";
  16.   lastItem = list.lastElementChild;
  17.   lastItem.style.background = "yellow";
  19.   console.log(eles.length);
  20.   console.log(list.childElementCount);
  21. </script>

3. 兄弟节点的获取

  • nextElementSibling 下一个兄弟节点
  • previousElementSibling 前一个兄弟节点
  1. <ul class="list">
  2.   <li class="item">item1</li>
  3.   <li class="item">item2</li>
  4.   <li class="item">item3</li>
  5.   <li class="item">item4</li>
  6.   <li class="item">item5</li>
  7.   <li class="item">item6</li>
  8. </ul>
  10. <script>
  11.   //   如何想获取第二个元素怎么办?
  12.   //   第二个元素就是第一个元素的下一个兄弟节点
  13.   let secondItem = firstItem.nextElementSibling;
  14.   secondItem.style.background = "red";
  16.   // 获取第5个, 是最后一个元素的前一个兄弟节点
  17.   let fiveItem = lastItem.previousElementSibling;
  18.   fiveItem.style.background = "cyan";
  19. </script>

三、DOM 树元素的增删改查

1.创建 DOM 元素，并添加到页面显示

  1. // 创建dom元素
  2. let div = document.createElement("div");
  3. let span = document.createElement("span");
  4. span.textContent = "hello";
  6. // append(ele,'text'),将参数做为父元素的最后一个子元素追加到列表中,无返回值
  7. // span 添加到 div中
  8. // div.append(span);
  9. // 将 span,"world"，添加到 div中
  10. div.append(span, " world");
  11. // 方式一： 将 div 添加到页面
  12. document.body.append(div);
  13. console.log(div)
  15. // 方式二：将 span, " world" 添加到页面
  16. // document.body.append(span, " world");
  17. // console.log(div)

2.为什么div中的span消失了?

image.png

image.png

  1. // 为什么div中的span消失了?
  2. // 新元素span只能插入到一个地方;span在div,现在span在body中,相当于剪切操作
  3. // 如果想保留span在div中,要克隆span
  4. // cloneNode(true), true: 是完整的保留元素内部结构
  5. document.body.append(span.cloneNode(true), " world");

效果如图：

image.png

3. DOM 树元素的增删改

  • append():在尾部追加
  • prepend():在头部追加
  • before():在参考点之前添加一个新节点
  • after():在参考点之后添加一个新节点
  • replaceWith():替换元素
  • remove(无参数):删除元素
  • afterBegin: 开始标签之后,第一个子元素
  • beforeBegin: 开始标签之前,是它的前一个兄弟元素
  • afterEnd: 结束标签之后,它的下一个兄弟元素
  • beforeEnd: 结束标签之前,它的最后一个子元素
  1. // append()创建一个列表
  2. const ul = document.createElement("ul");
  3. // 循环来生成多个列表项 li
  4. for (let i = 1; i <= 5; i++) {
  5. let li = document.createElement("li");
  6. li.textContent = `item${i}`;
  7. ul.append(li);
  8. }
  9. document.body.append(ul);
  11. // append():在尾部追加
  12. // prepend():在头部追加
  13. li = document.createElement("li");
  14. li.textContent = "first item";
  15. li.style.color = "red";
  16. ul.prepend(li);
  18. // 如果想在除了头尾之外的地方添加怎么操作?
  19. // 必须要有一个参考节点的位置,否则就不知道要添加到哪个节点的前面或后面
  20. // 以第四个节点为参考
  21. const referNode = document.querySelector("li:nth-of-type(4)");
  22. referNode.style.background = "cyan";
  23. // 在它之前添加一个新节点
  24. li = document.createElement("li");
  25. li.textContent = "在参考节点之前插入";
  26. li.style.background = "yellow";
  27. // referNode.before(el),在插入位置(参考节点)上调用
  28. referNode.before(li);
  30. // 在它之后添加一个新节点
  31. li = document.createElement("li");
  32. li.textContent = "在参考节点之后插入";
  33. li.style.background = "violet";
  34. // referNode.after(el),在插入位置(参考节点)上调用
  35. referNode.after(li);
  37. // 替换节点
  38. // 将最后一个节点用链接替换
  39. let lastItem = document.querySelector("ul li:last-of-type");
  40. let a = document.createElement("a");
  41. a.textContent = "php中文网";
  42. a.href = "https://php.cn";
  43. lastItem.replaceWith(a);
  45. // 删除节点,在被删除的节点上直接调用
  46. // 将ul的第6个删除,remove(无参数)
  47. ul.querySelector(":nth-of-type(6)").remove();
  49. // 再介绍几个更牛的
  50. // insertAdjacentElement('插入位置', 元素)
  51. // 插入位置有四个
  52. // afterBegin: 开始标签之后,第一个子元素
  53. // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  54. // afterEnd: 结束标签之后,它的下一个兄弟元素
  55. // beforeEnd: 结束标签之前,它的最后一个子元素
  56. // 插入第一个子元素之前(在起始标签之后);
  57. li = document.createElement("li");
  58. li.textContent = "第一个子元素";
  59. ul.insertAdjacentElement("afterbegin", li);
  60. ul.insertAdjacentElement("beforebegin", li);
  62. // 还有一个plus,可以直接使用html字符串当元素,省去了创建元素的过程
  63. // 追加到结尾
  64. ul.insertAdjacentHTML("beforeEnd", '<li style="color:red">最后一个子元素</li>');
  66. // 还可以直接插入文本
  67. const h2 = document.createElement("h2");
  68. h2.insertAdjacentText("beforeend", ul.lastElementChild.textContent);
  69. console.log(h2);
  70. document.body.insertAdjacentElement("afterend", h2);
上一条：3.22作业-0411下一条：Dom元素增加删除,修改,查找
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多