js获取html元素的方式

html-css0156

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

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

js获取html添加的元素属性方法:先给这个元素设个ID,再用js获取这个ID的属性,即元素属性,实现案例如下:

<a id="link" href="前端学习" title="测试" blogname="前端开发">Web开发</a>

JS代码:

var ka=document.getElementByI d("link")

alert(ka.getAttribute("id"))//获取到Html标签的自定义属性

alert(ka.id)//获取到Html标签常规属性用

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<script>标签,输入js代码:$('body').append($('.name-price span').eq(0).find('b').text())。

3、浏览器运行index.html页面,此时通过jQuery取到了书名“数值分析”并打印了出来。