- 虽然mvvc开发，但不免还是需要和节点信息打交道
- 这边总结一些操作和兼容性问题。
一、查看html继承关系
二、EventTarget
// 概括：事件继承于此
1、知道有这几个方法就行，在mvvc中组件是靠响应式来触发的，而不是这里的事件
2、但html节点是这里的事件触发，侧重了解一下Event(e)
// 属性
1、Event.target // 对事件原始目标的引用
2、Event.currentTarget // 当前事件对象
3、Event.type // 事件的类型
4、Event.timeStamp // 当前时间戳
// 方法
1、event.preventDefault() // 取消默认事件（如果该事件可取消）
2、event.stopPropagation（） // 停止冒泡
三、Node
// 概括：节点的基类，主要提供节点基本信息和节点的增删改查
// 派生的其中一个<xx>形式的节点(element节点)
// 我们也可以把它理解为一种tree结构，如ATTRIBUTE_NODE(很多属性其实也是继承node)
// 属性
1、nodeType // 返回一个整数，其代表的是节点类型
// 我们发现Node对象上，定义了很多节点类型常量值
// 如ELEMENT_NODE、TEXT_NODE、COMMENT_NODE、DOCUMENT_NODE、ATTRIBUTE_NODE
// 使用：ele.nodeType === Node.ELEMENT_NODE
2、nodeName // 返回当前标签名(大写)，支持自定义的任意标签名！！！
3、其它是一些node节点的增删改查属性和函数，了解即可
四、Element
// 概括： 元素节点，是Node的一个派生，形式如<xx></xx>
// 主要提供标签上面的一些属性，如id,className,innerHTML等标签属性及相关方法，及标签节点的增删改查
// 派生的有,html/xml/svg等
- 1、标签属性相关
1、attributes // 返回所有属性，全面但不专业
2、classList // 专门操作class，支持add、remove、toggle、replace ！！！漂亮
- 2、定位渲染相关
// 先描述下基本概念：
// 一个标签，有content,padding,border,margin
// 实际渲染的时候，则需要考虑以下几点
// 1、从哪里开始渲染(相对于父亲的offsetTop/offsetLeft)
// 2、该元素的整体渲染区域(即offsetWidth/offsetHeight)
// 3、渲染内容从哪里开始(clientTop/clientLeft)
// 4、渲染内容的区域(即clientWidth/clientHeight)
// 5、内容真正的渲染长度是多少呢？因为有滚动，所以(scroll系列)
1、offset系列：整体渲染区域尺寸
// content + padding + border（有滚动条也一样，下面会描述）
2、client系列：渲染内容区域尺寸（考虑有滚动条怎么渲染就好理解）
// 理解：如果某div出现滚动条，则是不是给他content+padding区域内
// 一部分用于展示滚动条，剩余部分装真正的内容(内容有padding和content)
// 剩余部分用于展示的区域的width/height：就是clientWidth/clientHeight
// 如果该方向没有滚动条，可以发现长度就是content+padding
// 默认pc端滚动条宽度17px。
// clientLeft: 左边border宽度
// clientTop: 顶部border宽度
// clientHeight: 可视区(content + padding - 滚动条width)
// clientWidth:可视区(content + padding - 滚动条width)
3、scroll系列：内容真正尺寸
// scrollTop:头部卷起来的部分长度(滚上去了多少)
// scrollHeight:真正内容的长度
// scrollWidth:
// 如果没有滚动条，长度就是clientHeight/clientWidth
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置
// 相当于视窗
// width和height值等同于offsetWdith和offsetHeiht(但要更精确)
scrollTo() // 容器绝对滚动
scrollBy() // 容器相对滚动
scrollIntoView() // 节点滚动
- 3、增删改查相关
// 标签节点相关的增删改查，略
五、HTMLElement
增加html节点相关的一些属性和方法（html环境，比如会有点击，等）