zoukankan      html  css  js  c++  java
  • 原生JS--获取DOM节点

    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”。
    • 返回值是一个类数组。

    转载于:查看原创请点击此处

  • 相关阅读:
    Ubuntu 18.04更换国内源方法
    CTFHub-Web-Web前置技能-PHPINFO
    CTFHub-Web-Web前置技能-目录遍历
    Python-字符串常见操作
    hadoop完全分布式虚拟机多机克隆后网卡配置
    N皇后问题 回溯非递归算法 C++实现2
    N皇后问题 回溯非递归算法 C++实现1
    N皇后问题 回溯递归算法 C++实现2
    N皇后问题 回溯递归算法 C++实现1
    无法更新运行时文件夹共享状态:在客户机操作系统内装载共享文件夹文件系统时出错——解决方案
  • 原文地址:https://www.cnblogs.com/zero18/p/10998642.html
Copyright © 2011-2022 走看看