• 原生JS获取HTML DOM元素的方法----------c


    jQuery 事件方法

    https://www.cnblogs.com/yuanjili666/p/12425257.html

    JS获取DOM元素的方法(8种)

    • 通过ID获取(getElementById)
    • 通过name属性(getElementsByName)
    • 通过标签名(getElementsByTagName)
    • 通过类名(getElementsByClassName)
    • 通过选择器获取一个元素(querySelector)
    • 通过选择器获取一组元素(querySelectorAll)
    • 获取html的方法(document.documentElement)
    • document.documentElement是专门获取html这个标签的
    • 获取body的方法(document.body)
    • document.body是专门获取body这个标签的。

    1.通过ID获取(getElementById)

    document.getElementById('id')
    • 上下文必须是document。
    • 必须传参数,参数是string类型,是获取元素的id。
    • 返回值只获取到一个元素,没有找到返回null。

    2.通过name属性(getElementsByName)

    document.getElementsByName('name')
    • 上下文必须是document。内容
    • 必须传参数,参数是是获取元素的name属性。
    • 返回值是一个类数组,没有找到返回空数组。

    3.通过标签名(getElementsByTagName)

    复制代码
    var obj = document.getElementsByTagName('div');
    for(let i = 0; i<obj.length; i++){
            obj[i].onclick = function(e){
                console.log(i)
            }
        }
    复制代码
    • 上下文可以是document,也可以是一个元素,注意这个元素一定要存在。
    • 参数是是获取元素的标签名属性,不区分大小写。
    • 返回值是一个类数组,没有找到返回空数组

    4.通过类名(getElementsByClassName

    复制代码
    var obj1 = document.getElementsByClassName('animated')
    // console.log
    0:div.app.animated
    1:div#login.login.animated.rubberBand
    2:div#reg.reg.animated.shake
    3:div#kefu.kefu.animated.swing
    4:div#LoginState.state.animated.bounce
    5:div.loginState.animated
    6:div.regState.animated
    7:div.pop.animated
    复制代码
    • 上下文可以是document,也可以是一个元素。
    • 参数是元素的类名。
    • 返回值是一个类数组,没有找到返回空数组。

    5.通过选择器获取一个元素(querySelector)

    document.querySelector('.animated')
    • 上下文可以是document,也可以是一个元素。
    • 参数是选择器,如:”div .className”。
    • 返回值只获取到第一个元素。

    6.通过选择器获取一组元素(querySelectorAll)

    document.querySelector('.animated')
    • 上下文可以是document,也可以是一个元素。
    • 参数是选择器,如:”div .className”。
    • 返回值是一个类数组。
    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    Redis源码解析:28集群(四)手动故障转移、从节点迁移
    Redis源码解析:27集群(三)主从复制、故障转移
    Redis源码解析:26集群(二)键的分配与迁移
    centos 6.5 安装composer
    Centos安装php高版本
    CentOS快速搭建LAMP环境
    封装类似thinkphp连贯操作数据库的Db类(简单版)。
    php封装pdo操作数据的工具类
    php中使用mysqli和pdo扩展,测试mysql数据库的执行效率。
    php中使用mysqli和pdo扩展,测试连接mysql数据库的效率。
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/12425191.html
Copyright © 2020-2023  润新知