js获取html元素的方式

JavaScript026

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"菜单。