根据 ID 值获取 : document.getElementById()
ID值获取最常用!
<div id="demo"></div> //js代码 var demo = document.getElementById("demo")
根据 标签名 获取 : document.getElementsByTagName()
<ul> <li>Hello1</li> <li>Hello2</li> </ul> <ol id="ol"> <li>Hello3</li> <li>Hello4</li> </ol> //js代码 var lis = document.getElementsByTagName('li') console.log(lis) //输出html元素集合 HTMLCollection(4) [li, li, li, li] console.log(lis[0]) //输出第一个<li> Hello1 <li> //遍历 (得到的是对象的集合,想要操作里面的元素就需要遍历) for(var i=0;i<lis.length;i++){ console.log(lis[i]) //把四个<li>都遍历出来 } var ol = document.getElementById('ol') console.log(ol.getElementByTagName('li')) 输出html元素集合 HTMLCollection(2) [li, li]
根据 类名 获取 : document.getElementsByClassName()
注意没有 .
<div class="box">盒子1</div> <div class="box">盒子2</div> //js代码 var boxs = document.getElementsByClassName('box') console.log(boxs) //HTMLCollection(2) [div.box, div.box]
根据 css选择器 获取 : document.querySelector()
<div class="box">盒子1</div> <div class="box">盒子2</div> //js代码 var firstBox = document.querySelector('.box') console.log(firstBox) //输出 <div class="box">盒子1</div> var allBox = document.querySelectorAll('.box') console.log(allBox) //NodeList(2) [div.box, div.box]
根据 HTML对象集合 获取 :
获取body元素 : document.body
获取html元素 : document.documentElement
<body> <script> // 1.获取body 元素 var bodyEle = document.body console.log(bodyEle) console.dir(bodyEle) // 2.获取html var htmlEle = document.documentElement; console.log(htmlEle) </script> </body>
