引言

 

查找元素是前端中用的非常多的方法，工作中做项目的话也会经常用到，下面就总结归纳一下js以及jq的查找元素的方法吧。

正文

 

一.  js获取元素方法归纳

1.  通过id获取

document.getElementById('id')  //根据id获取

2.  通过name获取

document.getElementByName('name')  // 通过name属性获取

3.  通过className获取

document.getElementsByClassName('className') // 通过class的名称获取

4.  通过tagName获取

document.getElementsByTagName('tagName')  // 通过标签名获取

5.  通过css选择器querySelector()获取一个满足条件的元素

如果不知道css选择器的话，请看CSS选择器参考手册：https://www.runoob.com/cssref/css-selectors.html

document.querySelector('css选择器')

// 例子

document.querySelector('#demo')  // 获取 id = demo 的元素

document.querySelector('.demo')  // 获取 clss = demo 的元素

document.querySelector('p')      // 获取第一个 <p> 元素

document.querySelector('a[target]')  // 获取文档中第一个有target属性的 <a> 元素

注意：此方法只能获取一个元素，若有多个，则返回第一个

 

6.   通过css选择器querySelectorAll()获取所有满足条件的元素

elementList = document.querySelectorAll('selectors')

// 返回一个 NodeList 类型的对象集合，可以遍历获取每一个元素，也可以通过下标直接获取某个元素

前面4种方法比较常规，也是大多数人都知道的几种方式，重点提一下后面两种，通过css选择器获取元素的方法：

querySelector() 可以根据自定义属性获取元素，工作中也常有用到。

举个栗子：

// 这里有一个有自定义属性的标签

<div data-uuid = '123456'></div>

// 那么当文档中div很多的时候，就只能通过css选择器获取了


// 获取方法：

document.querySelector("div[data-uuid='123456']")

 querySelector() 参考手册：https://www.runoob.com/jsref/met-document-queryselector.html

querySelectorAll() 参考手册：https://www.runoob.com/jsref/met-document-queryselectorall.html

 

二.  jq获取元素方法归纳

 jq 获取元素的方法细分的话，可以分很多种，这里只是粗略的总结~

1.  通过id获取

$('#id')  // 通过id获取

2.  通过class获取

$('.className')  // 通过class名称获取

3.  通过标签名获取

$('div')  // 获取所有的 <div> 元素

4.  通过属性获取

$('[attribute = value]'

// 举个栗子

$('[data-uuid = 123456]')  // 获取所有满足条件的元素

//注意：这里返回的是集合！不能直接用！



// 如果元素唯一，可以直接通过下标获得（data-uuid就是唯一的，这里只是演示乱打的）

$('[data-uuid = 123456]')[0]  // 获得该元素

总结