javascript与DOM -- 深入理解javascript

/*
    一、文档对象模型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之前被禁用的话，那上面的代码就无法工作