一、DOM的含义

1、DHTML

动态的HTML，是现有技术整合的一个统称，让网页在离线状态也能保存动态效果
?? ??? ?DHTML = HTML + CSS + JS

2、DOM

? ? ? ? 文档对象模型，专门用于操作文档（HTML和CSS）?
?

3、DOM树

? ?在HTML文档中，所有的元素、属性、文本、注释等都会被视为一个DOM节点/DOM对象/DOM元素

4、概念：其实树根是document对象

? ?在JS中，不需要我们去创建的，由浏览器的js解释器自动创建，且一个页面只有一个document
? ?作用：通过树根可以找到下面的任何一个DOM元素，还可以操作他

5、获取元素：类似css的选择器 - 必须先找到元素才能操作元素

? ?1、通过 HTML的特性获取元素：
? ? (1)、ID获取：
?? ? ? 语法：var elem=document.getElementById("id值"); -- id是唯一
?? ? ? 在当前 DOM树中，根据元素的id，获取具体的dom节点
?? ? ? 返回：找到了，保存的就是对应的元素
? ? ? ? ? ? ? ? ? 没找到，返回的是一个null
?? ? ? 强调：输出来长得像一个标签的样子，才叫做DOM节点/DOM对象/DOM元素，才能去执行后续操作
?? ?
? ? (2)、标签名获取：
?? ? ? 语法：var elems=document/parent.getElementsByTagName("标签名");
?? ? ? 在当前 DOM树中，根据元素的标签名，获取了具体的dom集合（类数组集合）
?? ? ? 返回：找到了，返回的是一个类数组集合
? ? ? ? ? ? ? ? ? ?没找到，返回的是一个空集合[];
?? ? ? 强调：1、dom集合不允许直接做后续操作，会报错

? ? ? ? ? ? ? ? ? 解决：1、加下标获取到某一个 2、循环遍历获取到所有
? ? ? ? ? ? ? ? ? 2、parent代表的是你已经找到的某个父元素

? ? (3)、class名获取
?? ? ? 语法：var elems=document/parent.getElementsByClassName("class名");
?? ? ? 在当前 DOM树中，根据元素的class名，获取了具体的dom集合（类数组集合）
?? ? ? 返回：找到了，返回的是一个类数组集合
? ? ? ? ? ? ? ? ? 没找到，返回的是一个空集合[];
?? ? ? 强调：1、dom集合不允许直接做后续操作，会报错

? ? ? ? ? ? ? ? ? 解决：1、加下标拿到某一个 2、循环遍历拿所有
? ? ? ? ? ? ? ? 2、parent代表的是你已经找到的某个父元素

? 2、通过元素之间的关系获取元素：
?? ?使用的前提条件：至少要找到一个人才能动用关系

?? ?父元素：xx.parentNode; //单个元素
?? ?子元素：xx.children; //集合
?? ?第一个儿子：xx.firstElementChild; //单个元素
?? ?最后一个儿子：xx.lastElementChild; //单个元素
?? ?前一个兄弟：xx.previousElementSibling; //单个元素
?? ?后一个兄弟：xx.nextElementSibling; //单个元素
?? ?

?? ?强调：集合不能做操作，只有单个元素可以

6、操作元素

前提：1、至少要找到元素
?? ??? ? ? 2、页面上所有的东西数据类型都是一个字符串
? ?1、元素的内容
? ? ? ?1、innerHTML属性：
?? ??? ?语法：获取：elem.innerHTML; - 往往都是用来做判断的
? ? ? ? ? ? ? ? ? ?设置：elem.innerHTML="内容"; - 修改

? ? ? ?2、innerText属性：
?? ??? ?语法：获取：elem.innerText;
? ? ? ? ? ? ? ? ? 设置：elem.innerText="文本";

?? ?小总结：以上两个操作几乎相似，但是innerHTML才可以识别标签，innerText只能操作纯文本 -? ? ? ? ? ? ? ? ? ? 只有双标签可用
?
? ? ? ?3、value属性：专为单标签input准备的获取和设置内容
?? ??? ?语法：获取：input.value;
? ? ? ? ? ? ? ? ? 设置：input.value="值";

? ?2、元素的属性

? ? ?什么叫属性：<elem id class?src alt?href title style ></elem>
?? ?1、获取元素的属性值 - 往往都是用来做判断的
?? ??? ?elem.getAttribute("属性名");

?? ?2、设置元素的属性值 - 修改
?? ??? ?elem.setAttribute("属性名","属性值");

?? ?属性的简化版操作：
?? ??? ?1、获取元素的属性值：elem.属性名; - 往往都是用来做判断的
?? ??? ?2、设置元素的属性值：elem.属性名="属性值"; - 修改

?? ??? ?简化版小缺陷：1、class必须写为className
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2、自定义属性不能操作，只能操作标准属性

? ?3、元素的样式
?? ?1、CSS定义的方式：
?? ??? ?1、内联样式 - JS要操作最好就要操作内联样式
?? ??? ?2、内部样式表
?? ??? ?3、外部样式表 - 一阶段最适合开发时使用

?? ?2、为什么JS要尽量的操作内联样式：
?? ??? ?1、优先级最高 - 写的JS的样式不至于别人给覆盖了
?? ??? ?2、牵一发而动全身 - 内联样式只会修改到当前元素

?? ?3、语法：
?? ??? ?获取：elem.style.css属性名; - 往往都是用来做判断的
?? ??? ?设置：elem.style.css属性名="css属性值"; - 修改
?? ??? ?特殊：1、css属性名写法不一样，把横线删掉换成驼峰命名法
?? ??? ??? ?CSS：? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?JS：
?? ??? ??? ?width? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?width
?? ??? ??? ?background-color? ? ? ? ? ? ? ? ? ? ? ? backgroundColor
?? ??? ??? ?border-top? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?borderTop
?? ??? ??? ?