一、根据 id 获取元素

　　语法格式：

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

　　Demo:

 var main = document.getElementById('main');

 console.log(main);                // 获取到的数据类型 HTMLDivElement，对象都是有类型的。

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

二、根据标签名获取元素

　　语法格式：

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

　　Demo：　

 var divs = document.getElementsByTagName('div');

 for (var i = 0; i < divs.length; i++) {

   var div = divs[i];

   console.log(div);

 }

　　　注意：

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

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

三、根据 name 获取元素

　　语法格式：

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

　　Demo:

 var inputs = document.getElementsByName('hobby');      // 获取的是一个伪数组

 for (var i = 0; i < inputs.length; i++) {

   var input = inputs[i];

   console.log(input);

 }

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

四、根据类名获取元素

　　语法格式：

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

　　Demo：

 var mains = document.getElementsByClassName('main');    // 获取的是一个伪数组

 for (var i = 0; i < mains.length; i++) {

   var main = mains[i];

   console.log(main);

 }

五、根据选择器获取元素

　　1、querySelector()

　　　　语法格式：

querySelector(选择器名);

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

　　Demo：

 var element = document.querySelectorAll('.a');

 console.log(element)

　　2、querySelectorAll()

　　　　语法格式：

querySelectorAll(选择器名);

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

　　　Demo：

 var elements = document.querySelectorAll('.a');

 consoloe.log(elements);

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

巴特西

JavaScript 获取页面元素

一、根据 id 获取元素

二、根据标签名获取元素

三、根据 name 获取元素

四、根据类名获取元素

五、根据选择器获取元素

1、querySelector()

2、querySelectorAll()

最新文章

热门文章