您的位置：首页 > Web前端 > JavaScript

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

2015-10-13 21:21 621 查看
获取节点的方法：  1.getElementById 获取对 ID 标签属性为指定值的第一个对象的引用   2.getElementsByName 根据 NAME 标签属性的值获取对象的集合。   3.getElementsByTagName 获取基于指定元素名称的对象集合。  <辅助>每个节点的三个属性  nodeName,nodeType,nodeValuenodeType:标签的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,getElementByIdfunction 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
                                                基础学习
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航