大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

JavaScript中HTML元素操作的示例分析

小编给大家分享一下JavaScript中HTML元素操作的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

10年积累的成都做网站、成都网站设计、成都外贸网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有佛山免费网站建设让你可以放心的选择与我们合作。

一、获取操作的元素

document对象的方法和属性

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

JavaScript中HTML元素操作的示例分析

总结

除了document.getElementById()方法返回的是拥有指定id的元素外,其他方法返回的都是符合要求的一个集合。若要获取其中一个对象,可以通过下标的方式获取,默认从0开始。

document对象提供一些属性,可用于获取文档中的元素。例如,获取所有表单标签、图片标签等。

JavaScript中HTML元素操作的示例分析

JavaScript中HTML元素操作的示例分析

  • document对象的body属性用于返回body元素。

  • document对象的documentElement属性用于返回HTML文档的根节点html元素。

注意

通过document对象的方法与document对象的属性获取的操作元素表示的都是同一对象。如document.getElementsByTagName(‘body’)[0]与document.body全等。

JavaScript中HTML元素操作的示例分析

HTML5新增的document对象方法

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

  • querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。

  • querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。

由于这两个方法的使用方式相同,下面以document.querySelector()方法为例演示。

Element对象的方法和属性

在DOM操作中,元素对象也提供了获取某个元素内指定元素的方法,常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。

JavaScript中HTML元素操作的示例分析

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

JavaScript中HTML元素操作的示例分析

  • 元素对象的children属性返回的也是对象集合,若要获取其中一个对象,也需通过下标的方式获取,默认从0开始。

  • 另外,document对象中也有children属性,它的第一个子元素通常是html元素。

HTMLCollection对象

  • HTMLCollection对象:通过document对象或Element对象调用getElementsByClassName()方法、getElementsByTagName()方法、children属性等返回的对象集。

  • NodeList对象:document对象调用getElementsByName()方法在Chrome和FireFox浏览器中返回的是NodeList对象,IE11返回的是HTMLCollection对象。

HTMLCollection与NodeList对象的区别:

  • HTMLCollection对象用于元素操作。

  • NodeList对象用于节点操作。

提示:对于getElementsByClassName()方法、getElementsByTagName()方法和children属性返回的集合中可以将id和name自动转换为一个属性。

JavaScript中HTML元素操作的示例分析

二、元素内容

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

JavaScript中HTML元素操作的示例分析

  • 属性属于Element对象,方法属于document对象。

  • innerHTML在使用时会保持编写的格式以及标签样式。

  • innerText则是去掉所有格式以及标签的纯文本内容。

  • textContent属性在去掉标签后会保留文本格式。

举个例子

JavaScript中HTML元素操作的示例分析

代码实现

	
	
	
	
	元素内容操作
	
	
	
	The first paragraph...
	

The second paragraph... third

注意

innerText属性在使用时可能会出现浏览器兼容的问题。因此,推荐在

开发时尽可能的使用innerHTML获取或设置元素的文本内容。同时,innerHTML属性和document.write()方法在设置内容时有一定的区别,前者作用于指定的元素,后者则是重构整个HTML文档页面。因此,读者在开发中要根据实际的需要选择合适的实现方式

【案例】改变盒子大小

JavaScript中HTML元素操作的示例分析

代码实现思路

① 编写HTML,设置p的大小。

② 根据用户的点击次数完成盒子大小的改变。

③ 单击的次数为奇数时,盒子都变大,单击次数为偶数时,盒子都变小。

代码实现

	
	
	
	
	
	
	
	

三、元素属性

在DOM中,为了方便JavaScript获取、修改和遍历指定HTML元素的相关属性,提供了操作的属性和方法。

JavaScript中HTML元素操作的示例分析

利用attributes属性可以获取一个HTML元素的所有属性,以及所有属性的个数length。

举个例子

JavaScript中HTML元素操作的示例分析

代码实现

	
	
	
	
	元素属性操作
	
	
	
	

test word.

四、元素样式

回顾:通过元素属性的操作修改样式。

元素样式语法:style.属性名称。

要求:需要去掉CSS样式名里的中横线“-”,并将第二个英文首字母大写。

举例:设置背景颜色的background-color,在style属性操作中,需要修改为backgroundColor。

JavaScript中HTML元素操作的示例分析

JavaScript中HTML元素操作的示例分析

注意

CSS中的float样式与JavaScript的保留字冲突,在解决方案上不同的浏览器

存在分歧。例如IE9——11、Chrome、FireFox可以使用“float”和“cssFloat”,Safari浏览器使用“float”,IE6~8则使用“styleFloat”。

问题:一个元素的类选择器可以有多个,在开发中如何对选择器列表进行操作?

原来的解决方案:利用元素对象的className属性获取,获取的结果是字符型,然后再根据实际情况对字符串进行处理。

HTML5提供的办法:新增的classList(只读)元素的类选择器列表。

举例:若一个p元素的class值为“box header navlist title”,如何删除header?

HTML5解决方案:p元素对象.classList.toggle(“header”);

举个例子

JavaScript中HTML元素操作的示例分析

代码实现

	
	
	
	
	classList的使用
	
	
	
	
  • PHP
  • JavaScript
  • C++
  • Java

除此之外,classList属性还提供了许多其他相关操作的方法和属性。

JavaScript中HTML元素操作的示例分析

五、【案例】标签栏切换效果

JavaScript中HTML元素操作的示例分析

代码实现思路

  • ① 编写HTML,实现标签栏的结构与样式的设计,其中class等于current表示当前显示的标签,默认是第一个标签。

  • ② 获取所有的标签与标签对应的显示内容。

  • ③ 遍历并为每个标签添加鼠标滑过事件,在事件的处理函数中,遍历标签对应的所有显示内容,当鼠标滑过标签时,通过classList的add()方法添加current,否则通过remove()方法移出current。

代码实现

	
	
	
	
	标签栏切换效果
	
	
	
	
	
	标签一

标签二

标签三

标签四

 1 

 2 

 3 

 4 

以上是“JavaScript中HTML元素操作的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


分享题目:JavaScript中HTML元素操作的示例分析
浏览地址:http://dzwzjz.com/article/pcjjds.html
在线咨询
服务热线
服务热线:028-86922220
TOP