ASCII码 ASCII码

javascript得dom编程初体验

发布于：2022-01-09 11:10:40  栏目：技术文档

DOM:获取表单元素

  • 获取方式有2种,传统方式,现在方式,例如下列表单
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>获取表单元素</title>
  8.     <style>
  9.       .login {
  10.         width: 15em;
  11.         border: 1px solid #888;
  12.         border-radius: 0.5em;
  13.         box-shadow: 5px 5px 5px #888;
  14.         display: grid;
  15.         grid-template-columns: 3em 1fr;
  16.         gap: 0.5em 1em;
  17.       }
  18.       .login legend {
  19.         padding: 0 0.5em;
  20.         text-align: center;
  21.         margin-bottom: 0.5em;
  22.         font-weight: bolder;
  23.       }
  24.       .login button {
  25.         grid-column: 2;
  26.       }
  27.       .login button:hover {
  28.         cursor: pointer;
  29.         background-color: lightcyan;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <form action="login.php" method="post" id="login">
  35.       <fieldset class="login">
  36.         <legend>请登录</legend>
  37.         <label for="email">邮箱:</label>
  38.         <input type="email" name="email" id="email" value="admin@php.cn" autofocus />
  39.         <label for="password">密码:</label>
  40.         <input type="password" name="password" id="password" value="123456" />
  41.         <button>提交</button>
  42.       </fieldset>
  43.     </form>
  44.   </body>
  45. </html>

如何获取到form对象呢,有如下2种方式

  • 传统方式:let form=document.queryselector("#login") 指定了form表单种得id属性为”login”的对象
  • 现代方式:let form=document.forms[0],该代码指定了,本文档中,第一个表单对象。
  • 获取表单中的元素,获取到表单对象后let email=form.email可以获取到表单下id属性或者name属性为email的元素对象。
  • 获取到对象后就可以进行操作了,例如获取值,email.value。

dom树的遍历与常用属性

  • 遍历dom树通常也有2种方式,例如下列html代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>遍历DOM树</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.   </body>
  23. </html>

上述代码种如何遍历,ul元素下方的所以li元素呢

  • 传统方式如下，首先获取到ul元素对象let ul=document.queryselector(".list"),然后获取她的所有子元素let chirld=ul.children,将其转换成数组arrary.from(chirld) let chirldarray=[...chirld],对该元素数组进行访问即可,例如修改其颜色chirldarray[0].style.color="red"

  • 推荐方式如下:获取第一个元素let first=ul.firstElementChild,获取第二个元素let sec=ul.firstElementChild.nextElementSibling,获取最后一个元素ul.lastElementChild,获取倒数第二个ul.lastElementChild.previousElementSibling

dom元素的增删改操作

  • 创建元素:const ul = document.createElement("ul");
  • 添加元素:document.body.append(ul)
  • 查看元素:console.log(ul)
  • 插入元素:befor,after,例如下列代码
  1. const ul = document.createElement("ul");
  2.   for (let i = 0; i < 5; i++) {
  3.         const li = document.createElement("li");
  4.         li.textContent = "item" + (i + 1);
  5.         ul.append(li);
  6.       }
  7.  const li = document.createElement("li");
  8.       li.textContent = "new  item";
  9.       li.style.color = "red";
  10.       const three = document.querySelector("ul li:nth-of-type(3)");
  11.       three.before(li);
  12.      let cloneLi = li.cloneNode(true);
  13.       three.after(cloneLi);

上述代码种,three = document.querySelector("ul li:nth-of-type(3)")获取到第三个li元素,带啊three.before(li)在第三个元素之前插入了一个li元素,代码three.after(cloneLi)在第三个元素之后插入了一个li元素。

  • 在父节点的标签为插入点,进行插入元素insertAdjacentElement('插入位置', 元素),该方法第一个参数插入位置可选4个位置:afterBegin: 开始标签之后,第一个子元素,beforeBegin: 开始标签之前,是它的前一个兄弟元素,afterEnd: 结束标签之后,它的下一个兄弟元素,beforeEnd: 结束标签之前,它的最后一个子元素。例如下列代码
  1. const h3 = document.createElement("h3");
  2.       h3.textContent = "商品列表";
  3.       ul.insertAdjacentElement("beforeBegin", h3);
  5.       const p = document.createElement("p");
  6.       p.textContent = "共计: 7 件";
  7.       ul.insertAdjacentElement("afterEnd", p);

上述代码在ul标签标签前插入h3标签，ul标签之后插入了p标签

js操作元素内容的几个常用方法

  • textContent: 返回元素以及后代元素中的所有文本内容,包括 <style>, display:none的内容
  • innerText: 返回元素以及后代中的文本
  • innerHTML: 返回内部的html字符串
  • innerHTML与innerText差别在于:innerHTML可解析html字符innerText,不解析html字符
  • outerHTML: 返回当前节点的自身的html字符串

留言板案例

  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>留言板实现</title>
  8. </head>
  9. <body>
  10.     <style>
  11.         input:hover {
  12.             background-color: lightblue;
  13.         }
  16.     </style>
  17.     <input type="text" placeholder="请输入留言内容" autofocus  onchange="addmsg(this)">
  18.     <ul class="list"></ul>
  20.     <script>
  21.         function addmsg(ele)
  22.         {
  23.             console.log(ele);
  25.             let ul=document.querySelector(".list");
  26.             console.log(ul);
  28.             let newmsg=ele.value;
  29.             console.log(newmsg);
  31.            let li=document.createElement("li");
  33.             li.innerText=newmsg;
  34.             console.log(li);
  36.             li.style.backgroundColor="yellow";
  37.             ul.insertAdjacentElement("afterbegin",li);
  39.             ele.value=null;
  40.             ele.focus();
  42.         }
  43.     </script>
  45. </body>
  47. </html>

dataset对象

  • 元素属性有二类,内置的预定义属性, 如 id, class,title,style等
  • 用户自定义属性,主要用于js脚本控制, 以 “data-“”为前缀,如 data-key
  • 自定义属性还可以将一些数据保存到标签中,例如下列代码将email与等信息使用自定义属性进行存储<div class="user" data-email="498668472@qq.com" data-work-unit="php中文网">猪老师</div>,可以使用user.dataset.email,获得他的邮箱地址

元素的计算样式获取

  • 行内样式获取,例如下列代码
  1. <div style="color: red; background-color: lightgreen">Hello</div>

可以通过获取,div对象,在使用div.style.color的方式,获取他的颜色样式等

  • 计算样式获取: 内部<style>或外部 如 style.css,例如下列dom代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>js操作css</title>
  8.     <style>
  9.       div {
  10.         width: 150px;
  11.         height: 100px;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <div style="color: red; background-color: lightgreen">Hello</div>
  17.   </body>
  18. </html>

例如上述代码,无法直接通过对象div直接使用div.style.width来获取他的宽度,而必须使用window.getComputedStyle(div).width这种方式来获取他的高度等样式

classList 对象常用方法

  • classlist.add()方法可以为元素增加添加class
  • classlist.contains()方法可以判断元素是否存在该类
  • classlist.remove()方法可以移除元素的类
  • classlist.replace()方法可以替换元素的类
  • classList.toggle()方法:如果已存在该类, 则执行remove 移除操作, 否则执行 add 添加操作,实例演示如下
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>js操作class属性: classList对象</title>
  8.     <style>
  9.       .red {
  10.         color: red;
  11.       }
  12.       .bgc {
  13.         background-color: yellow;
  14.       }
  15.       .blue {
  16.         color: blue;
  17.       }
  18.       .bd {
  19.         border: 5px solid #000;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <h2>hello</h2>
  25.     <script>
  26.       const h2 = document.querySelector("h2");
  27.       h2.classList.add("red");
  28.       h2.classList.add("bgc");
  29.       console.log(h2.classList.contains("bgc"));
  30.       h2.classList.remove("bgc");
  31.       h2.classList.replace("red", "blue");
  32.       h2.classList.toggle("bd");
  33.     </script>
  34.   </body>
  35. </html>

事件的添加与派发

  • 事件的添加,使用addEventListener方法来增加监听事件。
  • 事件的派发,使用dispatchEvent方法来派发事件,例如下列代码,演示了事件的添加与派发
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>事件的添加与删除</title>
  8.   </head>
  9.   <body>
  10.     <button>元素事件监听</button>
  12.     <script>
  13.       const btn1 = document.querySelector("button:first-of-type");
  14.       btn1.onclick = function () {
  15.         console.log(event);
  16.       };
  17.       btn1.onclick = null;
  18.     //增加监听 click事件
  19.       btn1.addEventListener("click", addmoney, false);
  20.       function addmoney()
  21.       {
  22.         i=i+100;
  23.         console.log("恭喜你,又赚了 : " + i + "元");
  24.       }
  26.       // 创建一个自定义事件
  27.       const myclick = new Event("click");
  28.     //事件派发
  29.       btn1.dispatchEvent(myclick);
  30.       btn1.dispatchEvent(myclick);
  31.     </script>
  32.   </body>
  33. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行