api.js源码阅读学习笔记

最新推荐文章于 2025-05-21 23:32:05 发布

原创最新推荐文章于 2025-05-21 23:32:05 发布 · 3.5k 阅读

CC 4.0 BY-SA版权

本文是关于API.js的学习笔记，主要探讨了nodeType属性的详细解释，包括不同节点类型的值及其对应的意义。此外，还介绍了JSON.stringify()和JSON.parse()方法的作用和用法。接着，文章讨论了querySelector与querySelectorAll的区别，以及DOM操作如previousSibling、isEqualNode、parentNode等。最后，提到了setAttribute和getAttribute方法以及HTML DOM节点的相关知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//api.js源码
/*
 * APICloud JavaScript Library
 * Copyright (c) 2014 apicloud.com
 */
(function(window){
    var u = {};
    var isAndroid = (/android/gi).test(navigator.appVersion);
    var uzStorage = function(){
        var ls = window.localStorage;
        if(isAndroid){
           ls = os.localStorage();
        }
        return ls;
    };
    function parseArguments(url, data, fnSuc, dataType) {
        if (typeof(data) == 'function') {
            dataType = fnSuc;
            fnSuc = data;
            data = undefined;
        }
        if (typeof(fnSuc) != 'function') {
            dataType = fnSuc;
            fnSuc = undefined;
        }
        return {
            url: url,
            data: data,
            fnSuc: fnSuc,
            dataType: dataType
        };
    }
    u.trim = function(str){
        if(String.prototype.trim){
            return str == null ? "" : String.prototype.trim.call(str);
        }else{
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }
    };
    u.trimAll = function(str){
        return str.replace(/\s*/g,'');
    };
    u.isElement = function(obj){
        return !!(obj && obj.nodeType == 1);
    };
    u.isArray = function(obj){
        if(Array.isArray){
            return Array.isArray(obj);
        }else{
            return obj instanceof Array;
        }
    };
    u.isEmptyObject = function(obj){
        if(JSON.stringify(obj) === '{}'){
            return true;
        }
        return false;
    };
    u.addEvt = function(el, name, fn, useCapture){
        if(!u.isElement(el)){
            console.warn('$api.addEvt Function need el param, el param must be DOM Element');
            return;
        }
        useCapture = useCapture || false;
        if(el.addEventListener) {
            el.addEventListener(name, fn, useCapture);
        }
    };
    u.rmEvt = function(el, name, fn, useCapture){
        if(!u.isElement(el)){
            console.warn('$api.rmEvt Function need el param, el param must be DOM Element');
            return;
        }
        useCapture = useCapture || false;
        if (el.removeEventListener) {
            el.removeEventListener(name, fn, useCapture);
        }
    };
    u.one = function(el, name, fn, useCapture){
        if(!u.isElement(el)){
            console.warn('$api.one Function need el param, el param must be DOM Element');
            return;
        }
        useCapture = useCapture || false;
        var that = this;
        var cb = function(){
            fn && fn();
            that.rmEvt(el, name, cb, useCapture);
        };
        that.addEvt(el, name, cb, useCapture);
    };
    u.dom = function(el, selector){
        if(arguments.length === 1 && typeof arguments[0] == 'string'){
            if(document.querySelector){
                return document.querySelector(arguments[0]);
            }
        }else if(arguments.length === 2){
            if(el.querySelector){
                return el.querySelector(selector);
            }
        }
    };
    u.domAll = function(el, selector){
        if(arguments.length === 1 && typeof arguments[0] == 'string'){
            if(document.querySelectorAll){
                return document.querySelectorAll(arguments[0]);
            }
        }else if(arguments.length === 2){
            if(el.querySelectorAll){
                return el.querySelectorAll(selector);
            }
        }
    };
    u.byId = function(id){
        return document.getElementById(id);
    };
    u.first = function(el, selector){
        if(arguments.length === 1){
            if(!u.isElement(el)){
                console.warn('$api.first Function need el param, el param must be DOM Element');
                return;
            }
            return el.children[0];
        }
        if(arguments.length === 2){
            return this.dom(el, selector+':first-child');
        }
    };
    u.last = function(el, selector){
        if(arguments.length === 1){
            if(!u.isElement(el)){
                console.warn('$api.last Function need el param, el param must be DOM Element');
                return;
            }
            var children = el.children;
            return children[children.length - 1];
        }
        if(arguments.length === 2){
            return this.dom(el, selector+':last-child');
        }
    };
    u.eq = function(el, index){
        return this.dom(el, ':nth-child('+ index +')');
    };
    u.not = function(el, selector){
        return this.domAll(el, ':not('+ selector +')');
    };
    u.prev = function(el){
        if(!u.isElement(el)){
            console.warn('$api.prev Function need el param, el param must be DOM Element');
            return;
        }
        var node = el.previousSibling;
        if(node.nodeType && node.nodeType === 3){
            node = node.previousSibling;
            return node;
        }
    };
    u.next = function(el){
        if(!u.isElement(el)){
            console.warn('$api.next Function need el param, el param must be DOM Element');
            return;
        }
        var node = el.nextSibling;
        if(node.nodeType && node.nodeType === 3){
            node = node.nextSibling;
            return node;
        }
    };
    u.closest = function(el, selector){
        if(!u.isElement(el)){
            console.warn('$api.closest Function need el param, el param must be DOM Element');
            return;
        }
        var doms, targetDom;
        var isSame = function(doms, el){
            var i = 0, len = doms.length;
            for(i; i<len; i++){
                if(doms[i].isEqualNode(el)){
                    return doms[i];
                }
            }
            return false;
        };
        var traversal = function(el, selector){
            doms = u.domAll(el.parentNode, selector);
            targetDom = isSame(doms, el);
            while(!targetDom){
                el = el.parentNode;
                if(el != null && el.nodeType == el.DOCUMENT_NODE){
                    return false;
                }
                traversal(el, selector);
            }


            return targetDom;
        };


        return traversal(el, selector);
    };
    u.contains = function(parent,el){
        var mark = false;
        if(el === parent){
            mark = true;
            return mark;
        }else{
            do{
                el = el.parentNode;
                if(el === parent){
                    mark = true;
                    return mark;
                }
            }while(el === document.body || el === document.documentElement);


            return mark;
        }
        
    };
    u.remove = function(el){
        if(el && el.parentNode){
            el.parentNode.removeChild(el);
        }
    };
    u.attr = function(el, name, value){
        if(!u.isElement(el)){
            console.warn('$api.attr Function need el param, el param must be DOM Element');
            return;
        }
        if(arguments.length == 2){
            return el.getAttribute(name);
        }else if(arguments.length == 3){
            el.setAttribute(name, value);
            return el;
        }
    };
    u.removeAttr = function(el, name){
        if(!u.isElement(el)){
            console.warn('$api.removeAttr Function need el param, el param must be DOM Element');
            return;
        }
        if(arguments.length === 2){
            el.removeAttribute(name);
        }
    };
    u.hasCls = function(el, cls){
        if(!u.isElement(el)){
            console.warn('$api.hasCls Function need el param, el param must be DOM Element');
            return;
        }
        if(el.className.indexOf(cls) > -1){
            return true;
        }else{
            return false;
        }
    };
    u.addCls = function(el, cls){
        if(!u.isElement(el)){
            console.warn('$api.addCls Function need el param, el param must be DOM Element');
            return;
        }
        if('classList' in el){
            el.classList.add(cls);
        }else{
            var preCls = el.className;
            var newCls = preCls +' '+ cls;
            el.className = newCls;
        }
        return el;
    };
    u.removeCls = function(el, cls){
        if(!u.isElement(el)){
            console.warn('$api.removeCls Function need el param, el param must be DOM Element');
            return;
        }
        if('classList' in el){
            el.classList.remove(cls);
        }else{
            var preCls = el.className;
            var newCls = preCls.replace(cls, '');
            el.className = newCls;
        }
        return el;
    };
    u.toggleCls = function(el, cls){
        if(!u.isElement(el)){
            console.warn('$api.toggleCls Function need el param, el param must be DOM Element');
            return;
        }
       if('classList' in el){
            el.classList.toggle(cls);
        }else{
            if(u.hasCls(el, cls)){
                u.removeCls(el, cls);
            }else{
                u.addCls(el, cls);
            }
        }
        return el;
    };
    u.val = function(el, val){
        if(!u.isElement(el)){
            console.warn('$api.val Function need el param, el param must be DOM Element');
            return;
        }
        if(arguments.length === 1){
            switch(el.tagName){
                case 'SELECT':
                    var value = el.options[el.selectedIndex].value;
                    return value;
                    break;
                case 'INPUT':
                    return el.value;
                    break;
                case 'TEXTAREA':
                    return el.value;
                    break;
            }
        }
        if(arguments.length === 2){
            switch(el.tagName){
                case 'SELECT':
                    el.options[el.selectedIndex].value = val;
                    return el;
                    break;
                case 'INPUT':
                    el.value = val;
                    return el;
                    break;
                case 'TEXTAREA':
                    el.value = val;
                    return el;
                    break;
            }
        }
        
    };
    u.prepend = function(el, html){
        if(!u.isElement(el)){
            console.warn('$api.prepend Function need el param, el param must be DOM Element');
            return;
        }
        el.insertAdjacentHTML('afterbegin', html);
        return el;
    };
    u.append = function(el, html){
        if(!u.isElement(el)){
            console.warn('$api.append Function need el param, el param must be DOM Element');
            return;
        }
        el.insertAdjacentHTML('beforeend', html);
        return el;
    };
    u.before = function(el, html){
        if(!u.isElement(el)){
            console.warn('$api.before Function need el param, el param must be DOM Element');
            return;
        }
        el.insertAdjacentHTML('beforebegin', html);
        return el;
    };
    u.after = function(el, html){
        if(!u.isElement(el)){
            console.warn('$api.after Function need el param, el param must be DOM Element');
            return;
        }
        el.insertAdjacentHTML('afterend', html);
        return el;
    };
    u.html = function(el, html){
        if(!u.isElement(el)){
            console.warn('$api.html Function need el param, el param must be DOM Element');
            return;
        }
        if(arguments.length === 1){
            return el.innerHTML;
        }else if(arguments.length === 2){
            el.innerHTML = html;
            return el;
        }
    };
    u.text = function(el, txt){
        if(!u.isElement(el)){
            console.warn('$api.text Function need el param, el param must be DOM Element');
            return;
        }
        if(arguments.length === 1){
            return el.textContent;
        }else if(arguments.length === 2){
            el.textContent = txt;
            return el;
        }
    };
    u.offset = function(el){
        if(!u.isElement(el)){
            console.warn('$api.offset Function need el param, el param must be DOM Element');
            return;
        }
        var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
        var st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);


        var rect = el.getBoundingClientRect();
        return {
            l: rect.left + sl,
            t: rect.top + st,
            w: el.offsetWidth,
            h: el.offsetHeight
        };
    };
    u.css = function(el, css){
        if(!u.isElement(el)){
            console.warn('$api.css Function need el param, el param must be DOM Element');
            return;
        }
        if(typeof css == 'string' && css.indexOf(':') > 0){
            el.style && (el.style.cssText += ';' + css);
        }
    };
    u.cssVal = function(el, prop){
        if(!u.isElement(el)){
            console.warn('$api.cssVal Function need el param, el param must be DOM Element');
            return;
        }
        if(arguments.length === 2){
            var computedStyle = window.getComputedStyle(el, null);
            return computedStyle.getPropertyValue(prop);
        }
    };
    u.jsonToStr = function(json){
        if(typeof json === 'object'){
            return JSON && JSON.stringify(json);
        }
    };
    u.strToJson = function(str){
        if(typeof str === 'string'){
            return JSON && JSON.parse(str);
        }
    };
    u.setStorage = function(key, value){
        if(arguments.length === 2){
            var v = value;
            if(typeof v == 'object'){
                v = JSON.stringify(v);
                v = 'obj-'+ v;
            }else{
                v = 'str-'+ v;
            }
            var ls = uzStorage();
            if(ls){
                ls.setItem(key, v);
            }
        }
    };
    u.getStorage = function(key){
        var ls = uzStorage();
        if(ls){
            var v = ls.getItem(key);
            if(!v){return;}
            if(v.indexOf('obj-') === 0){
                v = v.slice(4);
                return JSON.parse(v);
            }else if(v.indexOf('str-') === 0){
                return v.slice(4);
            }
        }
    };
    u.rmStorage = function(key){
        var ls = uzStorage();
        if(ls && key){
            ls.removeItem(key);
        }
    };
    u.clearStorage = function(){
        var ls = uzStorage();
        if(ls){
            ls.clear();
        }
    };


   
    /*by king*/
    u.fixIos7Bar = function(el){
        if(!u.isElement(el)){
            console.warn('$api.fixIos7Bar Function need el param, el param must be DOM Element');
            return;
        }
        var strDM = api.systemType;
        if (strDM == 'ios') {
            var strSV = api.systemVersion;
            var numSV = parseInt(strSV,10);
            var fullScreen = api.fullScreen;
            var iOS7StatusBarAppearance = api.iOS7StatusBarAppearance;
            if (numSV >= 7 && !fullScreen && iOS7StatusBarAppearance) {
                el.style.paddingTop = '20px';
            }
        }
    };
    u.fixStatusBar = function(el){
        if(!u.isElement(el)){
            console.warn('$api.fixStatusBar Function need el param, el param must be DOM Element');
            return;
        }
        var sysType = api.systemType;
        if(sysType == 'ios'){
            u.fixIos7Bar(el);
        }else if(sysType == 'android'){
            var ver = api.systemVersion;
            ver = parseFloat(ver);
            if(ver >= 4.4){
                el.style.paddingTop = '25px';
            }
        }
    };
    u.toast = function(title, text, time){
        var opts = {};
        var show = function(opts, time){
            api.showProgress(opts);
            setTimeout(function(){
                api.hideProgress();
            },time);
        };
        if(arguments.length === 1){
            var time = time || 500;
            if(typeof title === 'number'){
                time = title;
            }else{
                opts.title = title+'';
            }
            show(opts, time);
        }else if(arguments.length === 2){
            var time = time || 500;
            var text = text;
            if(typeof text === "number"){
                var tmp = text;
                time = tmp;
                text = null;
            }
            if(title){
                opts.title = title;
            }
            if(text){
                opts.text = text;
            }
            show(opts, time);
        }
        if(title){
            opts.title = title;
        }
        if(text){
            opts.text = text;
        }
        time = time || 500;
        show(opts, time);
    };
    u.post = function(/*url,data,fnSuc,dataType*/){
        var argsToJson = parseArguments.apply(null, arguments);
        var json = {};
        var fnSuc = argsToJson.fnSuc;
        argsToJson.url && (json.url = argsToJson.url);
        argsToJson.data && (json.data = argsToJson.data);
        if(argsToJson.dataType){
            var type = argsToJson.dataType.toLowerCase();
            if (type == 'text'||type == 'json') {
                json.dataType = type;
            }
        }else{
            json.dataType = 'json';
        }
        json.method = 'post';
        api.ajax(json,
            function(ret,err){
                if (ret) {
                    fnSuc && fnSuc(ret);
                }
            }
        );
    };
    u.get = function(/*url,fnSuc,dataType*/){
        var argsToJson = parseArguments.apply(null, arguments);
        var json = {};
        var fnSuc = argsToJson.fnSuc;
        argsToJson.url && (json.url = argsToJson.url);
        //argsToJson.data && (json.data = argsToJson.data);
        if(argsToJson.dataType){
            var type = argsToJson.dataType.toLowerCase();
            if (type == 'text'||type == 'json') {
                json.dataType = type;
            }
        }else{
            json.dataType = 'text';
        }
        json.method = 'get';
        api.ajax(json,
            function(ret,err){
                if (ret) {
                    fnSuc && fnSuc(ret);
                }
            }
        );
    };


/*end*/
    
    window.$api = u;

})(window);

