JavaScript基础操作——获取元素 id class

科技2026-01-20 11

通过id的方式获取元素节点 document.getElementById(“id_name”) <div id="shuzi">123456</div> <script type="text/javascript"> //文档.得到元素的id var a = document.getElementById("shuzi") console.log(a) //返回元素对象,更好的查看里面的属性和方法 console.dir(a) </script> 通过标签的方法获取,以伪数组的形式返回元素对象的集合； document.getElementsByTagName(‘li’) 根据类名获取元素 document.getElementsByClassName（‘类名’） querySelector/什么都能选，返回所选的第一个元素,选择类需要. id需要# document.querySelector(’#nav’)；document.querySelector(‘li’)； querySelectorAll 返回所有的匹配元素； document.querySelectorAll(‘li’)

代码演示：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="shuzi">123456</div> <ul class="cl"> <li>123</li> <li>123</li> <li>123</li> <li>123</li> <li>123</li> </ul> <ul id="nav"> <li class="li">1234</li> <li>12344</li> <li>12344</li> <li>12344</li> <li>12344</li> </ul> <script type="text/javascript"> //文档.得到元素的id var a = document.getElementById("shuzi") console.log(a) //返回元素对象,更好的查看里面的属性和方法 console.dir(a) //通过标签的方法获取,返回元素对象的集合,以伪数组的形式 var b = document.getElementsByTagName('li') console.dir(b) console.log(b[1]) //获取某一标签下的元素 var nav = document.getElementById('nav') var c = nav.getElementsByTagName('li') console.log(c[0]) //根据类名获取元素 var d = document.getElementsByClassName('cl') console.log(d) //querySelector/什么都能选，返回所选的第一个元素,选择类需要. id需要# var e = document.querySelector('#nav') console.log(e) var f = document.querySelector('li') console.log(f) //querySelectorAll 返回所有的匹配元素 var g = document.querySelectorAll('li') console.log(g) console.log(g[0]) </script> </body> </html>

Processed: 0.013, SQL: 9