前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript 非常好用方便的绑定/查找标签的类

JavaScript 非常好用方便的绑定/查找标签的类

原创
作者头像
xlj
修改2021-10-20 18:16:47
4890
修改2021-10-20 18:16:47
举报
文章被收录于专栏:XLJ的技术专栏XLJ的技术专栏

简述

由于使用 JavaScript 绑定标签需要反复绑定,所以写了一个 JavaScript 的绑定和查询标签的类

开始

把这些代码放到 html 文档的 <script></script> 标签内

代码语言:javascript
复制
function Dom () {

    // 使用方法
    // 首先
    // var Dom = new Dom();
    // 接着 (要绑定标签的话)
    // var Info = Dom.Class('这里是标签的 Class 类名', 标签是第几个填写数字);
    // 然后看浏览器的 Console 控制台会提示相关信息 (F12)
    // Info 这个变量就是指向指定的标签了

    // Dom.Class() 这个方法是绑定指定 Class 名的标签
    // Dom.Tags() 这个方法是绑定指定 Tag 名的标签
    // Dom.Id() 这个方法是绑定指定 Id 名的标签

    // Dom.zClass() 这个方法是查找指定 Class 名的标签信息数组和数量信息
    // Dom.zTags() 这个方法是查找指定 Tag 名的标签信息数组和数量信息

    // 代码版权归属 XLJ 所有

    // 用 Class 名的方式查找标签
    this.Class = function (leiMing, diJiGe) {
        var Info = document.getElementsByClassName(leiMing)[diJiGe];
        console.log('已经找到', Info);
        return Info;
    }

    // 用 Tag 名的方式查找标签
    this.Tags = function (biaoQianMing, diJiGe) {
        var Info = document.getElementsByTagName(biaoQianMing)[diJiGe];
        console.log('已经找到', Info);
        return Info;
    }

    // 用 Id 名的方式查找标签
    this.Id = function (idMing) {
        var Info = document.getElementById(idMing);
        console.log('已经找到', Info);
        return Info;
    }

    // 用 Class 名的方式查找标签的信息数组和数量信息
    this.zClass = function (leiMing) {
        var Info = document.getElementsByClassName(leiMing);
        console.log(Info);
        console.log('类名是' + leiMing + '的有', Info.length + '个');
    }

    // 用 Tag 名的方式查找标签的信息数组和数量信息
    this.zTags = function (biaoQianMing) {
        var Info = document.getElementsByTagName(biaoQianMing);
        console.log(Info);
        console.log('标签名是' + biaoQianMing + '的有', Info.length + '个');
    }
}

绑定标签

代码语言:javascript
复制
var Dom = new Dom();
var Info = Dom.Class('这里是标签的 Class 名', 0);

第二个参数是标签是第几个,如果是第一个标签的话就填写 0 查看是否绑定成功,可以直接在浏览器控制台 ConsoleF12 键 查看是否有信息提示 变量 Info 是指向指定 Class 名的标签

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简述
  • 开始
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档