dom封装函数

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

文件对象模型（DocumentObjectModel，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。DocumentObjectModel的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，计有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、DOM是什么？

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。
通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）

二、使用步骤

1.要点

    id          document.getElementById()
    tagName     node.getElementsByTagName()
    name        document.getElementsByName()  返回数组
    className   document.getElementsByClassName() 返回数组
*/
/* 
    通过封装函数  简化上述的操作
    封装一个函数,可以拥有上述几种获取元素节点的功能
    [注]css选择器
        #id   
        .class
        tagName
        name=xxx
 */

2.封装函数

`function $(vArg) {
        //通过获取css选择器第一位符号判断
         switch (vArg[0]) {
            case "#":
                return document.getElementById(vArg.substring(1));
                 break;
            case ".":
                return elementByClassName(document,vArg.substring(1))
                 break;
            default:
            //对参数前五个字符进行判断
                var str =vArg.substring(0,5);
                if (str == "name=") {
                    return document.getElementsByName(vArg.substring(5))
                } else {//tagName
                    return document.getElementsByTagName(vArg)
                }
                 break;
         }
     }
     function elementByClassName(parent,classStr) {
         var nodes = parent.getElementsByTagName('*');
         var result = [];
         for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].className == classStr) {
                result.push(nodes[i]);
            } 
         }
         return result;
     }`

2.使用方法

alert($("#div1").innerHTML)
alert($(".box")[0].innerHTML)
alert($("name=hello")[0].innerHTML)

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了dom封装函数的使用, 反复使用的可以举一反三写封装函数