获取子节点

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <script type="text/javascript">
 8         window.onload=function(){
 9         var b01=document.getElementById("01");
10
11         b01.onclick=function(){
12           var city=document.getElementById("city");
13           //查询#city下所有li节点
14           var lis=city.getElementsByTagName("li");
15           alert(lis.length);
16
17         }
18         var b02=document.getElementById("02");
19         b02.onclick=function(){
20         var city=document.getElementById("city");
21         /*childNodes属性会获取包括文本节点在内的所有节点,根据DOM标签间空白也会当成文本节点
22         注意:在IE8及以下的浏览器中,不会将空白文本当成子节点
23         */
24         var cns=city.childNodes;
25         /*
26         children属性可以获取当前元素的所有子元素
27         */
28         var cns2=city.children;
29         alert(cns.length);
30        }
31
32         var b03=document.getElementById("03");
33         b03.onclick=function(){
34         //返回#phone的第一个节点
35         var phone=document.getElementById("phone");
36         //phone.childNodes[0];
37         //firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
38         var fir=phone.firstChild;
39         /*firstElementChild获取当前元素的第一个子元素
40         不支持IE8及以下的浏览器,如果需要兼容他们不要使用
41         */
42         fir=phone.firstElementChild;
43         alert(fir.innerHTML);
44         }
45             };
46
47     </script>
48   <style type="text/css">
49       *{
50       margin:0px;
51       padding:0px;
52       }
53      ul{
54       text-docoration:none;
55      }
56   </style>
57 <body>
58 <!--
59 getElementsByTagName() 返回当前节点的指定标签名后代节点
60 childNodes 表示当前节点的所有子节点
61 firstChild 表示当前节点的第一个子节点
62 lastChild 表示当前节点的最后一个子节点
63 -->
64  <p>你喜欢的城市是什么?</p>
65 <ul id="city">
66     <li id="shanghai">上海</li>
67     <li>北京</li>
68     <li>深圳</li>
69 </ul>
70 <p>你的手机的操作系统?</p>
71 <ul id="phone">
72     <li>IOS</li>
73     <li>Android</li>
74 </ul>
75   <input type="button" value="button1" id="01">
76   <input type="button" value="button2" id="02">
77   <input type="button" value="button3" id="03">
78 </body>
79 </html>

原文地址:https://www.cnblogs.com/zuiaimiusi/p/11244012.html

时间: 2024-10-10 17:41:49

获取子节点的相关文章

TreeView获取子节点

1 if (e.Node.Parent!=null)//如果存在父节点 2 { 3 MessageBox.Show(e.Node.Text);//就显示当前选中的 4 } TreeView获取子节点

JS之获取子节点

在JS中获取子节点有以下几种方法: firstElementChild.firstChild.childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输出结果是这样的: firstElementChild和Children 都成功获取到了p标签,那另外两个文本(#text)是什么东西呢? 其实是因为现在的标准浏览器会为空白符创建文本节点(标签之间换行或空格之类的都会产生空白符),而ie9以前的浏览器却不会. 我们知道DOM节点分为三大类 1.元素节

js获取子节点和修改input的文本框内容

js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 例如:$("#"+defaultPVItemId).children().eq(3).find('input').val('当前位置'); //修改某个选择器下的第四个子节点的input节点的输入框文本内容 js修改属性内容: attr():该方法一般是获取某个属性值,或者修改某个属性值,

JS获取子节点、父节点和兄弟节点的方法实例总结

JS获取子节点.父节点和兄弟节点的方法实例总结 原生js 参考网址 Jquery 参考网址 原文地址:https://www.cnblogs.com/renxiuxing/p/10180558.html

ztree 获取子节点所有父节点的name的拼接

//获取子节点,所有父节点的name的拼接字符串function getFilePath(treeObj){if(treeObj==null)return "";var filename = treeObj.name;var pNode = treeObj.getParentNode();if(pNode!=null){filename = getFilePath(pNode) +">"+ filename;}return filename;} 原文地址:ht

zTree获取子节点

1 var ids=[]; 2 ids=getChildren(ids, treeNode);//TreeNode是选中节点,ids是子节点id数组,格式:123,223,4,55 1.获取直接子节点的id //返回值包含选中节点的id,即ids[0] function getChildren(ids, treeNode) { ids.push(treeNode.id);//选中节点id,即父节点id if (treeNode.isParent) { for (var obj in treeNo

不同浏览器中childNodes获取子节点个数

以一段简单的HTML代码为例 <div id="div"> <div id="div01"> 这是div01</div> <div id="div02"> 这是div02</div> </div> childNodes:获取某节点下的所有直接子节点 var node = document.getElementById("div").childNodes;

递归获取子节点

节点ID,父节点ID,根据节点获取该节点下所有子节点.用于点击类别查询此类别下所有商品 private string GetChildIdsById(int id) { List<ProductCategoryModel> listCategory = GetDataCategory(); string ids = id.ToString(); GetChilds(id, listCategory,ref ids); return ids; } private void GetChilds(i

java 递归在实例中的几种用途(ps:准确获取树的子节点)

  递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算,大大地减少了程序的代码量.递归的能力在于用有限的语句来定义对象的无限集合.一般来说,递归需要有边界条件.递归前进段和递归返回段.当边界条件不满足时,递归前进:当边界条件满足时,递归返回(递归简单说就是程序调用自身的编程技巧,前面说这么多废话只是为了显得