JS获取DOM元素的八种方法(含代码,简单易懂) |
您所在的位置：网站首页 › 获取dom元素的高度是多少 › JS获取DOM元素的八种方法(含代码,简单易懂) |
JS获取DOM元素的八种方法(含代码,简单易懂)
|
让我为大家介绍一下获取DOM元素的方法吧！ 1.document.getElementsByClassName(“元素类名”)[下标]通过class类名获取元素，返回一个伪数组，不能使用数组操作方法 DOCTYPE html> 我是第一个box 我是第二个box // 因为我们可能有多个类名叫做box的div,使用此方法获取时添加需要获取的元素下标,0开始 // 返回一个伪数组,不能使用数组的操作方法 // 记得在后面加下标,或者变量名[下标]都是可以的 var box = document.getElementsByClassName("box")[0]//返回第一个class类名叫做box的元素 2.document.getElementById(“元素id名”)通过元素id获取元素 DOCTYPE html> id名不能重复哦 // 因为id就像人们的身份证一样,id名不能重复,所以不会像有的方法返回一个伪数组 var box = document.getElementById("box")//返回一个id名叫box的元素 3.document.getElementsByTagName(“元素标签名”)[下标]通过元素标签名获取元素，返回一个伪数组，不能使用数组操作方法 DOCTYPE html> 我是第一个div标签 我是第二个div标签 // 返回一个伪数组,不能使用数组的操作方法 // 记得在后面加下标,或者变量名[下标]都是可以的 var div = document.getElementsByTagName("div")[0]//返回第一个标签名为div的元素 4.document.getElementsByName(“元素name属性名”)[下标]通过元素name属性名获取元素，返回一个伪数组，不能使用数组操作方法 DOCTYPE html> // 返回一个伪数组,不能使用数组操作方法 // 记得在后面加下标,或者变量名[下标]都是可以的 var inp = document.getElementsByName("inp")[0]//返回第一个name属性叫inp的元素 5.document.querySelector(“css选择器”)通过css选择器获取元素 DOCTYPE html> 我是第一个叫box的孩子 我是第二个box的孩子 我是id选择器 // 注意是第一个 // class获取 var box = document.querySelector(".box")//获取第一个class类叫box的元素 // id获取 var boss = document.querySelector("#boss")//获取id叫做boss的元素 // 标签获取 var div = document.querySelector("div")//获取第一个div标签 // 还有许多选择器方法都可以获取,但要注意是获取的第一个元素 6.document.querySelectorAll(“css选择器”)[下标]通过css选择器获取元素，返回一个伪数组，不能使用数组操作方法 DOCTYPE html> 我是第一个叫box的孩子 我是第二个box的孩子 // 放回一个伪数组，不能使用数组操作方法 // 记得在后面加下标,或者变量名[下标]都是可以的 // class获取 var box = document.querySelectorAll(".box")[0]//获取第一个class类叫box的元素 // 标签获取 var div = document.querySelectorAll("div")[0]//获取第一个div标签 七、document.body获取body标签 // 获取body标签 var body = document.body console.log(body);
获取整个html标签 // 获取html var html = document.documentElement console.log(html)
感谢各位阅读，如有什么错误的地方，可以向我指出，谢谢大家！ |
【本文地址】