JavaScript中DOM查询封装函数
在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查询封装函数的更多相关文章
- [转]Javascript中的自执行函数表达式
[转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...
- 深入理解javascript中的立即执行函数(function(){…})()
投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...
- 使用Ajax在javascript中调用后台C#函数
使用Ajax在javascript中调用后台C#函数 最近一段时间在紧跟一个网站的项目,数据库中用户表的UserName要求是唯一的,所以当用户选定一个用户名进行注册时要首先检查该用户名是否已被占用, ...
- 在javascript中关于变量与函数的提升
在javascript中关于变量与函数的提升 一.简介 在javascript中声明变量与函数的执行步骤: 1.先预解析变量或函数声明代码,会把用var声明的变量或者函数声明的代码块进行提升操作 2. ...
- javascript中的立即执行函数(function(){…})()
javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包 ...
- 深入理解javascript中的立即执行函数
这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见,需要的朋友可以 ...
- JavaScript中的内置函数
JavaScript中的内置函数 制作人:全心全意 在使用JavaScript语言时,除了可以自定义函数之外,还可以使用JavaScript的内置函数,这些内置函数是由JavaScript语言自身提供 ...
- JavaScript 中对变量和函数声明提前的演示样例
如题所看到的,看以下的演示样例(能够使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发人员工具,进入控制台console输入)(使用技巧: 控制台输入时Shift+Enter能够中途代码 ...
- day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
随机推荐
- js刷新页面window.location.reload()
window.location.reload()刷新当前页面 window.parent.location.reload()刷新父亲对象(用于框架) opener.location.reload()刷 ...
- rabbitmq简单运用
<?php /** * 生产者 */ $connection = new AMQPConnection([ 'host' => '192.168.23.130', 'port' => ...
- 《手把手教你》系列基础篇（八十八）-java+ selenium自动化测试-框架设计基础-Log4j 2实现日志输出-下篇（详解教程）
1.简介 上一篇宏哥讲解和分享了如何在控制台输出日志,但是你还需要复制粘贴才能发给相关人员,而且由于界面大小限制,你只能获取当前的日志,因此最好还是将日志适时地记录在文件中直接打包发给相关人员即可.因 ...
- linux 文件系统损坏修复
系统突然掉电,导致重启后文件系统损坏,由于是测试服务器,长时间没关注,磁盘还满了.CRT登录rz文件时候发现报错,然后重启时候linux报错 /dev/VolGroup00/LogVo100: UNE ...
- 2021.07.26 P1011 车站（斐波那契数列）
2021.07.26 P1011 车站(斐波那契数列) [P1011 NOIP1998 提高组] 车站 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.改变形式的斐波那契 ...
- python基础练习题（题目 矩阵对角线之和）
day25 --------------------------------------------------------------- 实例038:矩阵对角线之和 题目 求一个3*3矩阵主对角线元 ...
- python @符号用法的简单理解
一.用作函数修饰符 作用是为现有函数增加额外的功能,常用于插入日志.性能测试.事务处理等等 创建函数修饰符的规则:(1)修饰符是一个函数(2)修饰符取被修饰函数为参数(3)修饰符返回值取代被修饰函数 ...
- Odoo 服务器搭建备忘
前提 OS:Ubuntu 20.04LTS Odoo:14旗舰版 数据库:Postgres13.0 *数据库和Odoo安装在一台服务器 系统设置 为了Log日志时间好看,进行系统时区设置 # 查看可用 ...
- 2003031121-浦娟-python数据分析第四周作业-第二次作业
项目 内容 课程班级博客链接 20级数据班(本) 作业链接 Python第四周作业第二次作业 博客名称 2003031121-浦娟-python数据分析第四周作业-matolotlib的应用 要求 每 ...
- Java继承实例解析
Java继承 前言 继承是面向对象语法的三大特征之一.继承可以降低代码编写的冗余度,提高编程的效率.通过继承,子类获得了父类的成员变量和方法.一个子类如何继承父类的字段和方法,如何修改从父类继承过来的 ...