DOM常用方法以及项目

最新推荐文章于 2023-08-13 13:02:41 发布

安全天天学

最新推荐文章于 2023-08-13 13:02:41 发布

阅读量673

点赞数

分类专栏： JS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_53568983/article/details/126024203

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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','<li>1</li>');
        ul.insertAdjacentHTML('afterEnd','<li>2</li>'); 
        ul.insertAdjacentHTML('beforeEnd','<li>3</li>');
        // 目标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.创建元素：
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操作类容

 <!-- 属性和函数不同 -->
    <!-- 目标1：
    创建元素：
    <div class="box">
        <style>
          h2 {
            color: red;
          }
        </style>
        <h2>通知</h2>
        <span style="display: none">试用期员工不参加</span>
        <p>今天下午17:00开会, 开发部, 运营部全体参加~~</p>
      </div> -->
      <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);

总结：

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

留言板项目

<!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>
    <!-- onkeydown: 当某个键按下时触发事件 -->
    <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 + '<button οnclick="del(this.parentNode)">删除</button>';
          ul.insertAdjacentHTML('afterbegin', `<li>${ele.value}</li>`);

          // 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>