获取元素的子节点
通过具体的元素节点调用
- getElementsByTagName():方法,返回当前节点的指定标签名后代节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function(){ var shuzi = document.getElementById("shuzi"); //获取id为shuzi的ul节点 var lis = shuzi.getElementsByTagName("li"); //获取shuzi节点下的所有li节点 alert(lis.length); //打印lis的长度 for(var i=0;i<lis.length;i++){ alert(lis[i].innerHTML); } //遍历lis,获取li中的内容 }; </script> </head> <body> <ul id="shuzi"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
- childNodes:属性,表示当前节点的所有子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function(){ var shuzi = document.getElementById("shuzi"); //获取id为shuzi的ul节点 var lis = shuzi.childNodes; //获取shuzi节点下的所有子节点 //childNodes属性会获取包括文本节点在内的所有节点 alert(lis.length); //根据DOM标准,标签间的空白也会被当成文本节点 //打印lis的长度,7 //注意,在IE8及以下的浏览器中,不会将空白文本当成子节点 //所以该属性在IE8中会返回3个子元素而其他浏览器是7个 var lis2 = shuzi.chilsren; //children属性可以获取当前元素的所有子元素 alert(lis2.length); //打印lis2的长度,3 }; </script> </head> <body> <ul id="shuzi"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
- fristChild:属性,表示当前节点的第一个子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function(){ var shuzi = document.getElementById("shuzi"); //获取id为shuzi的ul节点 var fir = shuzi.firstChild; //返回id为shuzi的ul节点下的第一个子节点,包括空白文本节点 //也可以是:var fir = shuzi.childNodes[0] alert(fir.innerHTML); //打印fir,undefined var fir2 = shuzi.firstElementChild; //返回id为shuzi的ul节点下的第一个子元素 //firstElementChild不支持IE8及以下的浏览器 //如果需要兼容,尽量不使用它 alert(fir2.innerHTML); }; </script> </head> <body> <ul id="shuzi"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
- lastChild:属性,表示当前节点的最后一个子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function(){ var shuzi = document.getElementById("shuzi"); //获取id为shuzi的ul节点 var fir = shuzi.lastChild; //返回id为shuzi的ul节点下的最后一个子节点,包括空白文本节点 alert(fir.innerHTML); //打印fir,undefined }; </script> </head> <body> <ul id="shuzi"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>