JavaScript对html获取节点的三种方法

获取节点的方法: 1.getElementById 获取对 ID 标签属性为指定值的第一个对象的引用 2.getElementsByName 根据 NAME 标签属性的值获取对象的集合。 3.getElementsByTagName 获取基于指定元素名称的对象集合。

<辅助>每个节点的三个属性 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>效果如下:点击都有反应的

版权声明:本文为博主原创文章,未经博主允许不得转载。希望大家多指教指教

去陌生的街角,去做一切我们曾经或现在也很想做的事情,

JavaScript对html获取节点的三种方法

相关文章:

你感兴趣的文章:

标签云: