JavaScript（十三）

1.1.1 Web API介绍
APl(Application Programming lnterface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问-组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

1.1.2 Web API的概念
Web API是浏览器提供的一套 *** 作浏览器功能和页面元素的 API(BOM和DOM).

一、DOM简介 1.什么是DOM 文档对象模型（Document Object Model，简称 DOM ），是 W3C 组织推荐的处理可扩展标记语言（HTML 或者XML）的标准 编程接口 。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

2.DOM树

 文档：一个页面就是一个文档，DOM 中使用document 表示  元素：页面中的所有标签都是元素，DOM 中使用element 表示  节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用node 表示 DOM 把以上内容都看做是对象  二.获取对象 1.如何获取页面元素 获取页面中的元素可以使用以下几种方式: 1.根据ID 获取 2.根据标签名获取 3.通过HTML5 新增的方法获取 4.特殊元素获取 2.根据ID获取 使用getElementById() 方法可以获取带有ID 的元素对象。

语法：document.getElementById('id');
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象或null

案例代码： 

		2019-9-9
		
	

使用console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。  *根据标签名获取 使用getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

 document.getElementsByTagName('标签名');

案例代码： 

		
			知否知否 应是绿肥红瘦
			知否知否 应是绿肥红瘦
			知否知否 应是绿肥红瘦
			知否知否 应是绿肥红瘦
			知否知否 应是绿肥红瘦
		
		
			生僻字
		 生僻字
			生僻字
			生僻字
		
		
	

注意：

1.因为得到的是一个对象的集合，所以我们想要 *** 作里面的元素就需要遍历。

2.得到元素对象是动态的。

注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

*通过HTML5新增的方法获取

1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
2. document.querySelector('选择器');        // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll('选择器');     // 根据指定选择器返回

注意：
querySelector和querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

案例代码： 

    盒子1
    盒子2
    
        
            首页
            产品
        
    
    

*获取特殊元素（body，html）  获取body元素

1. doucumnet.body  // 返回body元素对象

 获取html元素

1. document.documentElement  // 返回html元素对象

3.事件基础  事件三要素

1.事件源（谁）：触发事件的元素

2.事件类型（什么事件）：例如click点击事件

3.事件处理程序（做啥）：事件触发后要执行的代码（函数形式），事件处理函数

案例代码：

		唐伯虎
		
	

执行事件的步骤

1.获取事件源

2.注册事件（绑定事件）

3.添加事件处理程序（采取函数赋值形式）

案例代码：

    123
    

常见的鼠标事件

鼠标事件                                 触发条件

 onclick                                    鼠标点击左键触发
onmouseover                          鼠标经过触发
onmouseout                            鼠标离开触发
onfocus                                   获得鼠标焦点触发
onblur                                      失去鼠标焦点触发
onmousemove                        鼠标移动触发
onmouseup                             鼠标d起触发
onmousedown                        鼠标按下触发

 分析事件三要素： 下拉菜单三要素关闭广告三要素 4. *** 作元素 

 JavaScript的DOM *** 作可以改变网页内容、结构和样式，可以利用DOM *** 作元素来改变里面的内容、属性等（注意：这些 *** 作都是通过元素对象的属性实现的）

改变元素内容（获取或设置)

element.innerText

从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉

element.innerHTML

 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

innerText改变元素内容

		显示当前系统时间
		某个时间
		
1123
		
	

 innerText和innerHTML的区别

获取内容时的区别：innerText会去除空格和换行，而innerHTML会保留空格和换行设置内容时的区别：innerText不会识别html，而innerHTML会识别

案例代码： 

    
    

        我是文字
        123
    
    

常用元素的属性 *** 作 1. innerText 、 innerHTML 改变元素内容 2. src 、 href 3. id 、 alt 、 title

获取属性的值：元素对象.属性名

设置属性的值：元素对象.属性名=值

案例代码：

    刘德华
    张学友 

    

    

案例代码：分时问候

		
		
		
	
	
		
		上午好