js获取html元素的方式

html-css023

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

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

/* 

* 取得对应类和标签的HTML元素 

* clsName:给定类名 

* tagName：给定的HTML元素，如果为任意 tagName='*' 

*  

*/  

function getElementsByClassName(clsName, tagName) {  

    var ClassElements = []  

    selElements = document.getElementsByTagName(tagName)  

  

    for (var i = 0 i < selElements.length i++) {  

        if (selElements[i].className == clsName) {  

            ClassElements[ClassElements.length] = selElements[i]  

        }  

    }  

    return ClassElements  

}