dom

DOM

**DOM(文档对象模型)**

当我们网页在加载时,浏览器会创建页面的文档模型(Document Object Model)
DOM对象也称为节点Node

通过我们的DOM对象模型我们可以做到
	1.改变页面中的所有HTML元素
	2.改变页面中的所有HTML属性
	3.改变页面中的所有CSS样式
	4.对页面中所以的事件作出反应

查找 HTML中的元素

	1.document.getElementById()   通过HTML的id来查找元素
	2.document.getElementsByTagName():通过元素名获取对应的元素，获取出来的是一个类数组对象 
	3.document.querySelector():通过css选择器获取元素，获取匹配到的第一个
	4.document.querySelectorAll():通过css选择器获取元素，获取匹配到的所有，获取出来的是
	一个类数组对象 

 <div id="d">nihao </div>
    <div class="d">nihao </div>
    <div>nihao </div>
    <script>
        var d1=document.getElementById("d");//通过id查找元素
        var d2=document.getElementsByClassName(".d");//类数组对象
        var d3=document.getElementsByTagName("div");//类数组对象
        var d4=document.querySelector("div");//获取的第一个
        console.log(d1,d2,d3,d4);
    </script>

类数组对象是一个类似数组,但是不能用数组的方法,可以将它遍历

改变html中class类名的样式

dom对象.className : 获取或设置元素的类名 
dom对象.classList dom4的新属性  IE10以下不兼容
- add()  添加一个类名
- remove() 删除一个类名
- contains() 判断元素是否存在一个类名
- toggle()  用于删除/添加一个类名

获取样式和设置样式

css样式代码在js中写一定是小驼峰命名法

• dom对象.style : 获取的是行内样式

• window.getComputedStyle(“dom对象”) 获取

• dom对象.style.“样式名” = “样式值” 修改的一定是行内样式

• dom.style.width=修改后的元素长度"

DOM 事件

事件的三个要素

1.事件源

是指那个元素引发的事件。
2.事件

事件是指发生某一件事，可以是点击划过还有等等

3.事件处理程序

事件处理程序即执行的结果。

事件发生的三个阶段

1. 事件冒泡：先从最里面的元素出发，然后到最外层元素，简单来说就是用内向外
2. 事件捕获：先从最外面的元素出发，然后到最里层元素，简单来说就是用外向内
3. 目标阶段

事件类型的划分

• load加载事件：load是加载，当加载一个新窗体的时候会首先处理这个事件中代码，
  在之前还有一个 init… 这个事件， 这是初始化的，是第一个执行的
• 鼠标事件 ：指的是我们鼠标的一系列操作
  点击click，移入和移除都是我们的鼠标事件
• 键盘事件 ：按下键盘产生的事件
• 表单事件 ：即表格事件