childNodes和children的区别

来源：互联网发布：罗技g502 mac驱动编辑：程序博客网时间：2024/05/18 04:57
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>children 和  childnodes的区别</title><script type="text/javascript">window.onload = function(){document.getElementById("btn1").onclick=function(){var tab = document.getElementsByName("tab")[0];alert(tab.nodeName);var tbody = tab.childNodes[3];alert(tbody.nodeName);var tr = tbody.childNodes[1];alert(tr.nodeName);var td1 = tr.childNodes[1];alert(td1.nodeName);document.getElementById("in1").value=td1.innerHTML;}document.getElementById("btn2").onclick = function(){var tab = document.getElementsByName("tab")[0];alert(tab.nodeName);var tbody = tab.children[1];alert(tbody.nodeName);var tr = tbody.children[0];alert(tr.nodeName);var td = tr.children[0];alert(td.nodeName);document.getElementById("in2").value=td.innerHTML;}//结论：//childNodes和children计算子节点的区别在于：//childNodes计算空白子节点//而children计算的时候不包括子节点，只包含标签节点}</script></head><body>children 和  childnodes的区别<table border="1"  name = "tab"><thead><tr><td>thead1</td><td>thead2</td><td>thead3</td></tr></thead><tbody><tr><td> tbody1</td><td> tbody2</td><td> tbody3</td></tr><tr><td>tbody4</td><td>tbody5</td><td>tbody6</td></tr></tbody><tfoot><tr><td>tfoot7</td><td>tfoot8</td><td>tfoot9</td></tr></tfoot></table><input id="btn1" type="button" value="使用childnodes获取第二行第一个格子"/><input id="in1" type="text"/><input id="btn2" type="button" value="使用children获取第二行第一个格子"/><input id="in2" type="text"/></body></html>
阅读全文
0 0