zoukankan      html  css  js  c++  java
  • 原生JS获取HTML DOM元素的8种方法

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

     

  • 相关阅读:
    C语言文件路径中的”/“和““
    C语言对文件的操作函数用法详解2
    C语言对文件的操作函数用法详解1
    error MSB8031
    C#操作文件
    C#串口编程
    使用打印方法时,要先引用命名空间: Using System.Drawing.Pringing
    C# 使用printDocument1.Print打印时不显示 正在打印对话框(里面还有一个讨厌的取消按钮)
    在C#里面获得应用程序的当前路径
    Android中的WebView进行直接加载网页(要注意解决权限问题)
  • 原文地址:https://www.cnblogs.com/web-record/p/10131782.html
Copyright © 2011-2022 走看看