• JavaScript 获取页面元素


    一、根据 id 获取元素

      语法格式:

    document.getElementById(elementId); 通过标签的 id 属性查找标签 dom 对象, elementId 是标签的 id 属性值 

      Demo:

    1 var main = document.getElementById('main');
    2 console.log(main);                // 获取到的数据类型 HTMLDivElement,对象都是有类型的。

      注意:由于id名具有唯一性,部分浏览器支持直接使用id名访问元素,但不是标准方式,不推荐使用。如果页面上没有对应的 id,此时返回 null。

    二、根据标签名获取元素

      语法格式:

    doucument.getElementsByTagName(tagName);      通过标签名查找标签 dom 对象。 tagname 是标签名 

      Demo: 

    1 var divs = document.getElementsByTagName('div');
    2 for (var i = 0; i < divs.length; i++) {
    3   var div = divs[i];
    4   console.log(div);
    5 } 

       注意

        因为一个文档里面可能有多个同名的标签,获取获取的是一个伪数组(集合),可以对其进行遍历。

        获取到的集合是动态集合,即往页面再次添加元素时,会自动更新集合内元素的个数。

    三、根据 name 获取元素

      语法格式:

    doucument.getElementsByName(elementName);   通过标签的 name 属性查找标签 dom 对象, elementName 标签的 name 属性值 
    

      Demo:

    1 var inputs = document.getElementsByName('hobby');      // 获取的是一个伪数组
    2 for (var i = 0; i < inputs.length; i++) {
    3   var input = inputs[i];
    4   console.log(input);
    5 }

      注意:此方法存储浏览器的兼容性,IE9+ 以后才支持。

    四、根据类名获取元素

      语法格式:

    document.getElementsByClassName(className);   通过标签的 class 属性查找 dom 对象
    

      Demo:

    1 var mains = document.getElementsByClassName('main');    // 获取的是一个伪数组
    2 for (var i = 0; i < mains.length; i++) {
    3   var main = mains[i];
    4   console.log(main);
    5 }

    五、根据选择器获取元素

      1、querySelector()

        语法格式:

    querySelector(选择器名);
    

        注意:使用该方法只会返回第一个匹配的元素。

      Demo:

    1 var element = document.querySelectorAll('.a');
    2 console.log(element)

      2、querySelectorAll()

        语法格式:

    querySelectorAll(选择器名);
    

        注意:使用此方法可以返回所有匹配到的元素

       Demo:

    1 var elements = document.querySelectorAll('.a');
    2 consoloe.log(elements);

      注意:这两个方法都是根据选择器来获取元素,存在浏览器兼容问题,IE8 以后才执行

  • 相关阅读:
    关闭windows10更新
    ude5.00修改字体大小方法
    hightec的eclipse运行错误解决
    Tek DPO2024B示波器和电流探头A622的使用
    vue项目中使用mockjs+axios模拟后台数据返回
    vue-tree 组织架构图/树形图自动生成(含添加、删除、修改)
    vue html页面打印功能vue-print
    项目中遇到的bug、问题总结
    在Vue项目中使用html2canvas生成页面截图并上传
    element-ui 使用span-method表格合并后hover样式的处理
  • 原文地址:https://www.cnblogs.com/niujifei/p/11406893.html
Copyright © 2020-2023  润新知