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文件，命名为testhtml。

2、在testhtml文件内，创建一个div模块，并设置其id属性为mydiv，用于下面使用js获得标签对象。

3、在testhtml文件内，在div标签内，填写一段文字，并加入一个span标签。

4、在testhtml文件内，创建一个button按钮，按钮名称为“获取html”。

5、给button绑定onclick点击事件，当按钮被点击时，执行myfun()函数。

6、在testhtml文件内，在js标签内，创建myfun（）函数，在函数内，使用getElementById（）方法获得div对象，通过innerHMTL属性获得div内的html内容，最后，使用alert方法将获得的html内容以d窗形式显示

7、在浏览器打开testhtml文件，点击按钮，查看获得的html标签内容。

有原生DOM获取以及用js库比如jquery

原生DOM的话首先获取标签对象，id或者name或其他

例：

<p id="targetp" >2333333</p><script>

    var element = documentgetElementById("targetp");

    var tagname = elementtagName;

    alert(tagname);

</script>

jQuery获取

$("#content-header")get(0)tagName

如果已经获取到对象可以直接获取标记名

<p onclick="alert('您单击的是：'+thistagName);">中华人民共和国</p>

貌似$("ul li a")这样写是不行的吧？

如下可以得到第一个li，在first变量里。

$("a")click(function(){

var first = $(this)parent()next()find("li")first();

})

1、查找子元素方式1：>\x0d\例如：var aNods = $("ul > a");查找ul下的所有a标签\x0d\2、查找子元素方式2：children()\x0d\3、查找子元素方式3：find()\x0d\\x0d\通过下标获取第n个子标签的ID值\x0d\\x0d\1var num1=$("ul > a:eq(0)")attr("ID");\x0d\2var num2=$("ul")children("a:eq(0)")attr("ID");\x0d\3var num3=$("ul")find("a:eq(0)")attr("ID");

jquery获取标签名称:

jquery tagName prop()

如果想看某个元素是什么元素类型，只需要使用：

[object]attr("tagName")便可获取。

以上就是关于js获取html元素的方式全部的内容，包括:js获取html元素的方式、js 获取 html标签、如何用JS获取html元素的标记名等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！