JS如何获取某个DIV下的元素

JavaScript017

JS如何获取某个DIV下的元素,第1张

1、新建一个html文件,命名为test.html,用于讲解Jquery如何获得div下的元素。

2、在test.html文件内,使用div标签创建一个模块,在div内,使用p标签,span标签创建测试的内容。

3、在test.html文件内,设置div的id属性为divcon,主要用于下面通过该id获得div对象。

4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“获得div下的元素”。

5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行divfun()函数。

6、在js标签中,创建divfun()函数,在函数内,通过id(divcon)获得div对象,使用html()方法便可以获得div对象下面的元素了。最后,使用alert()方法输出元素。

7、在浏览器打开test.html文件,点击按钮,查看结果。

总结

1、创建一个test.html文件。

2、在文件内,在div标签内,使用p标签创建一行文字,同时创建一个button按钮,用于触发执行js函数。

3、在js标签内,创建函数,在函数内,使用getElementById()方法通过id(mydiv)获是div对象,再使用getElementsByTagName()方法获得div下面的p元素对象,最后,使用alert()方法输出p元素的内容。

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获取label标签的值的方法是:1,如果你的页面只有一个label标签,var a = document.getElementsByTagName("label")[0].innerText\x0d\x0a2,如果页面存在很多的label标签,而且不再一个一个父元素下,那么可以给label标签加一个id,比如,var a = document.getElementById("label_0").innerText\x0d\x0aJS获取DOM元素的方法:getElementById,getElementsByName,getElementsByTagName,getElementsByClassName(此方法不是所有浏览器多支持,不支持的时候自己可以写),querySelectorAll,querySelector\x0d\x0a不管楼主想获取几个label的值,方式都是一样的,还可以获取input的值,不过input的值写法是 var a = document.getElementsByTagName("input")[0].value这里是value而不是innerText