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. HDU6440 Dream(费马小定理+构造) -2018CCPC网络赛1003

    题意: 给定素数p,定义p内封闭的加法和乘法,使得$(m+n)^p=m^p+n^p$ 思路: 由费马小定理,p是素数,$a^{p-1}\equiv 1(mod\;p)$ 所以$(m+n)^{p}\eq ...

  2. 小白学 Python 数据分析（4）：Pandas （三）数据结构 DataFrame

    在家为国家做贡献太无聊,不如跟我一起学点 Python 人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Panda ...

  3. 源码详解系列(八) ------ 全面讲解HikariCP的使用和源码

    简介 HikariCP 是用于创建和管理连接,利用"池"的方式复用连接减少资源开销,和其他数据源一样,也具有连接数控制.连接可靠性测试.连接泄露控制.缓存语句等功能,另外,和 dr ...

  4. C2440 “初始化”: 无法从“std::_Vector_const_iterator<std::_Vector_val<std::_Simple_types<_Ty>>>”转换为“std::_Vector_iterator<std::_Vector_val<std::_Simple_types<_Ty>>>”

    错误原因vs已经提醒的很清楚了:无法将const_iterator转换为iterator 我的出错代码是这样的 思考了很久,最后发现原来是因为将函数定义为const的缘故. 总结:当将函数定义为con ...

  5. ArtiPub：一款开源的一文多发平台

    文章来自我的博客:https://blog.ljyngup.com/archives/705.html/ 看到感觉挺有意思的,有空找个空闲的VPS搭建一下. 转自官方Github仓库 ArtiPub ...

  6. javascript 对象api

    // Object 构造函数的属性: Object.prototype//可以为所有 Object 类型的对象添加属性 class A extends B{ constructor(){ super( ...

  7. CDN&对象存储

    概念 CDN是什么:名词解释不清,加快静态资源访问的技术 CDN原理:将静态资源缓存到用户所在城市 实现 步骤1:注册七牛云账号 https://portal.qiniu.com/signup?cod ...

  8. PDO连接不上又不报错的问题

    前提:连接PDO需要在将php.ini配置文件的 ;extension=pdo_mysql,去掉前面的;号. 今天闲来无事就重新弄了一下PDO,结果怎么都连不上.而且没有给出错误的信息.代码如下: & ...

  9. Unity 编辑器开发SceneView GUI控制

    前几天项目需要就做了个类似于Collider EditCollider的功能 下面是我做的效果 基础代码如下: public class ExportCFGInputWindow : EditorWi ...

  10. vue目录结构熟悉

    给项目的入口文件做点小改变: [补充:编辑器建议使用vscode,我还没装,暂时先用phpstorm] 打开 APP.vue 文件,代码如下(解释在注释中) <!-- 展示模板 --> & ...