博客列表 >常用DOM操作

常用DOM操作

王佳祥
王佳祥原创
2020年08月23日 17:17:39805浏览

常用DOM操作

一、文档节点的相关操作

1.DOM是什么?

  • DOM全称是document object model(文档对象模型)
    JS将整个HTML/XML文档看成一个对象,也称为DOM树
    DOM树由各种类型的节点组成

2.获取DOM元素的五种方式

  • 标签:document.getElementsByTagName()

  • ID:document.getElementById()

  • CLASS:document.getElementsByClassName()

  • API:document.querySelector()/document.querySelectorAll()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>如何获取页面元素</title>
  7. </head>
  8. <body>
  9. <div id="list">
  10. <ul class="poster">
  11. <li name="active">php中文网</li>
  12. <li>前端开发</li>
  13. <li>服务端开发</li>
  14. </ul>
  15. <ul>
  16. <li>安卓开发</li>
  17. </ul>
  18. </div>
  19. <script>
  20. //1.标签:返回的是一个元素的集合
  21. var ul = document.getElementsByTagName("ul");
  22. console.log(ul);
  23. console.log(ul[0]);
  24. console.log(ul.item(0));
  25. //2.id:只返回具有指定id的第一个元素(唯一)
  26. var list = document.getElementById("list");
  27. console.log(list);
  28. //id的替代语法
  29. var div = document.getElementsByTagName("div");
  30. console.log(div.namedItem("list"));
  31. console.log(div.namedItem("list") === list);
  32. var active = document.getElementsByTagName("li").namedItem("active");
  33. console.log(active);
  34. active.style.color = "red";
  35. //在元素级别调用以上的api方法来获取元素
  36. var lis = ul.item(0).getElementsByTagName("li");
  37. console.log(lis);
  38. lis.namedItem("active").style.backgroundColor = "blue";
  39. //3.class返回一个html集合
  40. var poster = document.getElementsByClassName("poster");
  41. console.log(poster);
  42. poster.item(0).style.border = "1px solid";
  43. //4.推荐使用querySelector(css选择器):获取满足条件的集合中的第一个元素(类似于id)
  44. //querySelectorAll(css选择器):获取满足条件的去拿不元素组成的集合
  45. var div = document.querySelector("#list li");
  46. console.log(div);
  47. //5.获取多个
  48. var lis = document.querySelectorAll(".poster > *");
  49. console.log(lis);
  50. </script>
  51. </body>
  52. </html>


3.节点与元素集合

  • NodeList:所有类型的节点集合,包括了元素,文本,注释,片段,文档,属性…

    HTMLColletion:HTML元素的节点集合 NodeList > HTMLCollection,是NOdeList一个子集

    节点是dom中的最小单元

    节点有:元素,文本节点,注释节点,片段节点,文档节点…

  • 子节点:

    children:只返回父节点中的元素子节点

    childNodes:返回指定节点的子节点的节点列表

  • 父节点:

    parentElement:返回父节点

    充当父节点永远不可能是文本或属性,只能是元素或文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div>
  10. <p>Hello Word!</p>
  11. <h3>php中文网</h3>
  12. <a href="">百度</a>
  13. </div>
  14. <ul>
  15. <li>子节点</li>
  16. </ul>
  17. </body>
  18. <script>
  19. var div = document.querySelector("div");
  20. //childNodes返回指定节点的子节点的节点列表
  21. console.log(div.childNodes);
  22. //过滤掉节点集合中的非元素节点
  23. for (var i = 0; i < div.childNodes.length; i++) {
  24. var currentNode = div.childNodes.item(i);
  25. if (currentNode.nodeType === 1) {
  26. console.log(currentNode.tagName.toLowerCase());
  27. }
  28. }
  29. //children:只返回父节点中的元素子节点
  30. console.log(div.children);
  31. //如果只想获取第一个子元素级的节点
  32. console.log(div.firstElementChild);
  33. console.log(div.lastElementChild);
  34. console.log(div.children.item(1));
  35. var li = document.querySelector("li");
  36. //充当父节点永远不可能是文本或属性,只能是元素或文档
  37. console.log(li.parentElement);
  38. </script>
  39. </html>


4.元素的新增,删除

  • 创建元素:createElement()

  • 创建一个元素的片段:createDocumentFragment()

  • 删除元素:removeChild()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>元素的动态添加与删除</title>
  7. </head>
  8. <body>
  9. <ul></ul>
  10. <h1>删除元素</h1>
  11. </body>
  12. <script>
  13. //创建元素并添加到页面中
  14. var h2 = document.createElement("h2");
  15. //给元素添加内容
  16. h2.innerText = "欢迎来到php中文网学习!";
  17. //如果添加的内容有html标签
  18. h2.innerHTML = "欢迎来到<span style='color:red'>php中文网</span>学习!";
  19. //把元素添加到页面中,必须在父节点上添加
  20. document.body.appendChild(h2);
  21. //添加多个
  22. var ul = document.querySelector("ul");
  23. /* for (var i = 0; i < 10; i++) {
  24. var li = document.createElement("li");
  25. li.innerText = "列表项" + (i + 1);
  26. ul.appendChild(li);
  27. } */
  28. //为防止每添加一个元素导致页面dom树重新渲染一次
  29. //借助文档片段来解决这个问题
  30. //先创建一个临时文档片段
  31. //将生成的10个li添加到内存中的这个文档片段节点中
  32. //将这个文档片段一次性添加到页面中,此时页面只会渲染一次
  33. var frag = document.createDocumentFragment();
  34. for (var i = 0; i < 10; i++) {
  35. var li = document.createElement("li");
  36. li.innerText = "列表项" + (i + 1);
  37. frag.appendChild(li);
  38. }
  39. //获取父元素
  40. var bo = document.body;
  41. //获取父元素中的子元素
  42. var h1 = document.querySelector("h1");
  43. console.log(h1);
  44. //删除指定的元素
  45. bo.removeChild(h1);
  46. </script>
  47. </html>


