js获取html元素的方式

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、新建一个html文件，命名为test.html。

2、在test.html文件中，使用script标签加载jquery.min.js文件，成功加载该文件，才能使用jquery方法。

3、在js标签内，在页面加载完成时，获取body对象，使用append()方法向body动态添加一个div元素。

4、在test.html文件中，使用button标签创建一个按钮，按钮名称为“获取id值”。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getid（）函数。

6、在js标签内，创建getid()函数，在函数内，通过元素名称获得div对象，使用attr()方法获得动态添加div的id值，并使用alert()方法将值输出。

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

直接js代码：

document.getElementById("west").innerHtml="新的内容"

jquery代码:

$('#west').html('新的内容')

使用jquery可以比js更方便的 *** 作页面的元素，而且对浏览器ie6的兼容性好，建议使用jquery

---