javaScript的DOM和自调用函数

DOM - 一套操作html文档的标准 - 操作标签的方法

1.获取标签元素

document.getElementById("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(标签名)["Attr"]

插入标签：

将子标签插入到父标签的末尾：父标签.appendChild(子标签对象)

将子标签插入到父标签的某个子标签的前面：父标签.insertBefore(新的子标签, 旧的子标签)

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

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

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

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

9.获取标签大小

包含边框的大小：

    标签.offsetWidth

    标签.offsetHeight

不包含边框的大小

    标签.clientWidth

    标签.clientHeight

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指向

this是js中的关键字，不同的地方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为undefined，不能指向window

事件委托

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

事件委托的好处：

1.提高了绑定性能 - 多次绑定变一次

2.动态添加的子标签也能具备事件

 

什么时候用事件委托?

如果子标签是动态添加的，子标签需要事件，给父标签就行

如果所有子标签都需要事件 - 给父标签绑定就好了 - 提高绑定性能

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

window.event.target - 目标元素

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

target.className - 类名是哪个

<button>添加</button>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

面向过程 给3个li都绑定事件

var lis = document.querySelectorAll('li');

for(var i=0;i<lis.length;i++){

    lis[i].onclick = function(){

        console.log(this.innerText);

    }

}

---------------------------------------------------------------------------------------------------------------------------------

<button>添加</button>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

</ul>

面向过程 点击btn给ul新添加一个li

document.querySelector('button').onclick = function(){

    var li = document.createElement('li')

    li.innerText = 4

    ul.appendChild(li)

}

    - 使用事件委托给点击的li标签绑定事件 => 显示内容

var ul = document.querySelector('ul');

ul.onclick = function(){

    var target = window.event.target

    if(target.tagName === 'LI'){

        console.log(target.innerText);

    }

}