5.事件

  • 事件属性:on事件名称

  • 监听器:addEventListernaer()

  • 事件方法:函数表达式/匿名函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>事件基础</title>
  7. </head>
  8. <body>
  9. <!-- 将事件作为元素的一个特殊属性添加到元素上面,用on为前缀 -->
  10. <!-- <button onclick="表达式/js语句">按钮</button> -->
  11. <button onclick="alert(this.firstChild.nodeValue)">按钮</button>
  12. <button>点我试试看</button>
  13. <a href="https://www.baidu.com">百度一下</a>
  14. <script>
  15. //获取第二个按钮
  16. var btn = document.querySelector("button:nth-of-type(2)");
  17. console.log(btn);
  18. //绑定事件
  19. //addEventListener(事件类型,回调函数,冒泡/捕获)
  20. btn.addEventListener(
  21. "mouseover",
  22. function (ev) {
  23. //ev.target:触发事件的对象
  24. console.log(ev.target);
  25. ev.target.style = "width:100px";
  26. ev.target.style = "height:100px";
  27. },
  28. false
  29. );
  30. btn.addEventListener(
  31. "mouseout",
  32. function (ev) {
  33. //ev.target:触发事件的对象
  34. console.log(ev.target);
  35. ev.target.style = "none";
  36. },
  37. false
  38. );
  39. //获取链接
  40. var link = document.querySelector("a");
  41. console.log(link);
  42. link.onclick = function (ev) {
  43. //禁止原对象的默认行为
  44. ev.preventDefault();
  45. btn.style = "none";
  46. };
  47. </script>
  48. </body>
  49. </html>


二、经典的ToDoList案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>经典的ToDoList</title>
  7. </head>
  8. <body>
  9. <form action="" id="comment" method="post">
  10. <label for="content">求留言:</label>
  11. <input type="text" name="content" />
  12. <button>提交</button>
  13. </form>
  14. <ul></ul>
  15. <script>
  16. //获取表单
  17. var form = document.forms.namedItem("comment");
  18. //获取留言区
  19. var ul = document.querySelector("ul");
  20. //创建自动回复数组
  21. var arrs = [
  22. "欢迎来到php中文网学习!",
  23. "好好学习,天天向上!",
  24. "你有什么事情?",
  25. "请到php中文网学习相关课程!",
  26. "今天是个好天气!",
  27. "抓紧时间学习吧!",
  28. "学习使我快乐!",
  29. "php是世界上最好的语言!",
  30. "学无止境!",
  31. "学会自律,才能进步!",
  32. ];
  33. console.log(arrs);
  34. var rand = 0;
  35. //监听表单的提交事件
  36. form.addEventListener(
  37. "submit",
  38. function (ev) {
  39. ev.preventDefault();
  40. console.log("事件被监听了");
  41. //创建一条新留言
  42. var li = document.createElement("li");
  43. if (form.content.value.trim().length === 0) {
  44. alert("内容为空");
  45. form.content.focus();
  46. return false;
  47. } else {
  48. setInterval(function () {
  49. rand = parseInt(Math.random() * 10);
  50. //console.log(rand);
  51. }, 2000);
  52. li.innerHTML =
  53. form.content.value +
  54. '<a href="" onclick="del(this)">删除</a>' +
  55. "<br><p>" +
  56. arrs[rand] +
  57. "</p><hr>";
  58. //
  59. }
  60. //将留言添加到列表中
  61. //将最新留言放到最前面
  62. //留言为空的时候,直接插入,否则就插入到新一条留言之前
  63. if (ul.childElementCount === 0) {
  64. ul.appendChild(li);
  65. } else {
  66. //insertBefore(要插入的元素,插入的位置)
  67. ul.insertBefore(li, ul.firstElementChild);
  68. }
  69. //清空留言框
  70. form.content.value = null;
  71. form.content.focus();
  72. },
  73. false
  74. );
  75. function del(ele) {
  76. this.event.preventDefault();
  77. console.log(ele.parentElement);
  78. return confirm("是否删除?")
  79. ? ul.removeChild(ele.parentElement)
  80. : false;
  81. }
  82. </script>
  83. </body>
  84. </html>


三、学习总结

  • 获取DOM元素的五种方式

  • 标签:document.getElementsByTagName() 返回一个集合

  • ID:document.getElementById() 返回一个集合

  • CLASS:document.getElementsByClassName() 返回一个集合

  • API:document.querySelector()/document.querySelectorAll() 返回一个数组列表

  • children:只返回父节点中的元素子节点

  • childNodes:返回指定节点的子节点的节点列表

  • parentElement:返回父节点

  • document.createElement():创建元素

  • createDocumentFragment():创建一个元素的片段

  • removeChild():删除元素

  • addEventListernaer(事件类型,回调,捕获/冒泡):监听器

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议