# HTML DOM Document 对象

#### 给文档对象添加/移除事件句柄
```jsx
let btnEnter = document.getElementById('btnEnter');
function btn(){
  alert('单击事件,被触发');
}
```
```jsx
/*
# addEventListener: 给文档对象添加事件句柄
# 语法: document.addEventListener(event,function,useCapture)
# event: 必需。描述事件名称的字符串。
# function: 必需。描述了事件触发后执行的函数。 
# useCapture: 可选:
#             true - 事件句柄在捕获阶段执行
#             false- 默认。事件句柄在冒泡阶段执行
*/
btnEnter.addEventListener('click',btn())
/*您可以通过函数名来引用外部函数：*/
document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
```
```jsx
/*
# reamveEventListener: 移除文档中的事件句柄
# 语法: document.remaveEventListener(event,function,useCapture)
# event: 必需。要移除的事件名称。
# function: 必需。指定要移除的函数。
# useCapture: 可选:
#             true - 事件句柄在捕获阶段移除
#             false- 默认。事件句柄在冒泡阶段移除
*/
// removeEventListener
// 移除文档对象已添加的事件句柄
btnEnter.removeEventListener('click',btn())
```
#### 	返回当前获取焦点元素
语法: doucment.activeElement.tagName<br>
定义和使用:
  activeElement 属性返回文档中当前获得焦点的元素。

```html
<div id="btns">
  <input type="text" id="name">
  <button id="btnName">btnName</button>
</div>
```
```jsx
let name = document.getElementById('name');
let btnName = document.getElementById('btnName');
let btns = document.getElementById('btns');
```
用法一(获取子元素焦点事件名称):
```jsx
btnS.addEventListener('click',function () {
  console.log(document.activeElement.tagName) // 输出所有子元素的焦点事件名称
})
```
用法二(元素本身的焦点事件名称):
```jsx
name.addEventListener('click',function(){
  console.log(document.activeElement.tagName);
})
```
####　添加class属性
```jsx
// 添加class属性
pater1.setAttribute("class", "redtext");
// 获取class属性 :只对 ID 有效，class无效
let href = document.getElementById('href');
console.log(href.getAttribute('href'));
```