当前位置：网站首页>DOM常用方法以及项目

DOM常用方法以及项目

2022-07-30 12:00:00 【今天不学习，明天变腊鸡】

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>