Blogger Information
Blog 13
fans 0
comment 0
visits 6815
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
获取表单元素、Dom遍历及增删改、JS操作元素内容
云中
Original
621 people have browsed it

获取表单元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <form id="liuyanban">
  11. <fieldset>
  12. <legend>留言板</legend>
  13. <label for="title">标题:</label
  14. ><input
  15. type="text"
  16. name="title"
  17. placeholder="请输入标题"
  18. value="标题"
  19. />
  20. <label for="content">内容:</label>
  21. <textarea
  22. name="content"
  23. id="content"
  24. cols="22em"
  25. rows="10em"
  26. placeholder="请输入内容"
  27. ></textarea>
  28. <button>提交</button>
  29. </fieldset>
  30. </form>
  31. <script>
  32. // 获取表单元素
  33. let liu = document.forms.liuyanban;
  34. let title = liu.title.value;
  35. let content = liu.content.value;
  36. // 将对象转换为JSON,以便和服务器交换数据
  37. let data = { title, content };
  38. // 将对象转换为JSON
  39. data = JSON.stringify(data, null, 2);
  40. console.log(data);
  41. </script>
  42. <style>
  43. #liuyanban {
  44. display: grid;
  45. grid-template-columns: 3em 1fr;
  46. gap: 0.5em 1em;
  47. }
  48. #liuyanban button {
  49. width: 13em;
  50. }
  51. </style>
  52. </body>
  53. </html>

Dom遍历及增删改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <ul class="list">
  11. <li class="item">item1</li>
  12. <li class="item">item2</li>
  13. <li class="item">item3</li>
  14. <li class="item">item4</li>
  15. <li class="item">item5</li>
  16. <li class="item">item6</li>
  17. <li class="item">item7</li>
  18. <li class="item">item8</li>
  19. <li class="item">item9</li>
  20. <li class="item">item10</li>
  21. </ul>
  22. <script>
  23. let ul = document.querySelector(".list");
  24. // ul.children 得到子节点的集合
  25. console.log(ul.children);
  26. // Array.from 将集合转换为数组
  27. let arrayUl = Array.from(ul.children);
  28. console.log(arrayUl);
  29. arrayUl[1].style.color = "red";
  30. ul.firstElementChild.textContent = "我是第一个元素";
  31. ul.firstElementChild.nextElementSibling.textContent =
  32. "我是第一个元素的下一个元素";
  33. // 第四个元素
  34. ul.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.style.color =
  35. "blue";
  36. ul.lastElementChild.textContent = "我是最后1个元素";
  37. ul.lastElementChild.previousElementSibling.textContent =
  38. "我是倒数第2个元素";
  39. // 倒数第3个元素
  40. ul.lastElementChild.previousElementSibling.previousElementSibling.style.color =
  41. "yellow";
  42. // 父 元素
  43. ul.firstElementChild.parentElement.style.border = "1em solid";
  44. // 父 节点
  45. ul.firstElementChild.parentNode.style.border = ".5em solid red";
  46. let li = document.createElement("li");
  47. li.textContent = "我是创建的第一个元素";
  48. li.style.color = "green";
  49. const five = ul.querySelector("li:nth-of-type(5)");
  50. // 查看第5个元素的html表示;
  51. console.log(five.outerHTML);
  52. // 在第5个元素后面插入新创建的元素
  53. five.after(li);
  54. // 在第5个元素前面插入克隆的元素
  55. // cloneNode(true): 克隆节点, true, 复制元素后代的内容
  56. let cloneFive = five.cloneNode(true);
  57. cloneFive.textContent = cloneFive.textContent + " 我是克隆的";
  58. five.before(cloneFive);
  59. li = document.createElement("li");
  60. li.textContent = "我是创建的第2个元素,并追加到父元素中";
  61. ul.append(li);
  62. // 移除第9个元素
  63. ul.querySelector("li:nth-of-type(9)").remove();
  64. // 替换元素
  65. li = document.createElement("li");
  66. li.textContent = "我是创建的第3个元素,替换原来的元素";
  67. li.style.fontSize = "2em";
  68. ul.replaceChild(li, ul.querySelector("li:nth-of-type(8)"));
  69. // 在父节点的标签为插入点,进行插入元素
  70. // insertAdjacentElement('插入位置', 元素)
  71. // 插入位置有四个
  72. // afterBegin: 开始标签之后,第一个子元素
  73. // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  74. // afterEnd: 结束标签之后,它的下一个兄弟元素
  75. // beforeEnd: 结束标签之前,它的最后一个子元素
  76. let title = document.createElement("h2");
  77. title.textContent = "dom遍历及增删改";
  78. ul.insertAdjacentElement("beforebegin", title);
  79. </script>
  80. </body>
  81. </html>

图示:


JS操作元素内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <div class="box">
  11. <style>
  12. h2 {
  13. color: red;
  14. }
  15. .box {
  16. border: 2px solid black;
  17. }
  18. </style>
  19. <h2>通知</h2>
  20. <span style="display: none">试用期员工不参加</span>
  21. <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
  22. <button>测试</button>
  23. <script>
  24. let btn = document.createElement("button");
  25. btn.textContent = "发送";
  26. let box = document.querySelector(".box");
  27. box.append(btn);
  28. </script>
  29. </div>
  30. <script>
  31. let h3 = document.createElement("h3");
  32. // textContent 获取元素内容。内容为本元素标签内, 除去 html 标签外的所有内容文本
  33. h3.textContent = "textContent 效果";
  34. document.body.append(h3);
  35. document.body.append(box.textContent);
  36. // innerText 获取元素内容。内容为所有用户在浏览器窗口可见的文本
  37. h3 = document.createElement("h3");
  38. h3.textContent = "innerText 效果";
  39. document.body.append(h3);
  40. document.body.append(box.innerText);
  41. // textContent, innerText ? textContent 首选, innerText,2016才成为w3c标准
  42. // innerHTML 获取元素内容。内容为本元素标签内, 所有html内容
  43. h3 = document.createElement("h3");
  44. h3.textContent = "innerHTML 效果";
  45. document.body.append(h3);
  46. document.body.append(box.innerHTML);
  47. // innerText: 不解析html字符
  48. let p = document.createElement("p");
  49. p.innerText = " <button>innerText</button>";
  50. box.append(p);
  51. // innerHTML: 可解析html字符
  52. p = document.createElement("p");
  53. p.innerHTML = " <button>innerHTML</button>";
  54. box.append(p);
  55. // outerHTML: 返回当前节点的自身的html
  56. p = document.createElement("p");
  57. p.innerText = box.outerHTML;
  58. box.append(p);
  59. // 清空/删除
  60. // box.outerHTML = null;
  61. </script>
  62. </body>
  63. </html>

图示:

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post