1、DOM

1.1 文档对象模型

DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中所有标签都是元素，DOM中使用element表示
• 节点：网页中所以内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

2、获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素

我们如何来获取页面中的元素呢？

获取页面中的元素可以使用以下几种方式

• 根据ID获取
• 根据标签名获取
• 通过HTML5新增的方法获取
• 特殊元素获取

2.2 根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

HTML DOM 定义了多种查找元素的方法，除 getElementById() 外，还有 getElementsByName() 和getElementsByTagName()。

不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。

在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）唯一的名称，然后就可以用该 ID 查找想要的元素。

2.3 根据标签名来获取元素

使用getElementByTagName()方法可以返回带有标签名的对象集合。

document.getElementByTagName("标签名");
遍历

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

console.log(lis);

}

注意：

• 返回的是获取过来元素对象的集合，以伪数组的形式存储
• 我们想要依次打印里面的元素对象可以采取遍历的方式
• 如果页面中只有一个li标签，返回的还是一个伪数组的形式
• 如果页面中没有这个元素，返回的是一个空的伪数组

还可以获取某个父元素内部所有指定标签名的子元素

2.4 使用html5新增的方法获取

1.document.getElementsByClassName('类名') ； //根据类名获取某些元素集合

2.document.querySelector(''选择器“); //根据指定选择器返回第一个元素对象

3.document.querySelectorAll(''选择器“); //根据指定选择器返回所有元素对象

4.获取body元素

document.body;

5.获取html元素

document.documentElement；

3、事件基础

概述：事件是可以被JavaScript侦测到的行为，简单理解就是触发响应的一种机制

事件是由三部分组成 ：事件源、事件类型、事件处理程序

（1）.事件源：事件被触发的对象 谁 按钮 btn

（2）.事件类型：如何触发，什么事件，比如鼠标单击事件(onclick)，还是鼠标经过，还是键盘按下

（3）.事件处理程序 通过一个函数赋值的方式 完成

btn.onclick = function(){

​ alert('点秋香');

}

执行事件的步骤：

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

4、操作元素

element.innerText

起始位置到终止位置的内容，但除去html标签，同时空格和换行也会去掉

element.innerHtml

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

innerText与innerHtml的区别：

1、innerText不识别html标签，非标准，会去除空格和换行，

innerHtml识别html标签 W3C标准，同时保留空格和换行

2、这两个属性是可读写的，可以获取元素里面的内容

操作样式属性

我们可以通过js修改元素大小、颜色、位置等样式

element.style 行内样式操作

element.className 类名样式操作

注意：

1、js里面的样式采用驼峰命名法 比如fontSize、backgroundColor

2、js修改style样式操作，产生的是行内样式，css权重比较高

3、使用element.style获得元素样式如果样式较少或者功能简单的情况下使用

4、我们可以通过修改元素的calssName更改元素样式，适合于功能较多或者功能复杂的情况

5、因为class为保留字，因此使用className来操作元素类名属性

6、calssName会直接更改元素的类名，会覆盖原先的类名

总结：

排他思想：

首先先排除他人，然后才设置自己的样式，这种排除他人的思想我们称为排他思想

鼠标经过：onmouseovser

鼠标离开：onmouseout

自定义属性的操作：

1.获取属性值

element.属性 获取属性值

element.getAttribute('属性'); //get是获取 attribute是属性的意思

<div id="demo">

</div>

<script>
	var div = document.querySelector('div');
    console.log(div.id);   //demo
</script>