day12 bom dom 事件 获取元素

Web API BOM DOM

Web API介绍

API的概念

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

• 任何开发语言都有自己的API
• API的特征输入和输出(I/O)
• API的使用方法(console.log(‘adf’))

Web API的概念

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

掌握常见浏览器提供的API的调用方式

JavaScript的组成

[外链图片转存失败(img-jGRWqrtq-1569390749574)(media/QQ图片20170810172512-2357176615.png)]

ECMAScript - JavaScript的核心 es5 es6

定义了JavaScript 的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型 brower Object Model

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型 document Object Model

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言(html)标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构,DOM(是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型

• 文档：一个网页可以称为文档
• 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
• 元素：网页中的标签
• 属性：标签的属性

DOM经常进行的操作

• 获取元素
• 对元素进行操作(设置其属性或调用其方法)
• 动态创建元素
• 事件(什么时机做相应的操作)

获取页面元素

根据id获取元素

var div = document.getElementById("id2");

当id重名的时候，会获取第一个，id有唯一性的

根据标签名获取元素

//标签名获取元素(获取的是一个数组！！！)
		var div = document.getElementsByTagName("div")[5];
		alert(div);

根据name获取元素*

<input type="tel" name="nate">
<input type="text" name="nate">
<input type="text" name="nate">


// 通过name来获取
		var names = document.getElementsByName('nate');
		for (var i = 0; i < names.length; i++) {
			alert(names[i]);
		}
		alert(names);

根据类名获取元素*

// 通过类名
		var mains = document.getElementsByClassName("main");
		alert(mains);

根据选择器获取元素*

// 根据选择器获取元素
		var id1 = document.querySelector('#id1');
		alert(id1);
		var mains = document.querySelectorAll('.main');
		alert(mains);

事件

事件：触发-响应机制

事件三要素

• 事件源:触发(被)事件的元素
• 事件名称: click 点击事件
• 事件处理程序(回调函数):事件触发后要执行的代码(函数形式)

事件的基本使用

<p id="box">i am a box</p>

var box_p=document.getElementById("box")
    box_p.onclick=function () {
        alert("i am a box")
        点击的时候则会弹出一个i am a box
    }

• 点击按钮切换图片

   /*1.获取元素*/
  var btn=document.getElementById("btn")
  var img1=document.getElementById("img1")
      var flag=1;
  /*2.给按钮注册事件*/
          btn.onclick = function() {
          //3.切换图片
          if(flag == 1) {
          //用flag来判断来回切换的条件
              img1.src = '../img/qian.svg';
              flag = 2;
          } else if (flag == 2) {
              img1.src = '../img/hou.svg';
              flag = 1;
          }
      }
  
  

属性操作

• innerHTML和innerText

  var box=document.getElementById("box")
  /*如果在解析的代码中含有html的表达式会解析成html,这也是一个可以插入新元素的一个办法*/
  box.innerHTML=" <h3>我是一个段落标签innhtml</h3>";    会以h3的形式出现
  

  // box.innerText="<p>我是一个段落标签inntxt</p>";
  
  输出结果为<p>我是一个段落标签inntxt</p>
  

  • /如果在解析的代码中含有html的表达式会解析成html,（这也是一个可以插入新元素的一个办法*/
  • /如果没有加标签的话那么两个的属性应该是相同的/

• HTML转义符

"		"
'		'
&		&
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

表单元素属性

• value 用于大部分表单元素（最常见的是input）的内容获取(option除外)
• type 可以获取input标签的类型(text checkbox radio tel email submit)
• disabled 禁用属性
• checked 复选框选中属性
• selected 下拉菜单选中属性