JavaScript实例详解之HTML元素操作 _生活百科

本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于html元素操作的相关问题，包括了怎么获取操作的元素、操作元素的内容、元素的属性以及样式等等，希望对大家有帮助。

文章插图

相关推荐：javascript教程

一、获取操作的元素

document对象的方法和属性document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。

文章插图

总结
除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。若要获取其中一个对象，可以通过下标的方式获取，默认从0开始。
document对象提供一些属性，可用于获取文档中的元素。例如，获取所有表单标签、图片标签等。

文章插图

document对象的body属性用于返回body元素。 document对象的documentElement属性用于返回HTML文档的根节点html元素。注意
通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。如document.getElementsByTagName(‘body’)[0]与document.body全等。

文章插图

HTML5新增的document对象方法
HTML5中为更方便获取操作的元素，为document对象新增了两个方法，分别为querySelector()和querySelectorAll() 。

querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。 querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。由于这两个方法的使用方式相同，下面以document.querySelector()方法为例演示。
Element对象的方法和属性
在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName() 。它们的使用方式与document对象中同名方法相同。

文章插图

除此之外，元素对象还提供了children属性用来获取指定元素的子元素。例如，获取上述示例中ul的子元素。

文章插图

元素对象的children属性返回的也是对象集合，若要获取其中一个对象，也需通过下标的方式获取，默认从0开始。另外， document对象中也有children属性，它的第一个子元素通常是html元素。 HTMLCollection对象

HTMLCollection对象：通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。 NodeList对象：document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象， IE11返回的是HTMLCollection对象。 HTMLCollection与NodeList对象的区别：

HTMLCollection对象用于元素操作。 NodeList对象用于节点操作。 【JavaScript实例详解之HTML元素操作】提示：对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。

文章插图

二、元素内容

JavaScript中，若要对获取的元素内容进行操作，则可以利用DOM提供的属性和方法实现。

文章插图

属性属于Element对象，方法属于document对象。 innerHTML在使用时会保持编写的格式以及标签样式。 innerText则是去掉所有格式以及标签的纯文本内容。 textContent属性在去掉标签后会保留文本格式。举个例子

文章插图

代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素内容操作</title> </head> <body> <p id="box"> The first paragraph... <p> The second paragraph... <a href=https://www.52zixue.com/zhanzhang/webqd/js/04/07/69087/"http://www.example.com">third