一,js对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数等,而且JavaScript 允许自定义对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等,对象只是带有属性和方法的特殊数据类型。
Array 对象
Array 对象用于在变量中存储多个值:var cars = ["Saab", "Volvo", "BMW"];
Boolean 对象
Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false)
Date 对象
Date 对象用于处理日期与实际。创建 Date 对象: new Date().
以上四种方法同样可以创建 Date 对象:
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
Math 对象
Math 对象用于执行数学任务,Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
Number 对象
Number 对象是原始数值的包装对象,Number 创建方式 new Number()。
String 对象
String 对象用于处理文本(字符串),String 对象创建方法: new String().
RegExp 对象
正则表达式是描述字符模式的对象,正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。
二,浏览器对象
浏览器进行页面渲染,负责把网页内容(html,xml等)和消息(css)取出和整理,而javascript引擎执行js代码,js引擎会影响页面整体速度。
目前国内主流浏览器如下:
浏览器 | 内核 | javascript引擎 |
IE | Trident | 对W3C标准支持差,IE10开始支持ES6标准 |
chrome | 基于Webkit内核 | 支持ES6,内置V8,保持自升级 |
Safari | 基于Webkit内核 | 支持ES6 |
Firefox | Gecko内核 | OdinMonkey |
移动设备iOS和Android,Apple的Safari和Google的Chrome | 基于Webkit内核 | 支持ES6 |
不同浏览器对javascript支持有差异,如Aajax,file接口api等,在写js时需要考虑浏览器兼容
js可以获取浏览器对象,包括windows、screen、location、document、history、navigator,对对象的属性和方法进行访问和设置,具体说明如下:
对象名 | 说明 | 示例 |
windows | 表示浏览器中打开的窗口,浏览器为 HTML 文档创建一个 window 对象,并为每个框架(<frame> 或 <iframe> 标签)创建一个额外的 window 对象 | alert(window.location); |
screen | 客户端显示屏幕的信息 | alert(screen.width); |
location | 有关当前 URL 的信息,是 window 对象的一部分 | location.reload(); |
document | 表示当前页面,是 Window 对象的一部分 | document.title = 'test'; |
history | 包含浏览器窗口中访问过的 URL,是 window 对象的一部分 | history.back(); |
navigator | 包含有关浏览器的信息,浏览器名称版本等 | alert(navigator.appName); |
三,dom对象
dom全称文档对象模型,是基于浏览器编程的一套API接口,W3C出台的推荐标准,当浏览器载入html后,会解析成一个dom树,js可以对dom节点进行增删改查操作,动态修改浏览器页面内容。
document 对象是HTML文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)。
1,dom树
如下html内容:
<html>
<head>
<meta charset="UTF-8">
<title>never-online'swebsite</title>
</head>
<body>
<div>tutorialofDHTMLandjavascriptprogramming</div>
</body>
</html>
解析后的dom树为:
2,操作dom树
DOM是一个树形结构,操作一个DOM节点首先需要获取到一个节点,然后进行增(节点下新增一个子节点)、删(从html删除该节点)、改(更新该节点的html内容)、查(遍历或定位该子节点)。
获取一个节点,可以通过id、class、tab名,如:
document.getElementById():根据id获取,id唯一,所以获取到唯一的一个DOM节点
document.getElementsByTagName():根据tab获取,返回一组DOM节点。要精确地选择DOM,可以先定位父节点,再从父节点开始选择,以缩小范围
document.getElementsByClassName():根据class获取,同上