在JavaScript中可以通过BOM查询html文档中的元素，也就是所谓的在html中获取对象然后对它添加一个函数。

常用的方法有以下几种：

①document.getElementById()    通过元素ID在全局查找元素

②document.getElementsByTagName（）    通过元素标签名字在全局查找元素

    element.getElementsByTagName（）    通过元素标签在指定元素内部查找元素

③document.getElementsByClassName（）    通过元素标签的className在全局查找元素

    element.getElementsByClassName（）    通过元素标签的className在指定元素内部查找元素

但是很多实际情况下，用这三种方法不是很方便，很多时候需要多次调用，就晓得有点麻烦，代码量也有点大，所以这个时候我们就需要将查询函数封装成一个函数。这里我们可以参照css包含选择器的特性，给函数传递一串字符串。比如如下所示：

html结构：

传递的参数如下：

 var atrr = $(".box .box1 .div1 span");

然后就是封装函数了。

首先我们需要获取最外层的一个html标签，然后再在这个标签内部去查找我们需要的元素。

var result = document.getElementsByTagName("html");

上面的代码中我们获取了html中最外层的标签<html>标签

然后将接收到的字符串按照空格分隔为一个数组，数组的每个元素为一个className、ID或者标签名。然后接下来就是遍历了。

    当数组元素为className时，我们就需要调用element.getElementsByClassName（） 来获取元素

    当数组元素为标签名时，我们就需要调用element.getElementsByTagName（） 来获取元素

    当数组元素为ID时，我们就需要调用document.getElementById()  来获取元素

最后当遍历完成的时候，我们也就查找到了我们需要的内容。代码如下：

function $(selector){

    var strs = selector.split(" ");//通过空格切割传递的字符串

    var result = document.getElementsByTagName("html");//获取最外层的dom元素

    for(var i = 0,len = strs.length;i<len;i++){//根据传过来的字符串，一层一层的遍历查找dom

        if(strs[i].charAt(0)==="#"){//如果是id，返回的是dom元素

            result = document.getElementById(strs[i].slice(1));

        }else if(strs[i].charAt(0)==="."){//如果是class，则返回的是一个伪数组（集合），需要加一个下标，才能获得dom

            result = byClass(strs[i].slice(1),result[0]);

        }else{//如果是tagName

            if(i===0)//代表传递的字符串只有一个tagName，

                result = result[0].getElementsByTagName(strs[i]);

            else

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118567825

JavaScript中DOM查询封装函数的更多相关文章

  1. [转]Javascript中的自执行函数表达式

    [转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...

  2. 深入理解javascript中的立即执行函数(function(){…})()

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

  3. 使用Ajax在javascript中调用后台C#函数

    使用Ajax在javascript中调用后台C#函数 最近一段时间在紧跟一个网站的项目,数据库中用户表的UserName要求是唯一的,所以当用户选定一个用户名进行注册时要首先检查该用户名是否已被占用, ...

  4. 在javascript中关于变量与函数的提升

    在javascript中关于变量与函数的提升 一.简介 在javascript中声明变量与函数的执行步骤: 1.先预解析变量或函数声明代码,会把用var声明的变量或者函数声明的代码块进行提升操作 2. ...

  5. javascript中的立即执行函数(function(){…})()

    javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包 ...

  6. 深入理解javascript中的立即执行函数

    这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见,需要的朋友可以 ...

  7. JavaScript中的内置函数

    JavaScript中的内置函数 制作人:全心全意 在使用JavaScript语言时,除了可以自定义函数之外,还可以使用JavaScript的内置函数,这些内置函数是由JavaScript语言自身提供 ...

  8. JavaScript 中对变量和函数声明提前的演示样例

    如题所看到的,看以下的演示样例(能够使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发人员工具,进入控制台console输入)(使用技巧: 控制台输入时Shift+Enter能够中途代码 ...

  9. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

随机推荐

  1. （2020行人再识别综述）Person Re-Identification using Deep Learning Networks: A Systematic Review

    目录 1.引言 2.研究方法 2.1本次综述的贡献 2.2综述方法 2.3与现有综述的比较 3.行人再识别基准数据集 3.1基于图像的再识别数据集 3.2基于视频的再识别数据集 4.基于图像的深度再识 ...

  2. Python标准库tempfile的使用总结

    Python标准库tempfile的使用总结 临时文件是计算机程序存储临时数据的文件,它的扩展名通常是".temp".本文用于记录使用Python提供的临时文件API解决实际问题的 ...

  3. Vite2+Vue3+ts的eslint设置踩坑

    目录 新项目了 Vite搭建 eslint 先安装eslint 创建.eslintrc.js 引入规则 Airbnb 配合prettier 对ts的支持 .eslintrc.js 在页面上查看esli ...

  4. UML 类之间的关系

    统一建模语言(Unified Modeling Language,UML) 作用:对软件系统进行说明 如果说软件系统是一本小说的话,那么 UML 就是将小说动漫化. 也许你看过这本小说,但是时间一长, ...

  5. Antd Modal 可拖拽移动

    一 目标: 实现antd Modal 弹窗或者其他弹窗的点击标题进行拖拽的效果 二 准备及思录: 1.使用antd  Modal 组件,要想改变位置需要改变Modal style 的left 和top ...

  6. linux在图形界面一登录就自动闪退

    今天一登录linux图形界面就自动退出了,又退到了登录界面了,密码是正确的. 解决方法如下: 1. 先按 Ctrl + Alt + F1,进入 命令行模式. 2. 在命令行里,输入用户名密码正常登录. ...

  7. 引入『客户端缓存』，Redis6算是把缓存玩明白了…

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 哈喽大家好啊,我是没更新就是在家忙着带娃的Hydra. 在前面介绍两级缓存的文章中,我们总共给出了4种实现方案,在项目中整合了本地缓存Caffe ...

  8. 用python实现matlib的 生成高斯模糊核

    最近在做一个关于模糊图片恢复的数学建模,遇到了一个大问题,特记录一下. 在matlib中有  PSF = fspecial('motion', LEN, THETA);  来生成模糊核函数,但在pyt ...

  9. 1.17 想学好Linux，这些习惯必须养成（初学者必读）

    不管是在生活还是工作中,每个人都会逐渐养成一些小习惯.坏习惯一旦形成就很难改正,所在在系统学习 Linux之前,给大家一些建议,刻意去培养一些好的习惯,对自己是很有利的. 学习Linux,要习惯使用命 ...

  10. 10大黑客专用的 Linux 操作系统

    上一篇:为什么不建议把数据库部署在Docker容器内? 今天列出一些最常用.最受欢迎的Linux发行版来学习黑客和渗透测试! 1. Kali Linux Kali Linux是最著名的Linux发行版 ...