JS:获取标签的6个方法+获取html+获取body

简介: JS:获取标签的6个方法+获取html+获取body

JS 获取标签的方法


通过class: document.getElementsByClassName('class名');返回数组


通过name: document.getElementsByName('name名');返回数组


通过id: document.getElementById('id名');返回一个对象


通过标签名: document.getElementsByTagName(‘标签名’);返回数组


通过通用选择器:document.querrySelector('可以写任何选择器 只能选择一个');返回数组


通过通用选择器:document.querrySelectorAll('可以写任何选择器,可以选择多个');返回数组

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
</head>
<body>
     <div class='box' id="box" name='box' ></div>    
</body>
     <script type="text/javascript">
         var div1 = document.getElementsByClassName('box')[0];
                 //利用class名获取元素
         var div2 = document.getElementsByName('box')[0];
         var div3 = document.getElementById('box');\\获取到了div
         var div4 = document.getElementsByTagName('div')[0];
          //获取到了div 
          //element加了s表示是集合 获取的是一组元素 是伪数组
          //可以在获取元素后面加[写你想要的那个元素 数字表示 下标是0];
          var div5 = document.querySelector('.box')[0];
         //获取class 要加 . //获取id    要加#
         var div6 = document.querySelectorAll('.box')[0];
         //是个集合可以选择多个        
 console.log(div);//console.log(document.querySelector('.class'))
     </script>
</html>

 

获取html

console.log(document.documentElement)

15.png

获取body的方法

console.log(document.body)

14.png


相关文章
|
1天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
6 0
|
1天前
|
前端开发 JavaScript 流计算
前端 js 经典:字符串超全方法总结
前端 js 经典:字符串超全方法总结
9 0
|
1天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
11 0
|
3天前
|
前端开发 JavaScript 开发者
JavaScript中的异步编程方法总结
在JavaScript开发中,处理异步操作是非常常见的情况。本文将总结JavaScript中常用的异步编程方法,包括Callback、Promise、Async/Await等,分析其优缺点,并提供使用建议。
|
4天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
7 0
|
4天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
6 0
|
4天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
10 2
|
4天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
10 1
|
5天前
|
JavaScript 前端开发
JS中正则方法的使用 - 蓝易云
以上就是JavaScript中正则方法的基本使用。这些方法可以用于执行复杂的字符串处理和验证任务。
27 1
|
5天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”