search

博客列表 >获取表单元素、Dom遍历及增删改、JS操作元素内容

获取表单元素、Dom遍历及增删改、JS操作元素内容

云中
云中原创
2022年02月03日 14:57:55626浏览

获取表单元素

  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>
  14.         <label for="title">标题:</label
  15.         ><input
  16.           type="text"
  17.           name="title"
  18.           placeholder="请输入标题"
  19.           value="标题"
  20.         />
  22.         <label for="content">内容:</label>
  23.         <textarea
  24.           name="content"
  25.           id="content"
  26.           cols="22em"
  27.           rows="10em"
  28.           placeholder="请输入内容"
  29.         ></textarea>
  30.         <button>提交</button>
  31.       </fieldset>
  32.     </form>
  34.     <script>
  35.       // 获取表单元素
  36.       let liu = document.forms.liuyanban;
  37.       let title = liu.title.value;
  38.       let content = liu.content.value;
  40.       //   将对象转换为JSON,以便和服务器交换数据
  41.       let data = { title, content };
  42.       //   将对象转换为JSON
  43.       data = JSON.stringify(data, null, 2);
  45.       console.log(data);
  46.     </script>
  47.     <style>
  48.       #liuyanban {
  49.         display: grid;
  50.         grid-template-columns: 3em 1fr;
  51.         gap: 0.5em 1em;
  52.       }
  53.       #liuyanban button {
  54.         width: 13em;
  55.       }
  56.     </style>
  57.   </body>
  58. </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";
  31.       ul.firstElementChild.textContent = "我是第一个元素";
  32.       ul.firstElementChild.nextElementSibling.textContent =
  33.         "我是第一个元素的下一个元素";
  34.       // 第四个元素
  35.       ul.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.style.color =
  36.         "blue";
  37.       ul.lastElementChild.textContent = "我是最后1个元素";
  38.       ul.lastElementChild.previousElementSibling.textContent =
  39.         "我是倒数第2个元素";
  40.       // 倒数第3个元素
  41.       ul.lastElementChild.previousElementSibling.previousElementSibling.style.color =
  42.         "yellow";
  43.       // 父 元素
  44.       ul.firstElementChild.parentElement.style.border = "1em solid";
  45.       //   父 节点
  46.       ul.firstElementChild.parentNode.style.border = ".5em solid red";
  48.       let li = document.createElement("li");
  49.       li.textContent = "我是创建的第一个元素";
  50.       li.style.color = "green";
  51.       const five = ul.querySelector("li:nth-of-type(5)");
  52.       //   查看第5个元素的html表示;
  53.       console.log(five.outerHTML);
  54.       //  在第5个元素后面插入新创建的元素
  55.       five.after(li);
  56.       //   在第5个元素前面插入克隆的元素
  57.       // cloneNode(true): 克隆节点, true, 复制元素后代的内容
  58.       let cloneFive = five.cloneNode(true);
  59.       cloneFive.textContent = cloneFive.textContent + "  我是克隆的";
  60.       five.before(cloneFive);
  62.       li = document.createElement("li");
  63.       li.textContent = "我是创建的第2个元素,并追加到父元素中";
  64.       ul.append(li);
  66.       //   移除第9个元素
  67.       ul.querySelector("li:nth-of-type(9)").remove();
  69.       //   替换元素
  70.       li = document.createElement("li");
  71.       li.textContent = "我是创建的第3个元素,替换原来的元素";
  72.       li.style.fontSize = "2em";
  73.       ul.replaceChild(li, ul.querySelector("li:nth-of-type(8)"));
  75.       // 在父节点的标签为插入点,进行插入元素
  76.       // insertAdjacentElement('插入位置', 元素)
  77.       // 插入位置有四个
  78.       // afterBegin: 开始标签之后,第一个子元素
  79.       // beforeBegin: 开始标签之前,是它的前一个兄弟元素
  80.       // afterEnd: 结束标签之后,它的下一个兄弟元素
  81.       // beforeEnd: 结束标签之前,它的最后一个子元素
  82.       let title = document.createElement("h2");
  83.       title.textContent = "dom遍历及增删改";
  84.       ul.insertAdjacentElement("beforebegin", title);
  85.     </script>
  86.   </body>
  87. </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);
  37.       //   innerText 获取元素内容。内容为所有用户在浏览器窗口可见的文本
  38.       h3 = document.createElement("h3");
  39.       h3.textContent = "innerText 效果";
  40.       document.body.append(h3);
  41.       document.body.append(box.innerText);
  43.       // textContent, innerText ? textContent 首选, innerText,2016才成为w3c标准
  45.       //   innerHTML 获取元素内容。内容为本元素标签内， 所有html内容
  46.       h3 = document.createElement("h3");
  47.       h3.textContent = "innerHTML 效果";
  48.       document.body.append(h3);
  49.       document.body.append(box.innerHTML);
  51.       //  innerText: 不解析html字符
  52.       let p = document.createElement("p");
  53.       p.innerText = " <button>innerText</button>";
  54.       box.append(p);
  55.       //   innerHTML: 可解析html字符
  56.       p = document.createElement("p");
  57.       p.innerHTML = " <button>innerHTML</button>";
  58.       box.append(p);
  59.       // outerHTML: 返回当前节点的自身的html
  60.       p = document.createElement("p");
  61.       p.innerText = box.outerHTML;
  62.       box.append(p);
  64.       // 清空/删除
  65.       //   box.outerHTML = null;
  66.     </script>
  67.   </body>
  68. </html>

图示：

上一条：JS事件监听与派发及form常用事件、JS字符串、数组常用API下一条：如何从阿里云官方镜像站下载ubuntu并安装
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议