摘要:对象提供了属性和方法实现定位页面元素功能,这也是的标准规范中对象的主要应用之一。是返回值,表示定位元素的集合,是一个集合。定位匹配选择器的第一个元素。方法定位页面元素所返回的集合就是静态集合。
Document 对象提供了属性和方法实现定位页面元素功能,这也是 DOM 的标准规范中 Document 对象的主要应用之一。
定位页面元素方法目前 Document 对象提供实现定位页面元素的方法具有如下几种:
getElementById()方法:通过页面元素的 id 属性值定位元素。
getElementsByName()方法:通过页面元素的 name 属性值定位元素。
getElementsByTagName()方法:通过页面元素的元素名定位元素。
getElementsByClassName()方法:通过页面元素的 class 属性值定位元素。
querySelector()方法:通过 CSS 选择器定位第一个匹配的元素。
querySelectorAll()方法:通过 CSS 选择器定位所有匹配的元素。
接下来,我们就一一进行学习。
通过元素的 ID 属性值定位元素HTML 页面元素的 id 属性的特点是唯一、不可重复的,所以通过这种方式定位的 HTML 页面元素也是唯一的。
其语法格式如下:
element = document.getElementById(id);
在上述语法中,id 是参数,表示所要定位元素的 id 属性值,是一个大小写敏感的字符串。element 是返回值,表示定位的元素,是一个 Element 对象。
值得注意的是: 如果 HTML 页面中不存在具有该 id 属性值的元素,则返回 null。
下面是使用 getElementById() 方法的示例代码:
var btn = document.getElementById("btn"); // 获取定位元素的 class 属性值 var className = btn.className; // 添加 animate 动画样式 className += " animate"; // 将新的 class 属性值设置 btn.className = className;
上述代码通过 getElementById() 方法定位 HTML 页面中 id 属性值为 btn 的元素,并为其元素的 class 属性添加 animate 样式。
通过元素的 name 属性值定位元素完整示例代码请点击右边的链接: getElementById()方法完整示例代码
其语法格式如下:
elements = document.getElementsByName(name);
在上述语法中,name 是参数,表示所要定位元素的 name 属性值,是一个大小写敏感的字符串。elements 是返回值,表示定位元素的集合,是一个 NodeList 集合。
下面是使用 getElementsByName() 方法的示例代码:
var elems = document.getElementsByName("btn"); // 循环遍历所有元素 for (var i=0; i上述代码通过 getElementsByName() 方法定位 HTML 页面中 name 属性值为 btn 的元素,并遍历所有得到的元素,为其元素的 class 属性添加 animate 样式。
通过元素的元素名定位元素完整示例代码请点击右边的链接: getElementsByName()方法完整示例代码
其语法格式如下:
elements = document.getElementsByTagName(name);在上述语法中,name 是参数,表示所要定位元素的元素名,符号”*”表示所有元素。elements 是返回值,表示定位元素的集合,是一个 NodeList 集合。
下面是使用 getElementsByTagName() 方法的示例代码:
var elems = document.getElementsByTagName("button"); // 循环遍历所有元素 for (var i=0; i上述代码通过 getElementsByTagName() 方法定位 HTML 页面中元素名为 button 的元素,并遍历所有得到的元素,为其元素的 class 属性添加 animate 样式。
通过元素的 class 属性值定位元素完整示例代码请点击右边的链接: getElementsByTagName()方法完整示例代码
其语法格式如下:
elements = document.getElementsByClassName(names);在上述语法中,names 是参数,表示所要定位元素的 class 属性值列表,class 名称通过空格分隔。
值得注意的是: names 参数可以是一个样式属性名称,也可以是多个样式属性名称。
elements 是返回值,表示定位元素的集合,是一个 NodeList 集合。
下面是使用 getElementsByClassName() 方法的示例代码:
var elems = document.getElementsByClassName("btn"); // 循环遍历所有元素 for (var i=0; i上述代码通过 getElementsByClassName() 方法定位 HTML 页面中 class 属性值为 btn 的元素,并遍历所有得到的元素,为其元素的 class 属性添加 animate 样式。
兼容 IE 8 及之前版本的浏览器完整示例代码请点击右边的链接: getElementsByClassName()方法完整示例代码
getElementsByClassName() 方法只支持 IE 9 版本及之后版本的浏览器。也就是说,该方法并不支持 IE 8 及之前版本的浏览器。
下图是不同浏览器的不同版本对 getElementsByClassName() 方法的支持情况:
由于国内的生产环境中,依旧存在使用 IE 8 及之前版本浏览器的情况。所以,我们需要自定义 getElementsByClassName() 方法解决浏览器的兼容问题。
function getElementsByClassName(element, names) { }上述自定义兼容方法接受两个参数,element 参数表示调用 getElementsByClassName() 方法的对象(目前为 Document 对象),names 参数表示所要定位元素的 class 属性值列表。
function getElementsByClassName(element, names) { // 检测 getElementsByClassName() 是否可用 if (element.getElementsByClassName) { // 优先使用 W3C 规范 return element.getElementsByClassName(names); }else { // 人为解决 IE 8 之前版本不兼容问题 } }这里我们要优先使用 W3C 规范的方法。所以,需要先判断当前浏览器环境是否存在 getElementsByClassName() 方法。
如果存在,就使用原本的 getElementsByClassName() 方法。如果不存在,就使用自定义代码来实现。
function getElementsByClassName(element, names) { // 检测 getElementsByClassName() 是否可用 if (element.getElementsByClassName) { // 优先使用 W3C 规范 return element.getElementsByClassName(names); }else { // 人为解决 IE 8 之前版本不兼容问题 // 获取所有后代元素节点 var elements = element.getElementsByTagName("*"); // 定义空数组 var result = []; var element, classNameStr, flag; // 将样式名称改为数组类型 names = names.split(" "); // 循环遍历所有元素节点 for (var i=0; element = elements[i]; i++) { // 获取每个元素节点的样式名称 classNameStr = " " + element.className + " "; // 开启开关 flag = true; // 循环遍历所有的样式名称 for (var j=0, name; name = names[j]; j++) { // 判断当前元素节点的样式名称中是否包含指定的样式名称 if (classNameStr.indexOf(" " + name + " ") == -1){ // 如果不包含,则关闭开关,并且结束循环 flag = false; break; } } // 判断当前元素节点是否包含指定样式名称 if (flag) { // 如果包含,则将当前元素节点添加到数组中 result.push(element); } } // 返回数组(所有包含指定样式名称的元素节点) return result; } }通过 CSS 选择器定位元素CSS 中的选择器可以很便利地定位 HTML 页面元素,DOM 的标准规范中也提供类似的方法。
querySelector(): 定位匹配选择器的第一个元素。
querySelectorAll(): 定位匹配选择器的所有元素。
querySelector() 方法其语法格式如下:
element = document.querySelector(selectors);在上述语法中,selectors 是参数,表示选择器,可以包含一个或多个 CSS 选择器,多个则以逗号分隔。element 是返回值,表示定位元素的集合,匹配的第一个元素。
下面是使用 querySelector() 方法的示例代码:
var btn = document.querySelector(’#btn"); // 获取定位元素的 class 属性值 var className = btn.className; // 添加 animate 动画样式 className += " animate"; // 将新的 class 属性值设置 btn.className = className;上述代码通过 querySelector() 方法定位 HTML 页面中 id 属性值为 btn 的元素,并为其元素的 class 属性添加 animate 样式。
querySelectorAll() 方法完整示例代码请点击右边的链接: querySelector()方法完整示例代码
其语法格式如下:
elements = document.querySelectorAll(selectors);在上述语法中,selectors 是参数,表示选择器,可以包含一个或多个 CSS 选择器,多个则以逗号分隔。elements 是返回值,表示定位元素的集合,是一个 NodeList 集合。
下面是使用 querySelectorAll() 方法的示例代码:
var elems = document.querySelectorAll("button"); // 循环遍历所有元素 for (var i=0; i上述代码通过 querySelectorAll() 方法定位 HTML 页面中元素名为 button 的元素,并遍历所有得到的元素,为其元素的 class 属性添加 animate 样式。
节点集合 NodeList完整示例代码请点击右边的链接: querySelectorAll()方法完整示例代码
NodeList 是一组元素节点的集合,每个节点具有相应的索引值(从 0 开始的数字,类似于数组)。
元素节点在 NodeList 集合中存储的顺序与它们在 HTML 页面中的顺序保持一致。
NodeList 的属性 length 表示 NodeList 对象中包含的节点个数。方法 item(index) 表示返回 NodeList 对象中指定索引的节点。如果索引值越界,则返回 null。
NodeList 集合分为两种: 动态 NodeList 和静态 NodeList。
动态的 NodeList 集合所谓动态的 NodeList 集合,就是如果文档中的节点树发生变化,则已经存在的 NodeList 对象也可能会变化。
以下几种定位 HTML 页面元素的方法返回的都是动态的 NodeList 集合。
getElementsByName()方法:通过页面元素的 name 属性值定位元素。
getElementsByTagName()方法:通过页面元素的元素名定位元素。
getElementsByClassName()方法:通过页面元素的 class 属性值定位元素。
我们可以通过以下示例代码,体验动态 NodeList 集合的特点:
var elems = document.getElementsByTagName("button"); console.log(elems.length);// 输出 3 // 添加一个新的button按钮 var btn = document.createElement("button"); btn.setAttribute("class","button"); var text = document.createTextNode("New Button"); btn.appendChild(text); var div = document.getElementsByClassName("button-group")[0]; div.appendChild(btn); console.log(elems.length);// 输出 4上述代码通过 getElementsByTagName() 方法定位 HTML 页面中所有的 button 元素,测试打印 button 元素的个数是 3 个。
然后,我们创建一个新的 button 元素,并且将其添加到 HTML 页面中,再测试打印 button 元素的个数是 4 个。
静态 NodeList 集合值得注意的是: 我们在第二次测试打印 button 元素的个数时,并没有重新定位 HTML 页面中的 button 元素。
完整示例代码请点击右边的链接: 动态 NodeList 集合完整示例代码
所谓静态 NodeList 集合,就是对文档对象模型的任何改动都不会影响集合的内容。
querySelectorAll() 方法定位 HTML 页面元素所返回的 NodeList 集合就是静态 NodeList 集合。
我们可以通过以下示例代码,体验静态 NodeList 集合的特点:
var elems = document.querySelectorAll("button"); console.log(elems.length);// 输出 3 // 添加一个新的button按钮 var btn = document.createElement("button"); btn.setAttribute("class","button"); var text = document.createTextNode("New Button"); btn.appendChild(text); var div = document.getElementsByClassName("button-group")[0]; div.appendChild(btn); console.log(elems.length);// 输出 3上述代码通过 querySelectorAll() 方法定位 HTML 页面中所有的 button 元素,测试打印 button 元素的个数是 3 个。
然后,我们创建一个新的 button 元素,并且将其添加到 HTML 页面中,再测试打印 button 元素的个数依旧是 3 个。
定位页面元素属性完整示例代码请点击右边的链接: 静态 NodeList 集合完整示例代码
Document 对象也提供了一些属性,来定位 HTML 页面中一些比较特殊的元素。
documentElement:获取 HTML 页面中的 元素。
head:获取 HTML 页面中的 元素。
title:获取 HTML 页面中的
元素。 body:获取 HTML 页面中的 元素。
images:获取 HTML 页面中的所有 元素。
我们可以定义一个包含以上元素的 HTML 页面,然后通过以下示例代码进行测试:
console.log(document.documentElement); console.log(document.head); console.log(document.body); console.log(document.title); console.log(document.links); console.log(document.images);本教程免费开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。
本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/84063.html
摘要:对象提供了属性和方法实现定位页面元素功能。定位匹配选择器的第一个元素。是返回值,表示定位元素的集合,是一个集合。下面是使用方法的示例代码循环遍历所有元素上述代码通过方法定位页面中元素名为的元素,并遍历所有得到的元素,为其元素的属性添加样式。 Element 对象提供了属性和方法实现定位页面元素功能。该对象与 Document 对象提供的属性和方法实现定位页面元素功能的区别在于,Docu...
摘要:简单来说,节点作为树结构中的连接点,最终构成了完整的树结构。节点树结构通过节点概念,我们可以将原本的树结构改成节点树结构进行表示。节点之间的关系中的表示模型,也可以用来表示节点树结构中节点之间的关系。值得注意的是和元素并不是兄弟关系。 DOM 树结构 DOM 之所以可以访问和更新 HTML 页面中的内容、结构和样式,是因为 DOM 将 HTML 页面解析为一个 树结构。 例如下面这段代...
摘要:回顾什么是内联样式所谓内联样式,就是通过页面元素的属性为当前元素定义样式。对象提供的属性和方法可以帮助我们获取样式的具体内容。遍历对象由于对象具有属性,返回该对象的属性的数量。方法通过获取的样式属性名,这种方式也可以通过方式进行替换。 回顾什么是内联样式 所谓内联样式,就是通过 HTML 页面元素的 style 属性为当前元素定义 CSS 样式。 以下代码示例,就是通过 style 属...
摘要:系列教程是一套免费开源,任何人都可以免费学习分享,甚至可以进行修改。本文是这套系列教程的索引也就是目录第一回介绍在最开始,我们先来了解是什么的作用,以及浏览器的支持是怎么样的。 《EASYDOM》系列教程是一套免费、开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。 本文是这套系列教程的索引(也就是目录): 第一回 DOM 介绍 在最开始,我...
摘要:对象的作用对象作为访问和更新页面内容的入口。这个结果充分地说明了对象在的标准规范中代表整个页面。对象的继承链对象是继承于对象的。对象也是的标准规范中非常重要的对象之一,而对象又是继承于对象。 Document 对象是 DOM 的标准规范中比较重要的对象之一。该对象提供了访问和更新 HTML 页面内容的属性和方法。 Document 对象的作用 Document 对象作为 DOM 访问和...
阅读 3468·2021-11-18 10:07
阅读 1540·2021-11-04 16:08
阅读 1481·2021-11-02 14:43
阅读 1067·2021-10-09 09:59
阅读 815·2021-09-08 10:43
阅读 1019·2021-09-07 09:59
阅读 933·2019-12-27 11:56
阅读 925·2019-08-30 15:56