原生js及jquery获取标签的几种方式——为什么id不能重复

1. 原生js获取标签

DOM（document object model）文本对象模型 我们在用原生js获取标签都离不开DOM

用原生js获取标签的几种常用方法

1. 获取标签id

document.getElementById(‘id’) 参数是id的字符，返回值是这个元素的对象

       var div =  document.getElementById('first')
        console.log('我获取到的是标签的id')

2.获取标签的class

document.getElementByClassName(‘class’)
参数是class的字符，返回的是一个类数组

(类数组不是一个真的数组，但是他和数组一样，也满足数组里的属性，也需要索引[]去获取想要的标签)

    var div = document.getElementsByClassName('blue')[0]

3. 使用 document.querySelector 来获取标签

 var div = document.querySelector('div')
 var div = document.querySelector('ul li')
//querySelector获取标签 和 HTML 中获取方式类似，也可以使用标签选择器来获取
//querySelector是获取相同标签中的 第一个
 var div = document.querySelectorAll('div')[0]
//querySelectorAll来获取所有相同的标签，返回的值也是一个类数组，可以使用索引来查找需要的标签

4.使用标签名来获取标签 document.getElementByTagName

找的相同标签时，用索引查找，返回值也是类数组

var div4=document.getElementsByTagName('div')[0]

5.使用节点查找

DOM 有标签节点； 属性节点； 文本节点

 var div6 = document.body.childNodes
 //childNodes 获取子节点以及文本节点，标签节点 
 var div7 =document.body.children
 //children只获取子标签 

注：在原生js获取元素中除了获取id，其它获取返回的大部分都是类数组，都可以使用索引来获取想要的标签

2.jquery获取元素标签

jquery是一个javascript的函数库，它极大地优化了javascript编程

在使用jquery需要导入jquery

1.jquery通过ID $("#id") 获取标签

var div  = $('#id')

2.jquery通过Class $(".class")获取标签

var div = $('.class")

3.jquery通过标签名$(" ")获取标签 ,返回的也是一个类数组，如果有相同标签需要有索引[ ]来查找

var div = $('div')[]

4.通过变量来查找标签

var div1 = document.getElementById('div')
var div = $(div1)
//  这是在原生js和jquery一起使用时可以用这种方式获取标签

最后来告诉大家为什么给标签设置ID时，为什么不能重复设置

id是具有标示性的，唯一性的，像每个人都有一个自己的身份证，名字也许会重复，但是id就是唯一性的。

在获取id时，如果标签id相同，通过document.getElementById找到的都会是拥有相同id标签的第一个，其他的都找不到

这些都是常用的方法，如果大家有其他的方法都可以来评价，我会继续更新，与时俱进，敬请期待…