其中源码中使用到很多少见但很实用的原生javascript属性及方法

1.nodeType

nodeType属性可返回节点的类型

最重要的节点类型是

元素类型节点类型

元素element 1

属性attr 2

文本text 3

注释comments 8

文档document 9

补充：
值-元素类型
1-ELEMENT
2-ATTRIBUTE
3-TEXT
4-CDATA
5-ENTITY REFERENCE
6-ENTITY
7-PI (processing instruction)
8-COMMENT
9-DOCUMENT
10-DOCUMENT TYPE
11-DOCUMENT FRAGMENT
12-NOTATION

由此引申出nodeName nodeValue

nodeName 属性含有某个节点的名称

元素节点的nodeName是标签名称

属性节点的nodeName是属性名称

文本节点的nodeName永远是#text

文档节点的nodeName永远是#document

注释：nodeName所包含的XML元素的标签名称永远是大写

nodeValue

对于文本节点，nodeValue属性包含文本

对于属性节点，nodeValue属性包含属性值

nodeValue属性对于文档节点和元素节点是不可用的

2、JSON.stringify()方法与 JSON.parse()方法

作用：这个函数的作用是为了系列化对象

也就是说把原来对象的类型转换成字符串类型（或者更确切的说是json类型的）。

语法：

JSON.stringify(value [, replacer] [, space])

