JavaScript 获取页面元素

一、根据 id 获取元素

  语法格式:

document.getElementById(id);

  Demo:

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

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

二、根据标签名获取元素

  语法格式:

doucument.getElementsByTagName(标签名);

  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.getElementByName(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.getElementByClassName(类名);

  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 以后才执行

相关文章
相关标签/搜索