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、在浏览器中打开要调试的网页，然后点击”F12 Developer Tools“，也可以使用快捷键F12。

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

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

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

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

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

一般用原生js、jQuery获取html元素的值。<div id="test">数值</div>

原生js写法：

alert(document.getElementById('test').innerHTML)//数值

jQuery写法：

alert($('#test').html())//数值

拓展资料

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

---