value:是必须要的字段。就是你输入的对象，比如数组啊，类啊等等。

replacer：这个是可选的。它又分为2种方式，一种是方法，第二种是数组。
情况一：我们先说数据，通过我们后面的实验可以知道，它是和第一个有关系的。一般来说，我们系列化后的结果是通过键值对来进行表示的。
比如说：
name:"lan",age:25
这种形式。
所以，如果这种形式的话，如果第二个的值在第一个存在，那么的话就以第二个的值做key，第一个值为value进行表示，如果不存在，sorry，忽略。【是不是有点抽象，我也这么觉得，不过你等一下看实验就OK了。。呼呼。】
情况二：如果是方法，那很简单，就是说把系列化后的每一个对象（记住是每一个）传进方法里面进行处理。
space：很好理解，用什么来做分隔符的。
1.如果省略的话，那么显示出来的值就没有分隔符。直接输出来
2.如果是一个数字的话，那么它就定义缩进几个字符，当然如果大于10 ，则最大值为10.
3.如果是一些转义字符，比如“\t”，表示回车，那么它每行一个回车。
4.如果仅仅是字符串，OK，就在每行输出值的时候把这些字符串附加上去就OK。当然，最大长度也是10个字符。
开始用实例说明；
1.只有一个参数的情况下：

