前端之页面元素的API(DOM) 1

1.认知 webAPI

1.1 API 是什么

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

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

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

  • var max = Math.max(1, 2, 3);

• 如何学习API:

  • 掌握这个API的功能(作用)

  • 掌握这个API要传递的参数

  • 掌握这个API执行完毕之后返回值是什么

1.2 webAPI 是什么

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

 

1.3 深度阅读 @

MDN-Web API(https://developer.mozilla.org/zh-CN/docs/Web/API)

DOM(https://baike.baidu.com/item/DOM/50288?fr=aladdin)

2. 认识DOM

概念: 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。

DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。

通俗理解: 把页面上的内容转换成对象的形式,通过操作对象,达到操作页面上标签和标签属性的一组方法

3. DOM 中常用的操作

• 获取元素

• 对元素进行操作(设置其属性或调用其方法)

• 动态创建元素

• 给元素注册事件

4. document对象

概念: document对象代表在浏览器中加载的页面

5.获取页面中的元素

什么是元素?

​ html中的标签在DOM中称为元素

为什么要获取页面上的元素呢?

​ 因为:我们想要操作页面上的元素,首先需要获取到对应的元素，然后才能进行后续操作

5.1 根据id获取元素

语法: document.getElementById('id名');

作用: 在整个文档中查找id名为传入的值的元素,如果没有返回null

//html
<div id="box"></div>
​
//js
//在整个文档中查找id为box的元素
var div = document.getElementById('box');
console.log(div);  //返回的是对应的元素

5.2 根据标签名获取元素

语法: document.getElementsByTagName('标签名');

作用: 在整个文档中查找所有标签名为传入的值的元素,将这些所有符合条件元素的存放到一个伪数组中返回出来,如果没有就返回一个空的伪数组

//html
<div>div1</div>
<div>div2</div>
<div>div3</div>
//js
//在整个文档中查找所有的div标签
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  var div = divs[i];
  console.log(div);
} 

5.3 小结:

• 通过document这个对象调用获取元素的方法

• getElementById 返回的是对应的DOM元素, 如果没有返回null

• getElementsByTagName 返回的是存储DOM元素的伪数组,如果没有返回空的伪数组

6.事件

6.1 什么是事件?

用户点击页面上的某个元素,或者表单上的某个文本框获得焦点等等,这些都是事件

6.2 为什么要学习事件?

因为作为一个网页开发者,我们要实现当用户点击某个元素时,我们要去实现对应的需求,所以我们要学习事件

6.3 如何实现这种需求呢?

6.3.1 事件的三要素

• 事件源 : 监听事件的元素

• 事件名 : 监听的事件类型

• 事件处理函数 : 触发事件时,要调用的函数

6.3.2 如何注册事件

语法: 事件源.on + 事件名 = 事件处理函数

element.onclick = function(){}

//html
<div id="box" style="width:100px; height:100px; background-color: red"><div>
    
//js
var box = document.getelementById('box');
//
box.onclick = function(){
    console.log(1);
}

var box = document.getElementById('box');

  box.onclick = fn; //不要加小括号,因为加了小括号就是函数调用,会把函数执行完的结果赋值给onclick. 而我们需要的是把函数赋值给onclick

  function fn(){
    //如果没有加return ,浏览器会自动帮我们加一个return undefined
  }

 

6.4 给a标签注册事件时,需要注意的问题

a标签是超链接标签,在开发网页中,尽量多的使用a标签有利于网页的SEO,所以我们在做动态效果时,要经常给a标签注册点击事