关于操作dom对象,以及案例详解

dom

写作思路:先理清楚自己需要用到哪些元素,其次是这些元素需要执行什么样的事件(或者说是需要浏览器作出什么样的响应),然后根据需求编写代码

选择器

• 作用:选中html元素,在js中一对象形式存在
• js通过dom对象下属性多次赋值,以及api使用,完成页面动画
• 注意:选择器返回值,有的是dom对象,有的是集合,如果是集合,需要从集合中取值获取dom对象

document.api

• document.getElementById()
• document.getElementByClassName()
• document.getElementByTagName()
• document.queryAelector()
• document.queryAelectorAll()
• …

操作dom对象

增

• append() //及那个一个dom元素添加到另一个dom元素中,如 div.append(h4)

删

• removeChild() //使用方法:找到 需要更改元素的父元素,然后删除下面的子元素

改

• replaceChild() //使用方法:找到 需要更改元素的父元素,然后进行更改下面的子元素

查

• 查父元素 dom.parentElement
• 查子元素们 dom.nextElementSibling /dom.previousElementSibling

示例:

• dom元素的获取方法: document.querySelector()
  • 例如: var ipt = document.querySelector(‘input’) //获取一个input输入框并将其命名为ipt(或者说是将其赋给ipt)
• 将一个dom元素放进另一个dom元素中用.innerHTML或者.append

注意:
.innerHTML或者.append
同样都是将一个dom放进另一个dom,但是前者是拼接,后者是覆盖
例如: h4.innerHTML = ipt  //将输入框放进h4里面,如果有多个依次排列
     h4.append(ipt)  //是将输入框直接覆盖原来的内容区之上,如果有多个,只显示最后一个

案列详解1:

    需求:点击h1被点击的字体变红
        //1:获取所有的h1
        var texts = document.querySelectorAll('h1')
            //2:给每一个h1添加点击事件
        texts[0].onclick = function() {
            console.log(1);  
                //3:让被点击的h1变红
                绑定事件的元素就是点击的元素, 也是需要设置样式的元素
            texts[0].style.color = 'red'
        }
        texts[1].onclick = function() {
            console.log('2');
            texts[1].style.color = 'yellow'
        }
        texts[2].onclick = function() {
            console.log('3');
            texts[2].style.color = 'green'
        }
        texts[3].onclick = function() {
                console.log('4');
                texts[3].style.color = 'pink'
            }
效果:点击第一个的时候 字体变红,点击第二的时候字体变黄,依次类推

方法2:
var texts = document.querySelectorAll('h1')
        for (var i = 0; i < texts.length; i++) {
            //因为事件处理执行慢,i变量被污染了
            //所以:使用闭包解决问题,事件处理函数中i是4的问题
            (function(i) {
                texts[i].onclick = function() {
                    console.log(i);
                    texts[i].style.color = 'red'
                }
            })
            (i)
        }
        //为什么没有定时器也会环境污染
        //因为for循环走的更快,函数走的比较慢,当函数开始走的时候,for循环已经走到结尾了


        //如果不使用闭包的话,就会报错说是texts[i]是undefined

案例详解2

<h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <h1>你好</h1>
    <script>
        var texts = document.querySelectorAll('h1')
        for (var i = 0; i < texts.length; i++) {
            //因为事件处理执行慢,i变量被污染了
            //所以:使用闭包解决问题,事件处理函数中i是4的问题
            (function(i) {
                texts[i].onclick = function() {
                    //在添加红色之前,清空所有样式
                    console.log(i);
                    //1:找到所有的标签
                    for (var j = 0; j < texts.length; j++) {
                        texts[j].style.color = ''
                    }
                    // texts[i].style.color = 'red'
                    this.style.color = 'red'      //当点击按钮时文字变为
                }
            })
            (i)     
        }

        //e.target返回的是触发事件的对象(元素),this  返回的是绑定事件的对象元素
        //e.target 和currentTarget相似,但是currentTarget在ie678中不太常用
效果:当点击某个标签的时候,那个标签变成相应的颜色,当点击别的标签的时候,被点击的标签,变成相应的格式效果,上一次点击的标签格式清空

案例详解3:

效果:在输入框中输入文档,点击添加后,将所输入文档,以拼接的形式添加到目标内容区(本文中为li标签中). 并且在内容区看到每次输入的内容,而且可以看到一共输入了几次.
<div class="content">
        <div class="contro">
            <input type="text">
            <button>添加</button>
        </div>

        <span>输入的次数为: 0</span>
        <ul>
            <li id="text">测试内容为:</li>

        </ul>
    </div>
    <script>
        //完成新增
        //统计用户新增了多少列表:内容是什么
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        var span = document.querySelector('span')
        var ul = document.querySelector('ul')
            // var arr = []
        var count = 0
        btn.onclick = function() {
            //1:获取用户输入内容
            var val = input.value;
            var li = document.createElement('li')
            console.log(val);
            //2:将内容添加到ul中
            li.innerHTML = val
            ul.appendChild(li)
            input.value = ''
                // arr.push(val)   //如果打印在控制台的话可以使用这一步将数组打印下来


            count++;
            console.log(count);
            span.innerHTML = '输入的次数为: ' + count  //拼接在原来的内容区内
                // span.appendChild(count)  //覆盖原内容区


        }
         </script>

