获取表单元素，dom树的遍历与常用属性 -

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

获取表单元素

console.log(document.forms[0]);
form.id
console.log(document.forms.login);
input:name
console.log(document.forms.login.email);
value
console.log(document.forms.login.email.value);

DOM遍历

第一个firstElementChild
ul.firstElementChild.style.backgroundColor = "yellow";
下一个nextElementSibling
ul.firstElementChild.nextElementSibling.style.backgroundColor = "green";
前一个previousElementSibling
ul.lastElementChild.previousElementSibling.style.backgroundColor = "lightgreen";
最后一个lastElementChild
ul.lastElementChild.style.backgroundColor = "yellow";
父节点parentElement
ul.lastElementChild.parentElement.style.border = "4px solid";
元素节点parentNode
ul.lastElementChild.parentNode.style.border = "4px solid red";

dom的增删改

增加元素 append

for (let i = 0; i < 5; i++) {
        const li = document.createElement("li");
        li.textContent = "item" + (i + 1);
        ul.append(li);
      }

移除 remove
ul.lastElementChild.remove();
替换 replaceChild

const last = document.querySelector("ul li:last-of-type");
const a = document.createElement("a");
a.textContent = "https://php.cn";
ul.replaceChild(a, last);

js操作元素内容常用方法

textContent:返回元素以及后代元素中的所有内容，包括style,display:none的内容
innerText:返回元素以及后代中的文本
innerHTML：返回内部的html中的字符串
outerHTML:返回当前节点的自身的html字符串
textContent首选，innerText,2016年才成为w3c标准
innerHTML可解析html字符，innerText：不解析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>
    <input type="text" onkeydown="addMsg(this)" placeholder="请输入留言内容" autofocus />
    <ul class="list"></ul>
    <script>
      function addMsg(ele) {
        console.log(ele);
        console.log(event);
        console.log(event.key);
        if (event.key === "Enter") {
          const ul = document.querySelector(".list");
          if (ele.value.length === 0) {
            alert("留言板内容不为空");
            ele.focus();
            return false;
          }
          const li = document.createElement("li");
          li.textContent = ele.value;
          ul.append(li);
          ul.insertAdjacentElement("afterbegin", li);
          ul.lastElementChild.style.backgroundColor = "yellow";
          ele.value = null;
          ele.focus();
        }
      }
    </script>
  </body>
</html>

dataset对象

dataset 可读可写

 function getIndex(btn) {
        console.log("点击了第", btn.dataset.index, "个按钮");
      }
      const user = document.querySelector(".user");
      console.log(user.dataset.email);
      console.log(user.dataset.workUnit);
      user.dataset.workUnit = "php.cn";
      console.log(user.dataset.workUnit);

获取元素的计算样式

getComputedStyle

const div = document.querySelector("div");
      console.log(window.getComputedStyle(div).width);
      console.log(window.getComputedStyle(div).height);

classlist对象常用方法

1.传统方式

const h2 = document.querySelector("h2");
 h2.className = "red bgc";

2.classList add添加

      h2.classList.add("red");
      h2.classList.add("bgc");

3.contains；判断
console.log(h2.classList.contains("bgc"));
4.remove 移除class
h2.classList.remove("bgc");
5.replace 替换
h2.classList.replace("red", "blue");
6.toggle:切换class
h2.classList.toggle("bd");

事件的添加与派发

1.事件添加

const btn1 = document.querySelector("button:first-of-type");
      btn1.onclick = function () {
        console.log(event);
      };

事件派发

const btn3 = document.querySelector("button:nth-of-type(3)");
      let i = 0;
      btn3.addEventListener(
        "click",
        () => {
          console.log("恭喜你，又赚了" + i + "元");
          i += 0.8;
        },
        false
      );