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>