js获取html元素的方式

一、js获取html元素的方式

+通过ID获取：getElementById('id属性值')

+通过标签名：getElementsByTagName('标签名')

+通过类名：getElementsByClassName('类名')

+通过name属性：getElementsByName('name属性值')

+通过选择器获取一个元素：querySelector

+通过选择器获取一组元素：querySelectorAll

将获取到的html元素称为DOM节点对象，必须传参数，参数是string类型，是获取元素的id。返回值只获取到一个元素，没有找到返回null。

2.通过标签名：getElementsByTagName('标签名')

参数是是获取元素的标签名属性，不区分大小写，根据标签名获取html元素，返回的是一个数组(伪数组) 

通过类名：getElementsByClassName('类名')

参数是元素的类名，返回值是一个类数组，没有找到返回空数组。

通过类名：getElementsByClassName('类名')

必须传参数，参数是是获取元素的name属性，返回值是一个类数组，没有找到返回空数组。

通过选择器获取一个元素：querySelector

参数是选择器，返回值只获取到第一个元素。

通过选择器获取一组元素：querySelectorAll

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

二、js获取父级元素

1、首先创建一个div，里面再创建一个p元素，通过p元素来获取他的父元素div。

2、接下来我们用js来获取p元素。

3、这样我们就得到p元素，并获得了它的值，看看结果。

4、接下来我们就来获取这个p元素的父元素。

5、通过parentNode就能得到它的上一级元素了（父元素），同时我们打印了div中的html内容，看看结果。

三、js怎么获取xml里某个节点的值并输出

1、用 childNodes属性，按顺序取

实现过程：首先创建一个 xml对象，然后载入 xml文件，再根据待取节点父节点在 xml文件中的序号和本身的序号，确定待取节点的位置，最后返回待取节点的值。

functiongetXmlNodeValue(pId,cId){

varxmlDoc=newActiveXObject("Microsoft.XMLDOM");

xmlDoc.load("employeeInfo.xml");

varnodes=xmlDoc.documentElement.childNodes[pId].childNodes[cId];returnnodes.childNodes[0].text;

}

调用方法：alert(getXmlNodeValue(1, 2));

调用方法：alert(getXmlNodeValue(1, 2));

实现过程：首先创建一个 ie支持的xml对象，如果发生异常，是创建一个 FireFox支持的空 xml对象并返回空；然后载入 xml文件，如要发生异常也返回空；最后，通过 for循环遍历查找与传入的节点值相同的节点，找到后返回属于该节点的属性值。

//nodeValue待取节点的所属节点值

functiongetXmlNodeValueFor(nodeValue){

xmlDoc=newActiveXObject("Microsoft.XMLDOM");

xmlDoc=document.implementation.createDocument("","",null);

xmlDoc.load("employeeInfo.xml");

varxd=xmlDoc.documentElement.childNodes;

for(vari=0;i<xd.length;i++){

if(xd[i].childNodes[0].childNodes[0].nodeValue==nodeValue)tempValue=xd[i].childNodes[2].childNodes[0].nodeValue;

}

调用方法：alert(getXmlNodeValueFor("王佳琳"));

调用方法：alert(getXmlNodeValueFor("王佳琳"));