自调用、DOM总结、this指向、事件委托

一、自调用函数

1、概念：通过等量代替，函数名称可以使用一个匿名函数代替 - 这个函数以后就没有办法使用了一个匿名函数在定义的过程中顺便就调用了 - 自调用函数 - 只能执行一次

// (function(){
//     var a = 10
//     console.log(333);
// })()

// function fn(){
//     console.log(44);
// }
// fn()


// var lis = document.querySelectorAll('li');
// for(var i=0;i<lis.length;i++){

//     (function(i){
//         // 循环第一次 i=0  
//         // 第二次 i=1
//         // 第三次 i=2
//         lis[i].onclick = function(){
//             console.log(i);
//         }

//     })(i)

// }

二、DOM总结

1、概念：一套操作html文档的标准 - 操作标签的方法

2、获取标签元素

document.getElemenById(id名)
document.getElementsByTagName(标签名)
document.getElementsByClassName(类名)
document.getElementsByName(name属性的值)
常用的两个：
document.querySelector(css选择器)
document.querySelectorAll(css选择器)

2、属性操作-操作标签的属性

设置属性-标签对象.setAttribute(属性名，属性值)
获取属性值-标签对象.getAttribute(属性名)
删除属性-标签对象.removeAttribute(属性名)

3、内容操作-操作标签中的内容

双标签文本内容：标签对象.innerText-获取/设置
双标签带标签的内容：标签对象.innerHTML-获取/设置
表单元素的内容：表单元素.value-获取/设置

4、设置样式

标签对象.style.css键=css值

5、设置类名

标签对象.className=类名

6、通过标签的关系来获取标签

获取所有子标签-父标签.children
获取上一个兄弟标签-标签.previousElementSibling
获取下一个兄弟标签-标签.nextElementSibling
获取父标签-子标签.parentElement
获取第一个子标签-父标签.firstElementChild
获取最后一个子标签-父标签.lastElementChild

7、标签操作（重要）

创建标签-document.createElement(标签名)

插入标签：
将子标签插入父标签的末尾：父标签.appendChild（子标签对象）
将子标签插入父标签的某个子标签前面：父标签.insertBefore(新的子标签，旧的子标签)

删除标签-父标签.removeChild(子标签)

替换-父标签.replaceChild(新的子标签，旧的子标签)

标签复制-标签.cloneNode(true)

8、获取标签样式-getComputedStyle(标签对象) - 返回包含子标签所有css键值对对象

9、获取标签大小

包含边框的大小
	标签.offsetWidth
	标签.offsetHeight
不包含边框的大小
	标签.clientWidth
	标签.cliebtHeight

10、获取标签的位置-相对于设置过定位的父标签

获取left位置：标签.offsetLeft
获取top位置：标签.offsetTop

11、不包含滚动条的网页的大小

宽：document.documentElement.clientWidth
高：document.documentElement.clientHeight

12、获取滚动过的距离-卷去的高度

document.documentElement.scrollTop||document.body.scrollTop-获取/设置

13、html基本结构

 html：document.documentElement
 body：document.body
 head：document.head
 title标题文本：document.title - 获取/设置

三、this指向

1、概念： this是js中的关键字，不同的地方this代表的意义也不一样

2、this指向

   (1)全局中的this-window
    (2)对象方法中的this-当前这个对象
    (3)事件函数中的this-事件源
    (4)普通函数中的this-window
    (5)定时器中的this-window
    (6)自调用函数中的this-window
    (7)箭头函数中的this-箭头函数上级作用域的this
    (8)构造函数中的this-new出来的对象
    注意：函数定义好，并不知道this代表什么，主要看函数最终如何调用
    	定义普通函数
    	当做事件函数使用 - 事件源
    	当做对象方法使用 - 对象
    	当做定时器要执行的函数 - window
    	剪头函数中的this - 箭头函数上一行代码中的this
    	
    // 'use strict' 
    // 严格模式下普通函数中的this不能代表window - undefined
    // console.log(this);

四、事件委托

1、定义

利用事件会冒泡，触发子标签的事件默认也会触发父标签事件，给父标签绑定事件，来判断是哪个子标签触发事件，用父标签事件来处理子标签的事件

2、好处

• 提高了绑定性能-多次绑定变一次
• 动态添加的子标签也能具备事件

3、什么时候用事件委托

• 如果子标签是动态添加的，子标签需要事件，给父标签就行
• 如果所有子标签都需要事件-给父标签绑定就好了-提高绑定性能

4、如何判断子标签-目标元素

window.event.target-目标元素
判断目标元素的标签名是哪个-target.tagName/nodeName-大写的标签
target.className-类名是哪个

例子：

  // 给3个li都绑定事件
    // var lis = document.querySelectorAll('li');
    // for(var i=0;i<lis.length;i++){
    //     lis[i].onclick = function(){
    //         console.log(this.innerText);
    //     }
    // }
    
    // 点击btn给ul新添加一个li
    // document.querySelector('button').onclick = function(){
    //     var li = document.createElement('li')
    //     li.innerText = 4
    //     ul.appendChild(li)
    // }
    
    // var ul = document.querySelector('ul');
    // ul.onclick = function(){
    //     var target = window.event.target
    //     if(target.tagName === 'LI'){
    //         console.log(target.innerText);
    //     }
    // }