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

程序员文章站 2022-03-01 18:34:21

...

获取表单元素

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
      );

上一篇：服务器防火墙如何开放端口？常见的服务器端口有哪些？

下一篇：从0开始搭建云服务器，入门使用教程，搭建个人网站（上）

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