JavaScript中如何获取DOM元素

显示全部楼层 · 2021-6-5 11:29:18

文章转载自安静阁：http://www.anjingge.com/notes/anjing/dom-huo-qu-yuan-su1. getElementByID

因为我们文档从上往下加载，所以得先有标签，因此script写在标签的下面
使用getElementByID()方法可以获取带有ID的元素对象
参数为id的字符串，返回值为DOM Element对象。如果没找到，则返回null
使用console.dir()可以打印我们返回的元素对象，更好的查看里面的属性和方法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>getElementByID案例</title></head><body><div id="time">2021-5-30</div><script> // 因为我们文档从上往下加载，所以得先有标签 // 因此script写在标签的下面 var time = document.getElementById('time'); // 返回值为DOM Element对象 // 如果没找到，则返回null console.log(time); console.log(typeof time); // 使用console.dir可以打印我们返回的元素对象 // 更好的查看里面的属性和方法 console.dir(time);</script></body></html>2. getElementsByTagName

getElementsByTagName()方法可以返回带有指定标签名的对象的集合
无论返回几个元素，都以伪数组的形式返回
还可以获取某个元素内部所有指定标签的子元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>getElementByID案例</title></head><body><ul> <li>知否知否，应是等你好久a</li> <li>知否知否，应是等你好久b</li> <li>知否知否，应是等你好久c</li> <li>知否知否，应是等你好久d</li> <li>知否知否，应是等你好久e</li></ul><ol> <li>知否知否，应是等你好久1</li> <li>知否知否，应是等你好久2</li> <li>知否知否，应是等你好久3</li> <li>知否知否，应是等你好久4</li> <li>知否知否，应是等你好久5</li></ol><script> // 返回的是获取过来元素对象的集合 // 以伪数组的形式存储 var list = document.getElementsByTagName('li'); console.log(list); console.log(list[0]); // 我们想要依次打印里面的元素对象 // 我们可以采取遍历的方式 for (var i = 0; i < list.length; i++) { console.log(list); } // 还可以获取某个元素内部所有指定标签的子元素 // 实际操作中更加经常使用getElementByID var ol = document.getElementsByTagName('ol'); console.log(ol[0].getElementsByTagName('li'));</script></body></html>3. getElementsByClassName（HTML5新增，IE9以下不兼容）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>getElementByID案例</title></head><body><div class="box">盒子</div><div class="box">盒子</div><div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul></div><script> // 根据类名获取元素对象的集合 // 以伪数组的形式存储 var boxes = document.getElementsByClassName('box'); console.log(boxes); console.log(boxes[0]);</script></body></html>4. querySelector 和 querySelectorAll（HTML5新增，IE9以下不兼容）
querySelector()根据选择器返回第一个元素对象
querySelectorAll()根据选择器选择符合对象的集合

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>getElementByID案例</title></head><body><div class="box">盒子</div><div class="box">盒子</div><div id="nav"> <ul> <li>首页</li> <li>产品</li> </ul></div><script> // 根据选择器返回第一个元素对象 var firstBox = document.querySelector('.box'); var nav = document.querySelector('#nav'); var li = document.querySelector('li'); console.log(firstBox); console.log(nav); console.log(li); // 根据选择器返回符合条件的所有对象 var allBoxes = document.querySelectorAll('.box'); console.log(allBoxes); var lis = document.querySelectorAll('li'); console.log(lis);</script></body></html>5. 获取特殊元素（body，html）
通过document.body可以获得body元素
通过document.documentElement可以获得html元素

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>getElementByID案例</title></head><body><script> // 获取body元素 var bodyEle = document.body; console.log(bodyEle); console.dir(bodyEle); // 获取html元素 var htmlEle = document.documentElement; console.log(htmlEle); console.dir(htmlEle);</script></body></html>