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. Go语言实现：【剑指offer】两个链表的第一个公共结点

    该题目来源于牛客网<剑指offer>专题. 输入两个链表,找出它们的第一个公共结点. Go语言实现: //长度长的先走个长度差,然后ab一起比较后面结点 //长度一样,公共结点可能在首结点 ...

  2. 必知必会之Lambda表达式

    Java是一门强大的面向对象的语言,除了8种基本的数据类型,其他一切皆为对象.因此,在Java中定义函数或方法都离不开对象,也就意味着很难直接将方法或函数像参数一样传递,而Java8中的Lambda表 ...

  3. 渡一教育公开课重点笔记之html

    常用的编码字符集:(charset) 1)gb2312 (国标第2312条)缺点:只能识别简体中文 2)gbk (国标扩展字符集,可识别所有亚裔字符) 3)Unicode (万国码) 4)Utf-8 ...

  4. Keras学习系列——神经网络层组件

    对Keras提供的对各种层的抽象进行相对全面的概括 1 基础常用层 名称 作用 原型参数 Dense 实现全连接层 Dense(units,activation,use_bias=True, kern ...

  5. Integer缓存机制-基本数据类型和包装类型-自动拆装箱

    Integer缓存机制 总结: 1.jdk1.5对Integer新增了缓存机制,范围在-128-127(这个范围的整数值使用频率最高)内的自动装箱返回的是缓存对象,不会new新的对象,所以只要在缓存范 ...

  6. 《Web渗透与漏洞挖掘》第一章 安全知识

    漏洞:漏洞是指一个系统存在的弱点或缺陷,系统对特定威胁攻击或危险时间的敏感性,或进行攻击威胁的可能性.漏洞可能来自应用软件或操作系统设计时的缺陷或编码时的错误,也可能来自业务交互处理过程中的设计缺陷或 ...

  7. JavaScript 箭头函数（Lambda表达式）

    Lambda表达式(箭头函数)用于表示一个函数,所以它和函数一样,也拥有参数.返回值.函数体,但它没有函数名,所以Lambda表达式相当于一个匿名函数. 使用方法: ()=>{} 小括号里放参数 ...

  8. Linux运维---1.磁盘相关知识

    一 磁盘物理结构 (1) 盘片:硬盘的盘体由多个盘片叠在一起构成. 在硬盘出厂时,由硬盘生产商完成了低级格式化(物理格式化),作用是将空白的盘片(Platter)划分为一个个同圆心.不同半径的磁道(T ...

  9. 题解【[USACO05NOV]奶牛玩杂技】

    \[ \texttt{Description} \] 有 \(n\) 头牛,每头牛都有自己的体重 \(W_i\) 和力量 \(S_i\) . 将这 \(n\) 头牛摞在一起,每头牛的压扁指数定义为:压 ...

  10. HTML连载68-形变中心点、形变中心轴

    一. 形变中心点介绍 <style> ul li { width: 100px; height: 100px; list-style: none; float:left; margin:0 ...