webAPI 第一天

js基础已经了解结束,我们开始学习webapi

一.webpi 了解

web : 网页   

api :预先定义的方法,帮我们实现某种特定的功能       特征:输入(参数)  输出(返回值)

webapi就是浏览器提供给我们用来操作页面的方法

js的组成:  1. ECMAScript : js基础课 ,js高级 ,  js的标准规范,规范了js的基本语法数据类型

                 2. DOM   操作网页元素的方法

                 3. BOM 操作浏览器功能的方法

二.DOM

文档对象模型(文档树模型) :整个页面和页面中所有的内容都视为对象

一种操作网页元素的方法

1.几种常见的概念

文档:  document   DOM把整个网页  => document                

                             以后想要操作网页 => 操作document即可

                             还要网页里面的内容都当成对象

节点 : node  

          网页中所有的内容:  标签节点   注释节点    文本节点   属性节点 

元素: element   标签节点

2.getElementById

通过id获取元素 : document.getElementById ( )

                参数是:id名称

                返回值:获取到的元素,dom对象

                dom对象中的属性和标签中属性是一一对应的,通过修改dom对象中的属性达到修改标签属性的作用

                如果没有获取元素,返回null

3.getElementByTagName

通过标签名获取元素

1.参数:字符串  标签名称

2.返回值:伪数组

3.方法有2个,document.getElementsByTagName( )

                    box.getElementsByTagName( )

4.一般情况下遍历的多  多个元素:遍历      单个元素:arr[0]

4.修改元素的属性

1.标签属性   alt  title  src 等等,可以通过获取的标签对象直接添加

2.样式属性  background  color  fontsize   

                  添加class类名 

                  如:在html中增加类型 

 

                       在DOM中    div.className = 'red'

3.文本内容   innerText

5.事件

概念:触发-响应的机制     js基于事件

三要素 : 事件源  给谁注册  比如:btn

              事件名  注册什么    比如:click点击事件  前面要加on

              事件处理函数   就是后面的函数 执行啥

代码:  btn.onclick = function( ){  }

事件处理函数不能立马执行,   触发事件的时候执行

6.this

事件中的this   ,  代表注册事件的对象,事件源  ,指向当前对象