学习笔记--原生JS

关于事件

document.getElementById("navList").addEventListener("click",function(e) {

            if(e.target && e.target.nodeName.toUpperCase() == "LI") {
                console.log("List item ",e.target," was clicked!");
                e.target.setAttribute("class","red");
                console.log(e.target.getAttribute("data-target"));
            }else{
                console.log(e.target.nodeName.toUpperCase());
            }
        });  

e 是事件对象
e.target 是此事件的目标对象，相当于document.getElementById() 得到的对象，可以用.setAttribute .getAttribute 之类的方法。

改变元素属性

.setAttribute("class", "value")
第一个参数是属性名，如“data-id”“class”“href”等等

Element与Node的区别

原文

Node(节点)是DOM层次结构中的任何类型的对象的通用名称，Node有很多类型，如元素节点，属性节点，文本节点，注释节点等，通过NodeType区分，常见的有：

节点类型	NodeType
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

node的概念以较大，element是一种node。

click事件

 function fire(id){
        var evt = window.event?window.event:fire.caller.arguments[0];//获取event对象
        var o= document.getElementById(id);
        if(o.fireEvent){//IE
            o.fireEvent("onclick",evt);//IE下可以直接使用fireEvent方法触发事件
        }else{//other browsers
            //创建一个对象
            var event = document.createEvent("MouseEvents");

            //设置event对象属性
            event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);

            //触发事件
            o.dispatchEvent(event);
        }
    }

本地存储

localStorage.lastname="Smith";