javascript得dom编程初体验

程序员文章站 2022-03-13 12:39:35

...

DOM:获取表单元素

获取方式有2种,传统方式,现在方式,例如下列表单


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>获取表单元素</title>
    <style>
      .login {
        width: 15em;
        border: 1px solid #888;
        border-radius: 0.5em;
        box-shadow: 5px 5px 5px #888;
        display: grid;
        grid-template-columns: 3em 1fr;
        gap: 0.5em 1em;
      }
      .login legend {
        padding: 0 0.5em;
        text-align: center;
        margin-bottom: 0.5em;
        font-weight: bolder;
      }
      .login button {
        grid-column: 2;
      }
      .login button:hover {
        cursor: pointer;
        background-color: lightcyan;
      }
    </style>
  </head>
  <body>
    <form action="login.php" method="post" id="login">
      <fieldset class="login">
        <legend>请登录</legend>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id="email" value="admin@php.cn" autofocus />
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" value="123456" />
        <button>提交</button>
      </fieldset>
    </form>
  </body>
</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代码


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>遍历DOM树</title>
  </head>
  <body>
     <ul class="list">
       <li class="item">item1</li>
       <li class="item">item2</li>
       <li class="item">item3</li>
       <li class="item">item4</li>
       <li class="item">item5</li>
       <li class="item">item6</li>
       <li class="item">item7</li>
       <li class="item">item8</li>
       <li class="item">item9</li>
       <li class="item">item10</li>
   </ul>
  </body>
</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,例如下列代码


const ul = document.createElement("ul");
  for (let i = 0; i < 5; i++) {
        const li = document.createElement("li");
        li.textContent = "item" + (i + 1);
        ul.append(li);
      }
 const li = document.createElement("li");
      li.textContent = "new  item";
      li.style.color = "red";
      const three = document.querySelector("ul li:nth-of-type(3)");
      three.before(li);
     let cloneLi = li.cloneNode(true);
      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: 结束标签之前,它的最后一个子元素。例如下列代码


const h3 = document.createElement("h3");
      h3.textContent = "商品列表";
      ul.insertAdjacentElement("beforeBegin", h3);

      const p = document.createElement("p");
      p.textContent = "共计: 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字符串

留言板案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板实现</title>
</head>
<body>
    <style>
        input:hover {
            background-color: lightblue;
        }


    </style>
    <input type="text" placeholder="请输入留言内容" autofocus  onchange="addmsg(this)">
    <ul class="list"></ul>

    <script>
        function addmsg(ele)
        {
            console.log(ele);

            let ul=document.querySelector(".list");
            console.log(ul);

            let newmsg=ele.value;
            console.log(newmsg);

           let li=document.createElement("li");

            li.innerText=newmsg;
            console.log(li);

            li.style.backgroundColor="yellow";
            ul.insertAdjacentElement("afterbegin",li);

            ele.value=null;
            ele.focus();

        }
    </script>

</body>

</html>

dataset对象

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

元素的计算样式获取

行内样式获取,例如下列代码

<div style="color: red; background-color: lightgreen">Hello</div>

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

计算样式获取: 内部<style>或外部如 style.css,例如下列dom代码


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js操作css</title>
    <style>
      div {
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div style="color: red; background-color: lightgreen">Hello</div>
  </body>
</html>

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

classList 对象常用方法

classlist.add()方法可以为元素增加添加class
classlist.contains()方法可以判断元素是否存在该类
classlist.remove()方法可以移除元素的类
classlist.replace()方法可以替换元素的类
classList.toggle()方法:如果已存在该类, 则执行remove 移除操作, 否则执行 add 添加操作,实例演示如下


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js操作class属性: classList对象</title>
    <style>
      .red {
        color: red;
      }
      .bgc {
        background-color: yellow;
      }
      .blue {
        color: blue;
      }
      .bd {
        border: 5px solid #000;
      }
    </style>
  </head>
  <body>
    <h2>hello</h2>
    <script>
      const h2 = document.querySelector("h2");
      h2.classList.add("red");
      h2.classList.add("bgc");
      console.log(h2.classList.contains("bgc"));
      h2.classList.remove("bgc");
      h2.classList.replace("red", "blue");
      h2.classList.toggle("bd");
    </script>
  </body>
</html>

事件的添加与派发

事件的添加,使用addEventListener方法来增加监听事件。
事件的派发,使用dispatchEvent方法来派发事件,例如下列代码,演示了事件的添加与派发


<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件的添加与删除</title>
  </head>
  <body>
    <button>元素事件监听</button>

    <script>
      const btn1 = document.querySelector("button:first-of-type");
      btn1.onclick = function () {
        console.log(event);
      };
      btn1.onclick = null;
    //增加监听 click事件
      btn1.addEventListener("click", addmoney, false);
      function addmoney()
      {
        i=i+100;
        console.log("恭喜你,又赚了 : " + i + "元");
      }

      // 创建一个自定义事件
      const myclick = new Event("click");
    //事件派发
      btn1.dispatchEvent(myclick);
      btn1.dispatchEvent(myclick);
    </script>
  </body>
</html>

上一篇： javascript数组常用得api与表单事件实例

下一篇： javascript简单商品管理器实现,node包的删除,安装与更新

javascript得dom编程初体验

DOM:获取表单元素

dom树的遍历与常用属性

dom元素的增删改操作

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

留言板案例

dataset对象

元素的计算样式获取

classList 对象常用方法

事件的添加与派发

【读书笔记】JavaScript DOM编程艺术（第2版）

JavaScript DOM编程艺术（第二版）读书笔记（1）——第三章 DOM

《JavaScript DOM 编程艺术》读书笔记（二）

JavaScript DOM编程艺术读书笔记

JavaScript_Dom编程艺术第二版（中文）笔记-第七章

JavaScript DOM编程艺术读书笔记

《JavaScript DOM编程艺术》（第二版）学习笔记（一）

JavaScript DOM 编程艺术(第二版)7.4 Ajax

javascript dom 编程艺术读书笔记

《JavaScript DOM 编程艺术》读书笔记

javascript得dom编程初体验

DOM:获取表单元素

dom树的遍历与常用属性

dom元素的增删改操作

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

留言板案例

dataset对象

元素的计算样式获取

classList 对象常用方法

事件的添加与派发

【读书笔记】JavaScript DOM编程艺术 （第2版）

JavaScript DOM编程艺术（第二版）读书笔记（1）——第三章 DOM

《JavaScript DOM 编程艺术》读书笔记（二）

JavaScript DOM编程艺术 读书笔记

JavaScript_Dom编程艺术第二版（中文）笔记-第七章

JavaScript DOM编程艺术读书笔记

《JavaScript DOM编程艺术》（第二版）学习笔记（一）

JavaScript DOM 编程艺术(第二版)7.4 Ajax

javascript dom 编程艺术读书笔记

《JavaScript DOM 编程艺术》读书笔记

【读书笔记】JavaScript DOM编程艺术（第2版）

JavaScript DOM编程艺术读书笔记