WebAPI之DOM介绍， 获取页面元素，注册事件及应用，样式操作及应用

Web API

Web API介绍

API的概念

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

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

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

DOM

DOM的概念

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

DOM又称为文档树模型

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

DOM经常进行的操作

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

获取页面元素

htmL是从上到下执行的，一般把js放在Body的最后面。

1.根据id获取元素

var div = document.getElementById(‘main’);
注意：由于id名具有唯一性，部分浏览器支持直接使用id名访问元素，但不是标准方式，不推荐使用。

2.根据标签名获取元素

获取到的集合是动态集合
var divs = document.getElementsByTagName(‘div’);

3.根据name获取元素

var inputs = document.getElementsByName(‘hobby’);

4.根据类名获取元素

浏览器兼容性，ie9后才支持
var mains = document.getElementsByClassName(‘main’);

5.根据选择器获取元素

浏览器兼容性，IE8以后才执行。移动端都支持。
只会返回第一个匹配到的元素：
var text = document.querySelector(’#text’);
返回所有匹配到的元素：
var boxes = document.querySelectorAll(’.box’);

• 总结

掌握
	getElementById()
	getElementsByTagName()
了解
	getElementsByName()
	getElementsByClassName()
	querySelector()
	querySelectorAll()

注册事件及应用

事件三要素

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

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

属性操作

非表单元素的属性

href、title、id、src、className

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

this的几种情况：
1.普通函数中的this -> window
2.构造函数中的this -> 是当前构造函数创建的对象
3.方法中的this ->所属的对象
4.事件处理函数中的this -> 事件源，谁调用的该事件this就指向谁

display: block;设置元素显示。 display: none;设置元素隐藏。

为什么DOM对象的对应的标签的class属性的名字叫做className ，因为class在js中是关键字，关键字不可以作为变量或者属性的名字。

取消a的跳转默认行为 return false;

• HTML转义符

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

innerHTML和innerText

innerHTML 获取内容的时候，如果内容中有标签，会把标签也获取到。设置内容，如果内容中带标签，会以HTML的方式来解析。
innerText 获取内容的时候，如果内容中有标签，会把标签过滤掉，把前后的换行和空白都去掉。设置内容，如果内容中带标签，在网页上会把标签显示出来。

innerText(textContent) 当设置不含标签的内容的时候应该使用innerText，效率高。因为innerHTML会解析里面的标签。

innerText(会把标签过滤掉)/textContent(原封不动的把内容输出)获取内部文本
浏览器兼容问题:谷歌,新版的火狐,新版的IE都支持。旧版的火狐只支持textContent,旧版的IE只支持innerTe。

		// 当属性不存在的时候返回的是undefined,当属性存在的时候返回的是 该属性的类型
		// console.log(typeof box.a);
    var box = document.getElementById('box');
    console.log(getInnerText(box));
		
    // 处理innerText的兼容性问题
    function getInnerText(element) {
      // 判断当前浏览器 是否支持元素的innerText属性
      if (typeof element.innerText === 'string') {
        return element.innerText;
      } else {
        return element.textContent;
      }
    }

表单元素属性

• value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)

当html中的标签的属性，只有一个值的时候。DOM中对应的元素的属性值是布尔类型（true或false ）：

• disabled 禁用属性
• checked 复选框选中属性
• selected 下拉菜单选中属性

获取每个字符再以|来分割每个字符串：
拼接字符串的方式,会不断地新开辟空间,速度会慢些。var s = ‘’; 循环函数s += input.value + ‘|’;
而数组是在当前元素后面继续追加,速度快。var array = []; 循环函数array.push(input.value); array.join(’|’)

随机生成索引:
Math.random() -> [0, 1)
Math.random() * 5 -> [0, 5)
var randomIndex = parseInt(Math.random() * options.length);

获取焦点的事件onfocus
当鼠标移入onmouseover 当鼠标移出onmouseout

list-style-type: none;去除列表前面的点

获取对象没有的属性，属性的值是undefined

自定义属性操作

• 元素.getAttribute(“属性名”) 获取标签行内属性
• 元素.setAttribute(“属性名”,“值”) 设置标签行内属性
• 元素.removeAttribute(“属性名”) 移除标签行内属性
• 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作及应用

设置样式属性比较少的时候，使用style方式设置的样式显示在标签行内

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

• 注意：当设置宽度和高度的时候属性类型是字符串，必须带单位px，如果不带单位，会有错误。

类名操作

当设置多个样式属性的时候使用类样式方便
修改标签的className属性相当于直接修改标签的类名

var box = document.getElementById('box');
box.className = 'show'; //shows是类名
box.className=box.className.replace("hide","show");//多个类样式只替换其中一
个，第一个参数是原来的，第二个参数是新的
input.style.backgroundColor = '';// 消除样式

总结：
DOM 文档对象模拟
常见的DOM操作：
获取元素 getElementById() getElementsByTagName()
给元素注册事件 onclick onmouseover onmouseout onfocus onblur
操作元素的属性：
非表单元素 href title src alt等
表单元素 type value checked disabled selected
公共属性 id className style
样式操作 className style
自定义属性 setAttribute() getAttribute() removeAttribute()

this.className = options.className || ‘’; // 设置属性的默认值
//如果第一个 运算数 转换成布尔类型，是true ，直接返回这个运算数
//如果第一个 运算数 转换成布尔类型，是false，返回第二个运算数

console.log()会在浏览器控制台打印出信息
console.dir()可以显示一个对象的所有属性和方法

模拟DOM的结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">hello</div>
  <p id="p">world</p>
  <!-- 这是注释 -->
	
  <script>
    var box = document.getElementById('box');
    // 创建一些列具有相同属性的对象，构造函数
    // 获取对象没有的属性，属性的值是undefined
    function Node(options) {
      // 设置属性的默认值
      this.className = options.className || '';
      this.id = options.id || '';
			
      // 跟节点相关的属性
      // 节点的名称，如果是元素的节点的话，是标签的名称
      this.nodeName = options.nodeName || '';
      // 节点的类型  如果是元素节点 1 属性节点 2  文本节点 3  数值类型
      this.nodeType = options.nodeType || 1;
      // 记录节点的值，如果是元素节点，始终是null
      this.nodeValue = options.nodeValue || null;
      // 记录子节点
      this.children = options.children || [];
    }
    
    // 创建html节点
    var html = new Node({
      nodeName: 'html'
    });

    // 创建head，body节点
    var head = new Node({
      nodeName: 'head'
    });
    var body = new Node({
      nodeName: 'body'
    })		
		
    // 设置html中的子节点 head,body 数组形式直接用Push即可
    html.children.push(head);
    html.children.push(body);

	// 创建div，p节点
    var div = new Node({
      nodeName: 'div'
    })
    var p = new Node({
      nodeName: 'p'
    })

    // 设置body的子节点
    body.children.push(div);
    body.children.push(p);

    console.dir(html);

    // 在运行的时候，浏览器内部维护了一颗DOM树
    // 1 深刻理解DOM
    // 2 了解节点相关的属性  nodeName  nodeType  nodeValue
    // 3 了解节点的层次结构
  </script>
</body>
</html>