综合案例

实现的效果:1:在输入框中输入内容,点击添加按钮后将输入框内的内容输入添加到目标内容区
         2:在点击某个li标签更新按钮的时候,文档区出现删除线
         3:初始化的待办值为0,当点击更新/完成或者删除按钮的时候,待办项上的数目会相应的进行增减
         (目前点击更新/完成/删除按钮后可能会使count值变为负值,还需要增加一个条件,稍后记得更新)
**样式**
<style>
        .active {
            text-decoration: line-through;   //当点击更新或删除按钮的时候,文档类从text变为active,从而使文档的格式发生变化(即文档出现删除线)
        }
        
        .item {
            width: 400px;
            display: flex;       //弹性盒模型
            justify-content: space-around;   //两端留相等的空隙 ,           justify-content: space-between  两端不留空隙
            align-items: center;
            background-color: aquamarine;
            margin: 10px;
        }
    </style>

 //html样式布局
<div class="content">   
        <div class="control">
            <input type="text">
            <button id="add">添加</button>
        </div>
        <h3>代办项为:
            <h4>1</h4>
        </h3>
        <ul class="list">
            <li class="item">
                <span>示例:12345</span>
                <div>

                    <button id="del">删除</button>
                    <button id="update">更新</button>
                </div>
            </li>
        </ul>
    </div>

  //dom实现页面的交互行为
    <script>
        // 1.新增
        var str = '代办项为:'
        var count = 1;
        var ipt = document.querySelector('input')     //获取输入框,并命名为ipt
        var add = document.querySelector('#add')     //获取
        var list = document.querySelector('.list')
        var update = document.querySelectorAll('#update')     //获取id名为update的属性,并命名为update
        var dell = document.querySelectorAll('#del')       //同理
        var h4 = document.querySelector('h4')       //获取h4标签 
        add.onclick = function() {     //点击添加按钮时发生的事件
            var val = ipt.value;       //获取输入框中相应的内容
            console.log(val);       
            var tmp = `<li class="item">      //将名为item的标签赋给变量tmp
                <span>${val}</span>      当点击添加按钮的时候span标签内的内容 依次 发生改变
                <div>
                    <button id="del">删除<tton>
                    <button id="update">更新<tton>
                </div>`
            count += 1
            h4.innerHTML = count
            list.innerHTML += tmp;
            ipt.value = '';
            // 因为更新按钮:需要随着,元素的新增,update数据也应该更新
            update = document.querySelectorAll('#update');
            dell = document.querySelectorAll('#del')
                // 当update 更新时 更新功能应该重新执行
            updateControl()
            dele()
        }
        updateControl()
        dele()



        // 2.更新
        function updateControl() {     //当点击更新或完成按钮的时候发生的事件
            for (var i = 0; i < update.length; i++) {
                update[i].flag = true      //定义flag为true,,当点击一次后,下面还有一个 this.flag = !this.flag  可以时每次点击,都可以互相独立不受影响
                update[i].onclick = function() {
                    console.log('update');
                    if (this.flag) {               //定义
                        // console.log('1');
                        this.innerHTML = '完成'
                        this.parentElement.previousElementSibling.className = 'active text'     //条件为true的时候,将文档类型变为'active text' 实现点击按钮添加删除线的功能  
                        count -= 1     //每次点击完成按钮,待办项次数减少1
                        h4.innerHTML = count     //将count拼接到h4标签内
                    } else {
                        this.innerHTML = '更新'
                        this.parentElement.previousElementSibling.className = 'text'
                        count += 1     //每次点击完成按钮,待办项次数减少1
                        h4.innerHTML = count      //将count拼接到h4标签内
                    }
                    this.flag = !this.flag
                }
            }
        }

        //删除
        //实现删除功能:需要先找到要删除的元素的父元素,然后在父元素的角度下,删除这个父元素的子元素

        //bug  var btns = document.getElementsByClassName('.btn')
        function dele() {
            for (var j = 0; j < dell.length; j++) {
                dell[j].onclick = function() {
                    // console.log('del');
                    var parent = this.parentElement.parentElement;      //找到目标元素的父元素
                    // console.log(parent);
                    this.parentElement.parentElement.parentElement.removeChild(parent)     //删除目标元素的父元素下的子元素
                        // console.log(dell);  
                    count -= 1
                    h4.innerHTML = count      //将count拼接到h4标签内
                }
            }
        }
    </script>