js dom 元素的增删改、操作内容、自定义属性操作对象、js操作css

dom 元素的增删改

读 : 遍历 dom

写 : 增、删、改

创建元素 createElement()

const span = document.createElement('span');

追加元素 append()

// 创建新元素
const span = document.createElement("span");
// 追加到页面
document.body.append(span);
// 给span追加内容
span.append("hello");

遍历追加元素

// 创建新元素
const ul = document.createElement("ul");
// 追加到页面
document.body.append(ul);
for (let i = 0; i < 5; i++) {
  let li = document.createElement("li");
  li.append("item" + (i + 1));
  ul.append(li);
  li.style = "list-style:none;";
}

再某个节点前后加入内容

1.当前节点之前 before();

2.在当前节点之后 after();

// 获取第三个li
const li3 = ul.querySelector("li:nth-of-type(3)");
// 在节点前添加内容
const append_li = document.createElement("li");
append_li.append("新内容");
li3.before(append_li);
// 在节点后追加内容
const after_li = document.createElement("li");
after_li.append("追加一个内容");
li3.after(after_li);

克隆 cloneNode(true)

如果克隆内容()内必须加上 true

const append_li = document.createElement("li");
append_li.append("新内容");
const new_li = append_li.cloneNode(true);

insertAdjacentElement(‘插入位置’,元素)

// insertAdjacentElement('插入位置', 元素)
// 插入位置有四个
// afterBegin: 开始标签之后,第一个子元素
// beforeBegin: 开始标签之前,是它的前一个兄弟元素
// afterEnd: 结束标签之后,它的下一个兄弟元素
// beforeEnd: 结束标签之前,它的最后一个子元素
const h2 = document.createElement("h2");
h2.append("列表");
const h3 = h2.cloneNode(true);
// 列表前插入标题
ul.insertAdjacentElement("beforebegin", h2);
// 列表内容开始插入标签
ul.insertAdjacentHTML("afterbegin", "<li>第一个标签</li>");
// 列表内容结束插入标签
ul.insertAdjacentHTML("beforeend", "<li>最后一个标签</li>");
// 列表后插入标题
ul.insertAdjacentElement("afterend", h3);

元素替换 replaceChild(新节点,被替换的旧节点)

需要找到插入点
在父元素调用

// 被替换的旧节点
const targetNode = ul.querySelector("li:last-of-type");
// 新节点
const link = document.createElement("a");
link.href = "http://www.baidu.com";
link.append("百度一下");
// 节点替换
ul.replaceChild(link, targetNode);

移除元素 remove()

ul.lastElementChild.remove();
ul.firstElementChild.remove();
ul.querySelector("li:nth-of-type(2)").remove();

js 操作内容 (textContent、innerText、innerHTML、outerHTML)

首选 : textContent、innerHTML

textContent : 返回所有内容,包括 style

// textContent : 返回所有内容,包括style
console.log(box.textContent);
/*
h2 {
    color: red;
  }
信息
隐藏信息
xxxxxxxxxxxxxx
*/

innerText : 只输出正常文本

// innerText : 只输出正常文本
console.log(box.innerText);
/*
信息
xxxxxxxxxxxxxx
*/

innerHTML : 带有标签的 html 内容

// innerHTML : 带有标签的html内容
console.log(box.innerHTML);
/*
<style>
  h2 {
    color: red;
  }
</style>
<h2>信息</h2>
<span style="display: none">隐藏信息</span>
<p>xxxxxxxxxxxxxx</p>
*/

innerHTML 和 innerText 区别 : innerHTML 可以解析 html 标签

const p = document.createElement("p");
const link = '<a href="http://www.php.cn">php中文网</a>';
p.innerText = link; //追加后a标签不能正常显示
p.innerHTML = link; //a标签可以正常显示
box.append(p);

outerHTML : 当前 html 元素的表示

// outerHTML : 当前html元素的表示
console.log(box.outerHTML);
/*
<div class="box">
  <style>
    h2 {
      color: red;
    }
  </style>
  <h2>信息</h2>
  <span style="display: none">隐藏信息</span>
  <p>xxxxxxxxxxxxxx</p>
  <p><a href="http://www.php.cn">php中文网</a></p>
</div>
*/
ele.outerHTML = null; //删除元素
ele.outerHTML = "<a>xxx</a>"; //替换内容

自定义属性操作对象 dataset

