JavaScript学习（一）

                                        JavaScript学习（一）

Web API介绍

API的概念

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

• 任何开发语言都有自己的API
• API的特征输入和输出(I/O)

               比如： var max = Math.math(1,2,3);

• API的使用方法(console.log('abc'));

Web API的概念

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

此处的Web API特指浏览器提供的API(一组方法)

参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API

JavaScript的组成

ECMAScript-JavaScript的核心

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

BOM 浏览器对象模型

• 一套操作浏览器功能的API
• 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

DOM文档对象模型

• 一套操作页面元素的API
• DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

DOM的概念

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

DOM又称为文档树模型。

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

DOM常用的操作

• 获取元素

根据id获取元素

var div = document.getElementById('div');
//获取到的数据类型是 HTMLDivElement
console.log(div);

根据标签名获取元素

var divs = document.getElementsByTagName('div');
for(var i=0; i<divs.length; i++){
    var div = divs[i];
    console.log(div);
}

根据name获取元素

var sexs = document.getElementsByName('sex');
for(var i=0; i<sesx.length; i++){
    var intput = sexs[i];
    console.log(input);
}

根据类名获取元素

var mains = ducment.getElementsByClassName('main');
for(var i=0; i<main.length; i++){
    var main = mains[i];
    console.log(main);
}

根据选择器获取元素

var text = document.querySelector('#text');
console.log(text);

var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  console.log(box);
}

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

非表单元素的属性

href、title、id、src、className

var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);

var pic = document.getElementById('pic');
console.log(pic.src);

 innerHTML和innerText

var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成标签</p>';
console.log(box.innerText);

 innerText和textContent的兼容性问题处理

// 获取元素之间的内容
function getInnerText(element) {
  // 判断element是否支持innerText
  if (typeof element.innerText === 'string') {
    return element.innerText;
  } else {
    return element.textContent;
  }
}

// 设置元素之间的内容
function setInnerText(element, content) {
  // 判断element是否支持innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}

 HTML转义符

"        "
'        '
&        &
<        &lt;
>        &gt;
空格      &nbsp;
©        &copy;

表单元素的属性

1）value 用于大部分表单元素的内容获取(option除外);

2）type 可以获取input标签的类型(输入框或复选框等);

3）disabled 禁用属性

4）checked 复选框选中属性

5）selected 下拉菜单选中属性

自定义属性操作

getAttribute()获取标签行内属性

setAttribute()设置标签行内属性

removeAttribute()移除标签行内属性

与 element.属性 的区别：上述三个方法用于获取任意的行内属性。

样式操作

使用style方式设置的样式显示在标签行内

var box = document.getElementById('box');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

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

类名操作

修改标签的calssName属性相当于直接修改标签的类名

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