<辅助>每个节点的三个属性 nodeName,nodeType,nodeValue
nodeType:标签的nodeoType是1,属性为2,内容为3
下面是演示三种获取html节点的方法:
<!DOCTYPE html> <html> <head> <!-- 获取节点的方法 1。getElementById 获取对 ID 标签属性为指定值的第一个对象的引用 2.getElementsByName 根据 NAME 标签属性的值获取对象的集合。 3.getElementsByTagName 获取基于指定元素名称的对象集合。 每个节点的三个属性 nodeName,nodeType,nodeValue --!> <title>dom_1.html</title> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript">
// 1,getElementById function getNode1(){ var a=document.getElementById("divid");//通过节点的id获取该节点对象 // alert(a); alert(a.nodeName+","+a.nodeType+","+a.nodeValue);//div 节点的名称 //标签的nodeoType是1,属性为2,内容为3 //nodeValue 标签型节点是null,没有值的。只有属性和文本节点才可以有值。 // 前面仅仅只是获的节点 下面获得节点里面的内容 //获取div节点中的文本 innerHTML innerText 属性 var text=a.innerHTML;//innerHTML 设置或获取位于对象起始和结束标签内的 HTML。 alert(text); //更改里面的属性 a.innerHTML="改成别的了,要注意了,innerHTML可以修改里面的内容".fontcolor("blue"); }
// 2.getElementsByName 根据 NAME 标签属性的值获取对象的集合。 function getNode2(){ var a=document.getElementsByName("aa"); alert(a.nodeName);//undefined a为数组,必须指定元素来使用 alert(a[0].nodeName+"-"+a[0].nodeType+"-"+a[0].nodevalue); }
3,
<span style="white-space:pre"> </span>function getNode3(){ var a=document.getElementsByTagName("div"); alert(a.nodeName);//undefined a为数组,必须指定元素来使用 alert(a[0].nodeName+"-"+a[0].nodeType+"-"+a[0].nodevalue); } </script> </head> <body> <input type="button" value="演示getElementById获取节点" onclick="getNode1()"/><br /> <input type="button" name="aaa" value="演示getElementsByName获取节点" onclick="getNode2()"/><br /> <input type="button" value="演示getElementsByTagname获取节点" onclick="getNode3()"/> <div id="divid" name="aa">这是div使用的地区,我是最棒的!!</div> </body> </html>效果如下:点击都有反应的