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

最新推荐文章于 2023-12-01 21:28:31 发布

learning_code_blog

最新推荐文章于 2023-12-01 21:28:31 发布

阅读量1w

点赞数 1

分类专栏： JavaScript实例 Java学习之路文章标签： javascript 基础学习

本文链接：https://blog.csdn.net/yangxin_blog/article/details/49104663

版权

Java学习之路同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

JavaScript实例

14 篇文章 1 订阅

订阅专栏

获取节点的方法：
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获取节点" οnclick="getNode1()"/><br />
   	<input type="button" name="aaa" value="演示getElementsByName获取节点" οnclick="getNode2()"/><br />
   	<input type="button" value="演示getElementsByTagname获取节点" οnclick="getNode3()"/>
	
	
	<div id="divid" name="aa">这是div使用的地区，我是最棒的！！</div>
	
  </body>
</html>

效果如下：点击都有反应的