JavaScript学习笔记：JavaScript获取元素：id,标签名，类名，querySelector,querySelectorall,获取body,html

1、根据ID获取元素

● 语法：document.getElementById(id)
● 作用：根据ID获取元素对象
● 参数：id值，区分大小写的字符串
● 返回值：元素对象或 null
案例代码：

<body><div id="time">2022-2-13</div><script>// 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面var timer = document.getElementById('time');console.log(timer);//<div id="time">2022-2-13</div>console.log(typeof timer);//object</script>
</body>

2、根据标签名获取元素

● 语法：document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标签名’)
● 作用：根据标签名获取元素对象
● 参数：标签名
● 返回值：元素对象集合（伪数组，数组元素是元素对象）
案例代码：

<body><ul><li>11</li><li>22</li><li>33</li><li>44</li><li>55</li></ul><ul id="nav"><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li></ul><script>// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的var lis = document.getElementsByTagName('li');console.log(lis);//获取过来元素对象的集合console.log(lis[0]);//<li>11</li>// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式for (var i = 0; i < lis.length; i++) {console.log(lis[i]);//<li>11</li>...<li>55</li>}// 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签var nav = document.getElementById('nav'); // 这个获得nav 元素var navLis = nav.getElementsByTagName('li');console.log(navLis);//获取过来元素对象的集合</script>
</body>

3、H5新增获取元素方式

● document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
● document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
● document.querySelectorAll(‘选择器’); // 根据指定选择器返回
案例代码：

<body><div class="box">盒子1</div><div class="box">盒子2</div><div id="nav"><ul><li>首页</li><li>产品</li></ul></div><script>// 1. getElementsByClassName 根据类名获得某些元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #navvar firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);var li = document.querySelector('li');console.log(li);// 3. querySelectorAll()返回指定选择器的所有元素对象集合var allBox = document.querySelectorAll('.box');console.log(allBox);var lis = document.querySelectorAll('li');console.log(lis);</script>
</body>

4、获取特殊元素

案例代码：

    // 1.获取body 元素var bodyEle = document.body;console.log(bodyEle);console.dir(bodyEle);// 2.获取html 元素// var htmlEle = document.html;//此方法错误var htmlEle = document.documentElement;console.log(htmlEle);

JavaScript学习笔记：JavaScript获取元素：id,标签名，类名，querySelector,querySelectorall,获取body,html相关推荐

JAVASCRIPT学习笔记----Javascript引用类型
引用类型的值(对象)是引用类型的一个实例,引用类型是一种数据结构. (一)Object类型 1.创建方式 1 //第一种:new Object() 2 var person = new Object( ...
JavaScript 学习笔记（二）
JavaScript 学习笔记(二) 文章目录 JavaScript 学习笔记(二) 一 JSON 1. JSON 对象什么是JSON对象 JSON对象与Javascript对象的区别在JavaS ...
Web前端学习笔记——JavaScript之WEBAPI、BOM、DOM及获取页面元素
Web API介绍 API的概念 API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
JavaScript学习（七）—元素节点的获取方式
JavaScript学习(七)-元素节点的获取方式 1.利用标签名获取 var 变量名称= document.getElementsByTagName("标签名称"); 返回值:为 ...
JavaScript学习笔记之DOM篇，带你全面了解什么是DOM
DOM在前面的JavaScript学习笔记(一)–JS基础里简单提到过,它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型,是JavaScript的重要组成部分,现在带大家详细了解 ...
《JavaScript学习笔记》
JavaScript编程语言 1.1.编程编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序:就是计算机所执行的一系列的指令集和,而程序都是用我们 ...
JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
千锋JavaScript学习笔记
千锋JavaScript学习笔记文章目录千锋JavaScript学习笔记写在前面 1. JS基础 1.1 变量 1.2 数据类型 1.3 数据类型转换 1.4 运算符 1.5 条件 1.6 循环 ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...