复制代码代码如下:

var student = new Object(); 

student.name = "Lanny"; 

student.age = "25"; 

student.location = "China"; 

var json = JSON.stringify(student); 

alert(student);

结果如下:

有些人可能会怀疑JSON.stringify的作用，OK。那假如，我们不要这个函数。代码下面的样子：

复制代码代码如下:

var student = new Object(); 

student.name = "Lanny"; 

student.age = "25"; 

student.location = "China"; 

// var json = JSON.stringify(student); 

alert(student);

　恭喜你得到的结果是：

没骗你吧，继续。
2.第二个参数存在，并且第二个参数还是function的时候

复制代码代码如下:

var students = new Array() ; 

students[0] = "Lanny"; 

students[1] = "dong"; 

students[2] = "I love you"; 

var json = JSON.stringify(students,switchUpper); 

function switchUpper(key, value) { 

return value.toString().toUpperCase(); 

} 

alert(json); 

　　　　　　　　//var json = JSON.stringify(students, function (key,value) { 

　　　　　　　　//return value.toString().toUpperCase(); 

　　　　　　　//});

　　　　上面的方法也可以换成下面的，2个都是一样，只是写法有那么一点点的不一样而已。
　得到结果如下：

3.第二个参数存在，并且第二个参数不是function，而是数组的时候。
3.1 【误区】如果第一个参数是数组，第二个参数也是数组的话，只显示第一个参数的值。
比如：

