DOM和this指向

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(标签名)
插入标签：
/*
将子标签插入到父标签的末尾：父标签.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是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不能代表window - undefined