一、JavaScript七四由三部分组成：
1.ECMAScript(3/5/6)-核心语法：语法很关键-内功心法
2.DOM-Document Object Model:文档对象模型，外功招式-操作文档（html/css) 列如绑定点击事件、和鼠标划过事件，js操作html/css
3.BOM-Browser Object Model:浏览器对象模型，外公招生-操作浏览器（相对较少）-兼容性问题 列如前进、后退、刷新
二、DOM概述：文档对象模型，外功招式-操作文档（html/css)
DOM树：DOM将HTML看做了是一个倒挂的树状结构：（html->1.heade 2.body->heade下面是meta title .body 下面是自己创建的元素）树根其实是一个叫做：document的对象。
document的对象：不需要我们创建，一个页面自带一个document对象，由js解释器自动创建 在页面能够成功输出，包含了HTML以及以下的全部结构
作业：只要是对象一定有两个东西（属性和方法）：提供了我们找到元素和操作元素的方法
三、 查找元素：
1.通过HTML特性去查找元素
1.通过ID查找元素：
var elem=document.getElementById("id值")；书写不方便我就拿个变量保存起来，方便使用。
特殊：
1.如果有多个相同的id，只会找到返回第一个-id是唯一不重复的
2.*返回的结果：<li id="li">油条</li>,这个样子才能称之为叫做一个DOM元素/节点/对象，才可以用于对象操作
3.不准用这个方法-我们把Id留给后端使用，而且一次只能找到一个元素
2.通过标签查找元素：
var elems= document.getElementsByTagNamey("标签名")。此时的Element是复数说明是多个,并且普通的变量不可能保存住多个元素，所有一定是一个数组.找到所有的此标签，因为你是从document树根开始查找的，找到所有的此标签元素
特殊：
1.返回的结果：不是一个DOM元素/节点/对象，是不能直接用于任何操作的。是一个类数组对象对象，输出时数组是没有HTMLCollection
解决：要么用下标拿到某个，要么用遍历拿到每一个
2.*parent：代表的是你已经找到的某个父元素 var elems=标签名的父元素( parent).getElementsByTagNamey("标签名")。
3.通过class名查找元素：
var elems=document/parent.getElementsByClassName("class名)；
特殊：
1.返回的结果：不是一个DOM元素/节点/对象，是一个DOM集合，是不能直接做任何操作的
解决：要么用小标拿到某个，要么用遍历拿到某个
2.*parent:代表是你已经找到的某个父元素
2.通过关系获取元素：前提：至少先找一个元素：
1.父元素：elem.parentNode;-单个元素
2.子元素：elem.children；-集合：集合不能直接做操作 如果写成childrenNode会将换行空格输出text,我们不需要对空格做操作
3.第一个儿子：elem.firstlementChild; 如果写成firstChild只会找到空格text
4.最后一个儿子：elem.lastElementChild;
5.前一个兄都：elem.previousElementSibling;如果写成previousSibling也只会找到空格
6.后一个兄弟：elem.nextElementSibling;
单个元素找到就是单个元素，但是没找到是null。多个元素找到了是一个集合，但是没有找到是[]
四、操作元素：<div class id title href style="样式“>内容</div> <div></div>叫做标签，不是元素、 class id title href style 称为HTML属性 全部一个我们才称之为元素
1.内容：
1.innerHTML:获取或设置元素的内容部分，并且能够识别标签
获取：elem.innerHTML;
设置：elem.innerHTML="新内容"；
2、innerText:获取或设置元素的文本部分，不能识别标签
获取：elem.innerText;
设置:elem.innerText="新文本"；
以上两个操作都是针对
3.value:获取或设置input的内容部分
获取：input。value；
设置：input。value="新文本"；
2.属性：
1.获取属性值：elem.getAttribute("属性名")；简化版：elem.属性名；
2.设置属性值：elem.setAttrbute("属性名"，"属性值")；简化版：elem.属性名="新属性"；
简化版虽然简单，但是有缺陷：
1.calss必须写成className，因为es6变成了关键字
2.只能操作标准属性，不能操作自定义属性
建议：优先使用简化版，简化版满足不了，再用复杂做补充
3.样式：
样式有三种使用方式：
1.内联
2.内部
3.外部-符合内容html与样式css与行为js的分离原理
二阶段：更喜欢操作内联样式
1.内联的优先级最高-保证我们js写的样式必然生效
2.只会操作当前元素-不会牵一发而动全身
如何：
获取：elem.style.css属性名；
设置：elem.style.css属性名="css属性值"；
特殊：
1.设置css属性名如果有横线要去掉横线，变为小驼峰命名法。列如：dl.style.border-radius=50% 要写成 borderRadius 在js中"-"表示减的意思
2.获取只能获取内联样式-忍忍就过了
获取：往往用于判断
设置：其实就是修改
绑定事件：
符合内容html样式css与行为js的分离原理
单个元素：
elem..onclick=function(){
this->就是绑定事件的这个元素
}
多个元素：
for(var i=0;i<elems.length;i++){
elem..onclick=function(){
this->就是绑定事件的这个元素
}
}