复制代码代码如下:

var students = new Array() ; 

students[0] = "Lanny"; 

students[1] = "dong"; 

students[2] = "I love you"; 

var stu = new Array(); 

stu[0] = "1"; 

stu[1] = "2"; 

var json = JSON.stringify(students,stu); 

alert(json);

　sorry 得到的结果就是：

第二个被忽略了，只是第一个被系列化了。

3.2 如果第一个是对象（这里说的对象就像在C#里面可以进行new的），第二个是数组的。

那么如果第二个的value在第一个存在，那么的话就以第二个的值做key，第一个值为value进行表示

复制代码代码如下:

var student = new Object(); 

student.qq = "5485891512"; 

student.name = "Lanny"; 

student.age = 25; 

var stu = new Array(); 

stu[0] = "qq"; 

stu[1] = "age"; 

stu[2] = "Hi";//这个student对象里不存在。 

var json = JSON.stringify(student,stu); 

alert(json);

　得到的结果如下：

因为stu[2] = "Hi";这个Hi 在第一个找不到，所以就不进行显示了。

4.第三个参数

4.1.如果省略的话，那么显示出来的值就没有分隔符。直接输出来

比如：

复制代码代码如下:

var student = new Object(); 

student.qq = "5485891512"; 

student.name = "Lanny"; 

