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)

获取body的方法
 console.log(document.body)

JS：获取标签的6个方法+获取html+获取body的更多相关文章

  1. js 复制 标签中的内容 方法

    <span id='id'>hello world</span><input type='button' onClick='copy("id")' v ...

  2. 第7天：javascript-DOM 获取标签、注册事件改变属性的值、innerText、改变属性的值等

    javascript WEB api------DOM document object model 案例 为元素注册点击事件,弹出对话框 <input type="button&quo ...

  3. java：JavaScript2：（setTimeout定时器，history.go()前进/后退，navigator.userAgent判断浏览器，location.href，五种方法获取标签属性，setAttribute，innerHTML，三种方法获取form表单信息，JS表单验证，DOM对象，form表单操作）

    1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...

  4. JS获取标签内容的方法

    JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. JS获取标签方法及兼容处理

    document.getElementById('Id名');  // 所有浏览器 document.getElementsByTagName('标签名'); // 所有浏览器 document.ge ...

  6. JS获取HTML DOM元素的方法

    JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...

  7. js方法用来获取路径传参上所带的参数

    //js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...

  8. JS获取当前页面URL的方法

    1.JS获取当前页面URL的方法小结 ①. document.URL;                           http://localhost:81/Test/1.htm/id/12 ② ...

  9. js ajax设置和获取自定义header信息的方法总结

    目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...

随机推荐

  1. 【学习底层原理系列】重读spring源码1-建立基本的认知模型

    开篇闲扯 在工作中,相信很多人都有这种体会,与其修改别人代码,宁愿自己重写. 为什么? 先说为什么愿意自己写: 从0-1的过程,是建立在自己已有认知基础上,去用自己熟悉的方式构建一件作品.也就是说, ...

  2. openssl 自签名证书SHA1加密算法

    openssl genrsa -out privkey.pem 2048 openssl req -new -key privkey.pem -sha1 -out cert.csr openssl r ...

  3. 浅析Internet上使用的安全协议

    Internet上使用的安全协议 网络安全是分层实现的,从应用层安全到数据链路层安全. 一.运输层安全协议:安全套接字SSL 1.1.简介 SSL 是安全套接层 (Secure Socket Laye ...

  4. Hibernate入门之命名策略（naming strategy）详解

    前言 JPA和Hibernate都提供了默认映射策略,通过映射将每个实体类映射到具有相同名称的数据库表,它的每个属性都映射到具有相同属性的列, 但是,在实际项目开发中可能出现与默认命名约定不匹配,也就 ...

  5. java开发学生信息管理系统 源码

    开发环境:    Windows操作系统开发工具: Eclipse+Jdk+Tomcat+MYSQL数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php?mo ...

  6. 深入源码分析SpringMVC执行过程

    本文主要讲解 SpringMVC 执行过程,并针对相关源码进行解析. 首先,让我们从 Spring MVC 的四大组件:前端控制器(DispatcherServlet).处理器映射器(HandlerM ...

  7. 使用jquery封装的动画脚本（无动画、css3动画、js动画）

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  8. luogu2173 [ZJOI2012]网络

    题目链接 problem 给出一个无向图,每条边有一种颜色.每种颜色都构成一个森林.需要完成以下操作. 修改点权 修改边的颜色 询问某种颜色的森林中某条路径上点权最大值 solution 颜色数量不超 ...

  9. 知名KMS模拟器的官方发布网址

    些知名KMS模拟器的官方发布网址: 本机自激活安装类KMS激活软件,容易在系统升级中被查杀失效,且在软件传播过程中极易被捆绑植入后门.病毒,不推荐尝试. Windows Loaderhttps://f ...

  10. CHECK INDEX OF TABLE

    SELECT INDEX_NAME,COLUMN_NAME FROM ALL_IND_COLUMNS WHERE table_name = '';