15DOM之获取元素方法

技术交流QQ群:1027579432，欢迎你的加入！

1.DOM简介

文档对象模型(Document Object Model,简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

2.DOM树

文档：一个页面就是一个文档，DOM中使用document表示。
元素：页面中的所有标签都是元素，DOM中使用element表示。
节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示。
DOM把以上内容都看成是对象。

3.获取元素

如何获取页面中的元素？

DOM在实际开发中主要用来操作元素，我们如何来获取页面中的元素呢？获取页面中的元素可以使用下面的几种方法：
- 根据ID获取；
- 根据标签名获取；
- 通过HTML5新增的方法获取；
- 特殊元素获取；

根据ID获取

使用document.getElementById(‘id属性值’)方法获取带有ID的元素对象。

<div id="time">2020-02-16</div>
<script>
// 注意：因为文档页面从上往下加载，所以先得有标签，所以script标签写在div标签下面！
// 方法1：根据ID获取元素
var timer = document.getElementById('time');  // 接收的是一个字符串
console.log(timer);
console.log(typeof timer);  // 返回的是一个元素对象
console.dir(timer); // 打印返回的元素对象，更好的查看里面的属性和方法
</script>

根据标签名获取

使用document.getElementsByTagName(‘标签名’)方法可以返回带有指定标签名的对象的集合。
使用element.getElementsByTagName(‘标签名’)方法可以带有指定标签名的某些元素对象。
由于得到的是一个对象的集合，所以想要操作里面的元素就需要遍历。

得到的元素对象是动态的。

<ul><li>知否知否应是绿肥红瘦</li><li>知否知否应是绿肥红瘦</li><li>知否知否应是绿肥红瘦</li><li>知否知否应是绿肥红瘦</li><li>知否知否应是绿肥红瘦</li>
</ul><ul id='nav'><li>库里</li><li>库里</li><li>库里</li><li>库里</li><li>库里</li>
</ul><script>// 方法2：根据标签名获取var lis = document.getElementsByTagName('li');  // 接收的是一个字符串console.log(lis);  // 返回的是元素对象的集合，以伪数组的形式存储的console.log(lis[0]);// 依次打印里面的元素对象，使用遍历的方法for (var i = 0; i < lis.length; i++) {console.log(lis[i]);}// element.getElementsByTagName()：可以得到这个元素里面的某些标签var nav = document.getElementById('nav');  // 获取id='nav'的ul标签var res = nav.getElementsByTagName('li');console.log(res);
</script>

根据HTML5新增的方法获取元素

通过document.getElementsByClassName(‘类名’)的方法返回元素对象集合；
通过document.querySelector(‘选择器’)的方法指定选择器返回第一个元素对象；

通过document.querySelectorAll(‘选择器’)的方法指定选择器返回所有元素对象；

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="navs">
<ul><li>首页</li><li>产品</li>
</ul>
</div><script>// 方法3：根据H5新增的方法获取元素：getElementByClassName('类名')var boxs = document.getElementsByClassName('box');console.log(boxs);// 根据H5新增的方法获取元素：querySelector('选择器')：返回指定选择器的第一个元素对象，切记! 里面的选择器需要加符号，例如.box #navs等var firstBox = document.querySelector('.box');console.log(firstBox);var navs = document.querySelector('#navs');console.log(navs);var li = document.querySelector('li');console.log(li);// 根据H5新增的方法获取元素：querySelectorAll('选择器')：返回指定选择器的所有元素对象var box = document.querySelectorAll('.box');console.log(box);var lis = document.querySelectorAll('li');console.log(lis);
</script>

根据特殊元素(body、html)获取元素

获取body元素：通过document.body方法得到body元素对象；

获取html元素：通过document.documentElement方法得到html元素对象；

// 方法4：根据特殊元素获取元素
// 获取body元素
var body = document.body;
console.log(body);
console.dir(body);
// 获取html元素
var html = document.documentElement;
console.log(html);
console.dir(html);

4.资料下载

笔记及代码，欢迎star,follow,fork…

15DOM之获取元素方法相关推荐

JavaScript 获取元素方法
仅供学习,转载请注明出处获取元素方法一可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如 ...
Web APIs /APIs --DOM简述/DOM中获取元素方法/事件（含鼠标事件）/操作（含案例）
Web APIs Web APIs 和 JS 的关联性: Web APIs是 W3C 组织的标准,主要学习DOM 和 BOM Web APIs是 JS 所独有的部分主要学习页面交互功能 Web AP ...
Web页面获取元素方法-selenium3 UI自动化
这里写目录标题简介 1.网页基本元素 2.八大元素定位法则 1.id 2.name 3.link text 4.partial link text 5.classname 6.tagname 7.c ...
js 获取元素的几种方法
获取元素/节点/标签的几点方法 getElementById getElementsByTagName getElementsByName getByClass √ / ...
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
在ajax中经常需要对元素的位置进行精确的定位,此时不仅需要获取元素自身的大小位置等属性.还需要知道页面.浏览器.滚动条等的长度和宽度.因为浏览器的兼容问题,如果使用javascript获取这些数值是 ...
通过js获取元素css3的transform rotate旋转角度方法
我们再试用jquery获取样式的时候是通过$('domName').css('transform'):的方式来获取元素的css样式,但是通过它获取到的css3的transform属性是以矩阵的方式呈现 ...
js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JQuery获取元素的N种方法
一.根据标签属性或属性值获取 1.根据属性获取元素比如要获取页面p标签中属性有id的元素代码如下: $("p[id]").css("color"," ...
JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...