DOM常用方法以及项目

1.DOM方法

 <script>
        //  目标1：
        //  1.创建列表（createElement() appen() cloneNode(true)）
        //  2.在第三个元素前后插入列表（.after .before）

        let ul = document.createElement('ul');
        
        for(let i = 0 ; i < 5 ; i++)
        {
            let li = document.createElement('li');
            li.append('item' + i);
            ul.append(li);
        }
        document.body.append(ul);
        let three = document.querySelector('ul');
        three = [...three.children];
        
        let li = document.createElement('li')
        li.append('xxx');
        let NewClone = li.cloneNode(true);
        three[3].before(NewClone);
        NewClone = li.cloneNode(true);
        three[3].after(NewClone);
        
        ul.style.border = '2px solid red';
        // 目标2：
        // 1.在ul前后插入元素
        let h = document.createElement('h3');
        h.append('123');
        ul.insertAdjacentElement('afterBegin',h);
        ul.insertAdjacentHTML('beforeBegin','1
');
        ul.insertAdjacentHTML('afterEnd','2
'); 
        ul.insertAdjacentHTML('beforeEnd','3
');
        // 目标3：
        // 1.替换第一个元素
        // 1.删除最后一个元素
        let a = document.createElement('a');
        a.href = 'www.baidu.com';
        a.append('百度');
        ul.replaceChild(a,ul.firstElementChild);

        ul.lastElementChild.remove();
    script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

总结：
总结：
1.创建元素：
1.document.createElement:在整个页面创建元素
2.append():添加Element或者text【添加属性：【Element.属性】】,可以添加多个元素
2.插入元素：
1.（Element）.after（Element） .before
2.（Element）.cloneNode(true)
3.insertAdjacentElement(‘插入位置’, 元素)
插入位置有四个
afterBegin: 开始标签之后,第一个子元素
beforeBegin: 开始标签之前,是它的前一个兄弟元素
afterEnd: 结束标签之后,它的下一个兄弟元素
beforeEnd: 结束标签之前,它的最后一个子元素
4.insertAdjacentHTM(‘插入位置’, HTML);
3.替换：
[父Element].replaceChild(‘替换的Element’，‘位置);
4.删除：
[Element].remove();

2.JS操作类容

 
    
      <script>
        let div = document.createElement('div');
        div.class = 'box';
        let h2 = document.createElement('h2');
        h2.append('通知');
        let span = document.createElement('span');
        span.append('试用期员工不参加');
        let p = document.createElement('p');
        p.append('今天下午17:00开会, 开发部, 运营部全体参加~~');
        span.style = 'display: none';
        h2.color = 'red';
        div.append(h2,span,p);
        let x = document.body;
        x.append(div);

        // 目标2：
        //  1. textContent
        //  2. innerText
        //  3. innerHTML
        //  4. outerHTML
        //  输出找区别
        console.log(div.textContent);
        console.log(div.innerText);
        console.log(div.innerHTML);
        console.log(div.outerHTML);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

总结：

    textContent:所有文本类容，包括隐藏了的
    innerText：你在浏览器所看到的类容
    innerHTML：内HTML，及不包括外壳
    outerHTML：包括外壳
1
2
3
4

留言板项目

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>toDoList:留言板title>
  head>
  <body>
    
    <input type="text" onkeydown="addMsg(this)" placeholder="请输入留言" autofocus />
    <ul class="list">ul>
    <script>
      function addMsg(ele) {
        // console.log(ele);
        // 事件方法中有一个对象,表示当前事件: event
        // console.log(event);
        // console.log(event.type);
        // console.log(event.key);
        // 判断用户是否提交了留言,通过是否按下了回车键
        if (event.key === 'Enter') {
          // 1. 留言非空验证
          if (ele.value.length === 0) {
            alert('留言不能为空');
            // 重置焦点到输入框中
            ele.focus();
            return false;
          }
          // 2. 添加留言
          //   console.log(ele.value);
          //   const li = document.createElement('li');
          //   li.append(ele.value);
          //   document.querySelector('.list').append(li);
          const ul = document.querySelector('.list');
          //   if (ul.firstElementChild !== null) {
          //     ul.firstElementChild.before(li);
          //   } else {
          //     ul.append(li);
          //   }

          //   ul.insertAdjacentElement('afterbegin', li);

          // 为每条留言添加删除功能
          ele.value = ele.value + '';
          ul.insertAdjacentHTML('afterbegin', `${ele.value}`);

          // 3. 清空输入框
          ele.value = null;
        }
      }

      // 删除功能
      function del(ele) {
        // console.log(ele);
        // if (confirm('是否删除?')) {
        //   ele.remove();
        // }

        return confirm('是否删除?') ? ele.remove() : false;

        // 第二种方式: outerHTML -> remove()
        // return confirm('是否删除?') ? (ele.outerHTML = null) : false;
      }
    script>
  body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

相关阅读:
Sqlserver 监控使用磁盘空间情况
 Kyligence 入选 Gartner 指标中台创新洞察报告
 服务器证书是网络信息安全的基础
 Jetson Orin平台多路 FPDlink Ⅲ相机采集套装推荐
 利用Socks5代理IP加强跨界电商爬虫的网络安全
 超详细Python教程——作用域
 【MindSpore易点通】在开发环境下如何使用MindInsight可视化Dump数据
 [数据结构] 图---求解多源最短路径：实现弗洛伊德算法
 win11右键菜单改回win10教程(亲测可用-全流程截图)
20.2 OpenSSL 非对称RSA加解密算法
原文地址：https://blog.csdn.net/qq_53568983/article/details/126024203