<!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>Document</title>
</head>
<body>
  <div class="btn-group">
    <button data-index="1" onclick="alert(this.dataset.index)">btn1</button>
    <button data-index="2" onclick="alert(this.dataset.index)">btn2</button>
    <button data-index="3" onclick="alert(this.dataset.index)">btn3</button>
    <!-- 自定义属性 : data-xxx -->
    <!-- 获取时 : dataset.xxx -->
    <div data-my-email="0000000000@qq.com">我的邮箱</div>
  </div>
  <script>
    const email = document.querySelector('body div div');
    // data-my-email -> dataset.myEmail
    // 需要把my-email替换成myEmail
    console.log(email.dataset.myEmail);
  </script>
</body>
</html>

js操作css : getComputedStyle()

<!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>Document</title>
  <style>
    .box{
      width: 100px;
      height: 100px;
      border: 1px solid;
    }
  </style>
</head>
<body>
  <div class="box" style="color: red;">hello</div>
  <script>
    // 获取元素行内样式 : style属性
    const box = document.querySelector('.box');
    console.log(box.style.color);
    // 获取元素内部样式
    const wgs = window.getComputedStyle(box);
    console.log(wgs.width);
    console.log(wgs.height);
    // 宽度转换
    let width = window.getComputedStyle(box).width;
    // 数据类型转换
    width = parseInt(width);
    console.log(width);
    console.log(typeof(width));
    // 要通过行内样式进行替换
    box.style.width = (width +100) + 'px';
  </script>
</body>
</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>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      li {
        list-style: none;
        /* 允许内容换行 */
        word-wrap: break-word;
      }
      .title_div,
      .message_div,
      .btn_div {
        width: 350px;
        margin-left: 20px;
      }
      .btn_div button {
        width: 200px;
        height: 30px;
        margin: auto;
      }
      .tishi {
        color: red;
        font-size: 10px;
        display: none;
      }
      input {
        width: 200px;
        height: 30px;
        border-radius: 10px;
        padding-left: 10px;
      }
      ul.list {
        width: 300px;
        margin-top: 20px;
      }
      /* ------------------------------------------- */
      .box {
        width: 300px;
        border: 1px solid;
        border-radius: 10px;
        margin: 3px;
        padding: 5px;
        position: relative;
      }
      .box:hover {
        background-color: lightgoldenrodyellow;
      }
      .title_h3 {
        text-align: center;
      }
      .button_xg {
        position: absolute;
        top: 10px;
        right: 45px;
      }
      .button_sc {
        position: absolute;
        top: 10px;
        right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="title_div">
      <label for="message" style="font-size: 20px">标题:</label>
      <input type="text" id="title" class="title" autofocus />
      <span class="tishi">标题不能为空</span>
    </div>
    <div class="message_div">
      <label for="message" style="font-size: 20px">留言:</label>
      <input type="text" id="message" class="message" autofocus />
    </div>
    <div class="btn_div">
      <button onclick="Btn()">提交</button>
    </div>
    <ul class="list"></ul>
    <script>
      function Btn() {
        // 获取内容
        const title = document.querySelector(".title");
        const message = document.querySelector(".message");
        const span = document.querySelector(".tishi");
        const ul = document.querySelector(".list");
        // -----------------------------------------------------------------
        // 判断标题是否为空
        if (title.value == 0) {
          span.style.display = "inline";
          return false;
        } else {
          span.style.display = "none";
        }
        // -----------------------------------------------------------------
        // 新建div,h3,li,button
        const div = document.createElement("div");
        const h3 = document.createElement("h3");
        const li = document.createElement("li");
        const button_sc = document.createElement("button");
        const button_xg = button_sc.cloneNode(true);
        // 添加属性
        div.classList.add("box");
        h3.classList.add("title_h3");
        button_xg.classList.add("button_xg");
        button_sc.classList.add("button_sc");
        // li.classList.add("message_li");
        // 追加内容
        h3.append(title.value);
        li.append(message.value);
        button_xg.append("修改");
        button_sc.append("删除");
        div.append(h3);
        div.append(li);
        div.append(button_xg);
        div.append(button_sc);
        // ul中追加div
        ul.insertAdjacentElement("afterbegin", div);
        // 修改
        button_xg.onclick = function () {
          // prompt() 弹出input框
          const new_message = prompt(li.innerText);
          li.innerHTML = new_message;
        };
        // 点击删除
        button_sc.onclick = function () {
          confirm("是否删除") ? div.remove() : false;
        };
        // -----------------------------------------------------------------
        // 输入框清空
        title.value = null;
        message.value = null;
      }
    </script>
  </body>
</html>