HTML DOM Document 对象

给文档对象添加/移除事件句柄

let btnEnter = document.getElementById('btnEnter');
function btn(){
  alert('单击事件,被触发');
}

/*
# 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";
}

/*
# reamveEventListener: 移除文档中的事件句柄
# 语法: document.remaveEventListener(event,function,useCapture)
# event: 必需。要移除的事件名称。
# function: 必需。指定要移除的函数。
# useCapture: 可选:
#             true - 事件句柄在捕获阶段移除
#             false- 默认。事件句柄在冒泡阶段移除
*/
// removeEventListener
// 移除文档对象已添加的事件句柄
btnEnter.removeEventListener('click',btn())

返回当前获取焦点元素

语法: doucment.activeElement.tagName
定义和使用: activeElement 属性返回文档中当前获得焦点的元素。

<div id="btns">
  <input type="text" id="name">
  <button id="btnName">btnName</button>
</div>

let name = document.getElementById('name');
let btnName = document.getElementById('btnName');
let btns = document.getElementById('btns');

用法一(获取子元素焦点事件名称):

btnS.addEventListener('click',function () {
  console.log(document.activeElement.tagName) // 输出所有子元素的焦点事件名称
})

用法二(元素本身的焦点事件名称):

name.addEventListener('click',function(){
  console.log(document.activeElement.tagName);
})

　添加class属性

// 添加class属性
pater1.setAttribute("class", "redtext");
// 获取class属性 :只对 ID 有效，class无效
let href = document.getElementById('href');
console.log(href.getAttribute('href'));