student.age = 25; 

var stu = new Array(); 

stu[0] = "qq"; 

stu[1] = "age"; 

stu[2] = "Hi"; 

var json = JSON.stringify(student,stu); 

alert(json);

　输出的就是：

4.2.如果是一个数字的话，那么它就定义缩进几个字符，当然如果大于10 ，则最大值为10.

复制代码代码如下:

var student = new Object(); 

student.qq = "5485891512"; 

student.name = "Lanny"; 

student.age = 25; 

var stu = new Array(); 

stu[0] = "qq"; 

stu[1] = "age"; 

stu[2] = "Hi"; 

var json = JSON.stringify(student,stu,100);//注意这里的100 

alert(json);

那么得到的是：

空开来了10个字符。

4.3.如果是一些转义字符，比如“\t”，表示回车，那么它每行一个回车。

也是一样。

4.4.如果仅仅是字符串，OK，就在每行输出值的时候把这些字符串附加上去就OK。当然，最大长度也是10个字符。

如果是var json = JSON.stringify(student,stu,“HaiKou”);//

3、querySelector

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

实例：

获取文档中 class="example" 的第一个 <p> 元素:

docment.querySelector("p.example");

获取文档中class='example' 的第一个元素；

document.querySelector('.example');

获取文档中有“target”属性的第一个<a>元素：

document.querySelector('a[target]');

以下实例演示了多个选择器的使用方法。

假定你选择了两个选择器: <h2> 和 <h3> 元素。

以下代码将为文档的第一个 <h2> 元素添加背景颜色：

<h2>A h2 element</h2>

<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

但是，如果文档中 <h3> 元素位于 <h2> 元素之前，<h3> 元素将会被设置指定的背景颜色。

<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2, h3").style.backgroundColor = "red";

querySelectorAll：return a NodeList containing all of the matching Element nodes within the node’s subtrees, in document order. If there are no such nodes, the method must return an empty NodeList. （按文档顺序返回指定元素节点的子树中匹配选择器的元素集合，如果没有匹配返回空集合）

从定义可以看到Document和Element都实现了NodeSelector接口。即这三种类型的元素都拥有这两个方法。querySelector和querySelectorAll的参数是CSS选择器字符串。区别在于querySelector返回的是一个第一个匹配元素，querySelectorAll返回的一个所有匹配元素集合(NodeList)。

在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。

document.querySelector("div.test>p:first-child");

document.querySelectorAll("div.test>p:first-child")[0];

document.querySelector("div.test>p:first-child");

这是原生方法，比起jquery速度快，缺点是IE6、7不支持。

