DOM操作

.webapi介绍

1. 、api的概念   

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()

任何开发语言都有自己的API

API的特征输入和输出(I/O)

API的使用方法(console.log())

2. 、webapi的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

我们可以通过API去操作DOM和BOM

此处的web API特指浏览器提供的API(一组方法)，web API在后面的课程中有其它含义

文档：一个网页可以称为文档

节点：网页中的所有内容都是节点（标签、属性、文本、注释等）

元素：网页中的标签

属性：标签(元素)的属性    

根据id获取元素

  var div1 = document.getElementById("box1");

2、通过类名获取元素

 var p1Arr = document.getElementsByClassName("p1");

伪数组定义：

1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)

不具有数组所具有的方法

伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组

、通过标签名获取元素

var tag1 = document.getElementsByTagName("div");

通过name名获取元素

 var userList = document.getElementsByName("user");

1. 通过选择器的querySelector获取元素

querySlector():获取指定选择器的第一个元素，参数就是选择器的名称

  var div1 = document.querySelector(".box1");

1. 通过选择器的querySelectorAll获取元素

querySelectorAll():获取指定选择器的所有的元素，参数就是选择器的名称

 var boxList = document.querySelectorAll(".box1");

1. 事件初识

事件：触发-响应机制

事件三要素

事件源:触发(被)事件的元素

事件类型:事件的触发方式(例如鼠标点击或键盘点击)

事件处理程序:事件触发后要执行的代码(函数形式)

鼠标单击事件：onclick    浏览器加载完成事件：onload

(3)、事件触发的多种写法

HTML内部书写所有

HTML行内触发方法

HTML外部书写

1. 非表单元素的属性操作

   href、title、id、src、className width height等等

   1. 添加src属性值显示图片

   imgBox.src = "images/jie.jpg";

   2. 改变图片大小

   imgBox.width = 750;

       imgBox.height = 500;

   3. 通过style改变宽高

   imgBox.style.width = 750 + "px";

   imgBox.style.height = 500 + "px";

   //通过样式属性设置宽高、位置的属性类型是字符串，需要加上px

   凡是css中这个属性是多个单词的写法,在js代码中DOM操作的时候.把-干掉,后面的单词的首字母大写即可

   4. 通过类名改变宽度

     imgBox.className = "imgCl";

   //className 会覆盖之前设置好的类名！

   5. 隐藏元素

   1、src=""

   2、display=none; 不占位置的

   3、visibility="hidden

   6. this的指向问题
      1.  普通函数中，this指向window
         2.   构造函数中，this指向实例化对象
         3.   对象函数中，this指向当前的对象
         4.  事件函数中，this指向事件源