js获取html元素的方式

JavaScript021

js获取html元素的方式,第1张

js获取html元素的方式

+通过ID获取:getElementById('id属性值')

+通过标签名:getElementsByTagName('标签名')

+通过类名:getElementsByClassName('类名')

+通过name属性:getElementsByName('name属性值')

+通过选择器获取一个元素:querySelector

+通过选择器获取一组元素:querySelectorAll

1.获取id值为d1的html元素

将获取到的html元素称为DOM节点对象,必须传参数,参数是string类型,是获取元素的id。返回值只获取到一个元素,没有找到返回null。

2.通过标签名:getElementsByTagName('标签名')

参数是是获取元素的标签名属性,不区分大小写,根据标签名获取html元素, 返回的是一个数组(伪数组) 

通过类名:getElementsByClassName('类名')

参数是元素的类名,返回值是一个类数组,没有找到返回空数组。

通过类名:getElementsByClassName('类名')

必须传参数,参数是是获取元素的name属性,返回值是一个类数组,没有找到返回空数组。

通过选择器获取一个元素:querySelector

参数是选择器,返回值只获取到第一个元素。

通过选择器获取一组元素:querySelectorAll

参数是选择器,返回值是一个数组。

1、在浏览器中打开要调试的网页,然后点击”F12 Developer Tools“,也可以使用快捷键F12。

2、弹出的工具窗口中,默认选择是Dom Explorer功能,它会列出网页的源代码和CSS样式列表。

3、使用元素定位功能选择页面中的一个元素,也会定位到源代码中位置。

4、对定位到的文字修改CSS样式,添加inline style,比如把字体变为红色。

5、查看元素已经应用的CSS样式,点击"computed"菜单。

6、然后查看元素的布局信息,点击"Layout"菜单。

使用jquery比较简单:\x0d\x0a1、引入jquery库文件\x0d\x0a2、在a.html页面的head部分加入脚本:\x0d\x0a$(function(){\x0d\x0a$("#show_b").load("b.html", function(response){\x0d\x0a$(this).append(response)\x0d\x0a\x0d\x0a})\x0d\x0a\x0d\x0a})\x0d\x0a 回答于 2022-11-16