4、previousSibling属性

定义和用法

previousSibling 属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点）。

如果不存在这样的节点，则该属性返回 null。

注释：Internet Explorer 会忽略节点之间生成的空白文本节点

（比如换行字符），而 Mozilla 不这么做。

nextSibling属性

5、isEqualNode（）

定义和用法

isEqualNode() 方法检查两个节点是否相等。

如果下例条件为 true，则两个节点相等：

节点类型相同
拥有相同的 nodeName、NodeValue、localName、nameSpaceURI 以及前缀
所有后代均为相同的子节点
拥有相同的属性和属性值（属性次序不必一致）

提示：请使用 isSameNode() 方法来检测两节点是否是相同节点。

6、parentNode属性

parentNode 属性以 Node 对象的形式返回指定节点的父节点。

如果指定节点没有父节点，则返回 null。

7、removeChild()方法

removechild 函数可以删除父元素的指定子元素。

如果此函数删除子节点成功，则返回被删除的节点，否则返回null。

语法结构:

fatherObj.removeChild(childrenObj)

参数解释:

1.fatherObj:要删除子元素的元素对象。
2.childrenObj:要被删除的子元素对象。

特别说明:

在火狐、谷歌和IE8以上浏览器中，空白也算是一个文本节点，但是在IE8和IE8以下浏览器中会忽略空白文本节点，具体可以参阅javascript如何获取元素的子节点和父节点一章节。

8、getAttribute() 与 setAttribute()方法

setAttribute() 方法添加指定的属性，并为其赋指定的值。

如果这个指定的属性已存在，则仅设置/更改值。

所有主流浏览器均支持 setAttribute() 方法。

注释：Internet Explorer 8 以及更早的版本不支持此方法。

设置 input 元素的 type 属性：

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

getAttribute() 方法返回指定属性名的属性值。

提示：如果您希望以 Attr 对象返回属性，请使用 getAttributeNode。

HTML DOM 节点

在 HTML DOM（文档对象模型）中，每个部分都是节点：

文档本身是文档节点

所有的HTML元素是元素节点

所有的HTML属性是属性节点

HTML 元素内的文本是文本节点

注释是注释节点

Attr对象

在HTML DOM中，attr对象表示HTML属性

HTML属性始终属于HTML元素

9、classList属性与className属性

add(class1, class2, ...)	在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加 /td>
contains(class)	返回布尔值，判断指定的类名是否存在。可能值： true - 元素包已经包含了该类名 false - 元素中不存在该类名
item(index)	返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove(class1, class2, ...)	移除元素中一个或多个类名。注意：移除不存在的类名，不会报错。
toggle(class, true\|false)	在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：移除一个 class: element.classList.toggle("classToRemove", false); 添加一个 class: element.classList.toggle("classToAdd", true); 注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

classList.add()

classList.remove()

classList.toggle()

className.indexOf()

10、selectedIndex属性

selectedIndex属性可设置或返回下拉列表中被选选项的索引号

注释：若允许多重选择，则仅会返回第一个被选选项的索引号

11、insertAdjacentHTML（）与 insertAdjcentText()

其调用方式为elem.insertAdjacentHTML( position, htmlStr )

elem 向哪个DOM的标签出插入字符串

position 有四个选项 "beforeBegin" "afterEnd" "afterBegin" "beforeEnd"分别指在elem的开始标签之前、结束标签之后、开始标签之后、结束标签之前插入htmlStr

12、innerHTML 与 textContent

13、window.getComputedStyle()

window.getComputedStyle().getPropertyValue()

我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。

对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。

add(class1, class2, ...)	在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加 /td>
contains(class)	返回布尔值，判断指定的类名是否存在。可能值： true - 元素包已经包含了该类名 false - 元素中不存在该类名
item(index)	返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove(class1, class2, ...)	移除元素中一个或多个类名。注意：移除不存在的类名，不会报错。
toggle(class, true\|false)	在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：移除一个 class: element.classList.toggle("classToRemove", false); 添加一个 class: element.classList.toggle("classToAdd", true); 注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。