/*
一、文档对象模型Document Object Model
DOM（Document Object Model，文档对象模型）是一个通过和JavaScript进行内容交互的API
*/
/*
注意事项
1. window对象作为全局对象
a. 所有全局属性、方法都存放在window下
2. DOM带有层级效果
a. Element: 表示一个元素
b. Text： 所有文本相关元素
c. Document: 整个文档
*/
/*
二、Web上的JavaScript
*/
// 1. Script元素
//<script type="text/javascript">
// <![CDATA[ --用来告诉支持XHTML的浏览器
// ]]>
//</script>
// 2. Defer属性 --defer属性告诉浏览器加载完HTML文档以后再执行JS代码，但这个属性只能在IE下使用。
// 3. 连接外部脚 ---<script type="text/javascript" src="my-script.js"></script>
// 4. JavaScript必备 --JavaScript有几种数据类型：Number, String, Boolean, Object, Undefined and Null。
// 5. Number --JavaScript里所有的Number都是浮点型
// 注：使用var类声明变量
var leftSide = 100;
var topSide = 50;
var areaOfRectangle = leftSide * topSide; // = 5000
// 6. String
// 7. Boolean -- ===也是比较操作符，不仅比较数值，还比较类型
// 8. Function
(function () {
// 这里自调用函数
})();
// 9. Array
// 2种方式声明数组
// 字面量:
var fruit = ['apple', 'lemon', 'banana'];
// Array构造函数:
var fruit = new Array('apple', 'lemon', 'banana');
fruit[0]; // 访问第1个项(apple)
// 10. Object --一个对象是一个key-value的集合
// 2种类型定义Object对象
// 字面量（大括号）
var profile = { name: 'Bob', age: 99, job: 'Freelance Hitman' };
// 使用Object构造函数
var profile = new Object();
profile.name = 'Bob';
profile.age = 99;
profile.job = 'Freelance Hitman';
// 11. IF/Else语句
// 12. JavaScript操作符
// 13. Loop循环
/*
三、DOM正文
*/
// 1. 访问DOM节点
var introParagraph = document.getElementById('intro'); // 现在有了该DOM节点，这个DOM节点展示的是该信息段落
var allUnorderedLists = document.getElementsByTagName('ul'); // 'getElementsByTagName'返回的是一个节点集合// - 和数组有点相似
// 2. getElementsByTagName
// 访问无序列表: [0]索引
var unorderedList = document.getElementsByTagName('ul')[0];
// 获取所有的li集合:
var allListItems = unorderedList.getElementsByTagName('li');
// 循环遍历
for (var i = 0, length = allListItems.length; i < length; i++) {
// 弹出该节点的text内容
alert(allListItems[i].firstChild.data);
}
// 3. DOM穿梭 --DOM查找节点
/*
1.Node.childNodes: 访问一个单元素下所有的直接子节点元素，可以是一个可循环的类数组对象。该节点集合可以保护不同的类型的子节点（比如text节点或其他元素节点）。
2.Node.firstChild: 与‘childNodes’数组的第一个项(‘Element.childNodes[0]‘)是同样的效果，仅仅是快捷方式。
3.Node.lastChild: 与‘childNodes’数组的最后一个项(‘Element.childNodes[Element.childNodes.length-1]‘)是同样的效果，仅仅是快捷方式。shortcut.
4.Node.parentNode: 访问当前节点的父节点，父节点只能有一个，祖节点可以用‘Node.parentNode.parentNode’的形式来访问。
5.Node.nextSibling: 访问DOM树上与当前节点同级别的下一个节点。
6.Node.previousSibling: 访问DOM树上与当前节点同级别的上一个节点。
*/
/*
四、操作元素
*/
document.getElementById('intro').style.paddingTop = '10em'; //如果带有-的话，就需要去除padding-top ==> paddingTop
document.getElementById('intro').style["paddingTop"] // 使用[]来访问属性
// Node节点 --创建元素可以通过createElement方法，而创建text节点可以使用createTextNode
// 添加内容
var myIntro = document.getElementById('intro');
var someText = 'This is the text I want to add';
var textNode = document.createTextNode(someText);
myIntro.appendChild(textNode);
/*
五、Event事件
*/
// 1. 鼠标事件
/*
1. ‘mousedown’ – 鼠标设备按下一个元素的时候触发mousedown事件。
2. ‘mouseup’ – 鼠标设备从按下的元素上弹起的时候触发mouseup事件。
3. ‘click’ – 鼠标点击元素的时候触发click事件。
4. ‘dblclick’ – 鼠标双击元素的时候触发dblclick事件。
5.‘mouseover’ – 鼠标移动到某元素上的时候触发mouseover事件。
6. ‘mouseout’ – 鼠标从某元素离开的时候触发mouseout事件。
7. ‘mousemove’ – 鼠标在某元素上移动但未离开的时候触发mousemove事件。
*/
// 2. 键盘事件
/*
1.‘keypress’ – 按键按下的时候触发该事件。
2.‘keydown’ – 按键按下的时候触发该事件，并且在keypress事件之前。
3.‘keyup’ – 按键松开的时候触发该事件，在keydown和keypress事件之后。
*/
// 3. 表单事件
/*
1.‘select’ – 文本字段（input, textarea等）的文本被选择的时候触发该事件。
2.‘change’ – 控件失去input焦点的时候触发该事件（或者值被改变的时候）。
3.‘submit’ – 表单提交的时候触发该事件。
4.‘reset’ – 表单重置的时候触发该事件。
5.‘focus’ – 元素获得焦点的时候触发该事件，通常来自鼠标设备或Tab导航。
6.‘blur’ – 元素失去焦点的时候触发该事件，通常来自鼠标设备或Tab导航。
*/
// 4. 其它事件
/*
1.‘load’ – 页面加载完毕（包括内容、图片、frame、object）的时候触发该事件。
2.‘resize’ – 页面大小改变的时候触发该事件（例如浏览器缩放）。
3.‘scroll’ – 页面滚动的时候触发该事件。
4.‘unload’ – 从页面或frame删除所有内容的时候触发该事件（例如离开一个页面）。
*/
// 5. 事件处理
// <button onclick="return buttonClick()">Click me!</button> --这些处理函数都封装在单独的js文件
// 1. 基本事件注册
// <button id="my-button">Click me!</button>
// JavaScript:
var myElement = document.getElementById('my-button');
// 事件处理句柄:
function buttonClick() { alert('You just clicked the button!'); }
// 注册事件
myElement.onclick = buttonClick; //在事件名称前面添加前缀on作为DOM的属性就可以使用
// 2. 高级事件注册
function myEventHandler() { this.style.display = 'none'; }
// 正常工作，this是代表该元素
myIntro.onclick = myEventHandler;
// 正常工作，this是代表该元素
myIntro.addEventListener('click', myEventHandler, false); //绑定多个处理函数到一个事件上
/*
六、Event对象
*/
function myEventHandler(e) {
e = e || window.event; // 兼容IE的代码
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //取消默认的行为
} else {
e.returnValue = false; //取消默认的行为
//例如，当你点击一个连接的时候，默认行为是导航到href里定义的地址，但有时候你想禁用这个默认行为
}
}
// 事件冒泡 --事件在一个目标元素上触发的时候，该事件将触发一一触发祖先节点元素，直到最顶层的元素：
// 阻止冒泡
function myParagraphEventHandler(e) {
e = e || window.event;
// 停止向上冒泡
if (e.stopPropagation) {
// W3C实现
e.stopPropagation();
} else {
// IE实现
e.cancelBubble = true;
}
}
// 使用我们自定义的addEvent函数将myParagraphEventHandler绑定到click事件上：
addEvent(document.getElementsByTagName('p')[0], 'click', myParagraphEventHandler);
// 事件委托 --将事件绑定在容器元素上，然后通过判断点击的target子元素的类型来触发相应的事件。
// 如大表格，在每个<tr>上绑定点击事件，性能是个大问题
//
var myTable = document.getElementById('my-table');
myTable.onclick = function () {
// 处理浏览器兼容
e = e || window.event;
var targetNode = e.target || e.srcElement;
// 测试如果点击的是TR就触发
if (targetNode.nodeName.toLowerCase() === 'tr') {
alert('You clicked a table row!');
}
}
//依赖于事件冒泡,如果事件冒泡到table之前被禁用的话，那上面的代码就无法工作
