一、今日内容：
什么是BOM :浏览器对象模型，是javascript有能力与浏览器对话。
BOM提供了访问浏览器各种功能部件的途径，浏览器窗口本身，浏览器历史
什么是DOM:文档对象模型，使程序和脚本能够动态的访问和更新文档的内容，结构，样式，并独立于平台和语言的接口
DOM提供了一套HTML和XML文档的标准对象，以及访问这些文档的标准接口（方法）
API 就是给程序员提供的一种工具，以便可以更加轻松实现某种功能。
webAPI 是浏览器提供的一套浏览器功能和页面元素的API，一般都是方法和函数
每一个html标签都是一个元素节点，element
标签中的文字是文本节点（空格，回车也是文本节点），text
标签的属性是属性节点，Attribute
一切都是节点
获取标签对象的主要方式
获取html元素
h4--
document.getElementById（‘id’）;---节点
document.getElementsByClassName（‘className’）--类名获取---节点集合不是数组
document.getElementsByTagName（‘tagName’）；--标签获取--节点的集合 不是数组
document.getElementsByName（‘name’）；--NodeList--数组
h5--
document.getquerySelector('选择器')；符合要求的第一个元素
document.getquerySelectorAll（‘选择器’）；符合要求的所有元素 NodeList--数组
控制标签内容
值 文本内容
文本内容
innerText 后面值不解析标签；
innerHTML 解析标签
textContent 不解析标签
表单标签的值
Value
控制style样式
dom.style.属性名=‘属性值’；
当属性名中‘-’，在决赛中需要使用小驼峰命名法
background-color====backgroundColor
添加到标签的style属性中
控制class
dom.className='class名'；
事件四要素
事件源--谁来触发--标签
事件类型： 什么事件 鼠标事件 键盘事件
事件处理函数： 触发之后要进行的行为
事件对象：事件发生时相关信息都保存到事件对象中
添加事件
dom.addEventListener('事件名称'，事件处理函数)；
dom.addEventListener('click',function(event){
//事件源
console.log(event.target);
//事件类型
console.log(event.type);
//点击的坐标
console.log(event.clientX);
console.log(event.clientY);
})
|
