DOM文档对象模型

01.js组成:

​ ECMAScript BOM DOM

02. DOM

DOM： 页面中的标签，我们通过 js 获取到以后，就把这个对象叫做 DOM 对象
作用： 文档对象模型 提供操作html文档对象能力,提供API 
操作Dom:
​	1.获取标签元素
	2.操作内容
	3.操作样式
	4.操作属性
核心对象：文档对象 
	document 对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
	window对象的子对象 Document

03.获取标签元素：

1.getElements系列

1.getElements系列

​1.1document.getElementById()
  	=>document是window对象子对象，可以省略
	=>返回html 标签元素(节点对象) id唯一，获取到的就是元素
 1.2getElementsByTagName()
	=>根据标签名获取html元素
    =>返回的是一个伪数组
 	=>必须要用索引才能得到准确的Dom元素
	伪数组
		 =>可以通过索引号访问伪数组中元素
		 =>可以进行for循环遍历
		 =>不能使用数组Array常用方法 ex:arr.push...
		 =>一般获取多个html标签元素存储在伪数组中
 1.3getElementsByClassName()
	=>返回的是一个伪数组
	=>必须要用索引才能得到准确的Dom元素
 1.4getElementsByName() // 标签中有name属性的
	=>返回的是一个伪数组
	=>必须要用索引才能得到准确的Dom元素

2.query Selector 系列

2.query系列 =>javascript获取标签元素新方法

 2.1 querySelector() //返回元素 （#id名） （.class名）
 2.2 querySelectorAll() //返回伪数组
       =>根据选择器获取html标签元素
       css选择器都可以用

04. 操作内容

1.获取内容
 	非表单内容
     	innerHTML 属性
        innerText 属性
    表单元素内容
        value 属性
            
2.设置内容 ele:获取的元素节点的名字
    ele.innerHTML = '<h1>内容</h1>'  内容中有标签会被解析
    ele.innerText = '<h1>内容</h1>'  标签作为文本内容
    ele.value = '内容'

05.操作样式

=> ele.style.color = 'red'  给其添加的是行内样式

=> ele.className = '类名'    类样式 会覆盖前面类名的样式，相当于赋值

=> ele.classList.add('类名')        添加一个类样式 不会覆盖
=> ele.classList.remove('类名')     删除一个类样式

06绑定事件两种写法

1.属性事件

<div onclick = ' js代码 '> </div>

2.绑定事件

function test1(){
  //获取div元素节点
  var div = document.querySelector('div')
  //绑定点击事件
  div.onclick = function(){
  	 js代码
  }
}

07.操作属性（方法）

1.设置属性
     setAttribute('属性名','属性值')
     aEle.setAttribute('href','http://www.baidu.com')
2.获取属性
     getAttribute('属性名')
3.移除属性
     removeAttribute('属性名')

08.this 当前对象

 根据不同场景表示不同对象 
1. 事件处理函数中 this 表示  事件源