<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>childNodes Method Test</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODy onLoad="aaa();">
<div id="tupian"><table cellpadding="0" cellspacing="1" border="0" width="100%" id="table1">
<tr id="tr1">
<td id="td1">
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="杭州桃花源远景" id="1">
<img border="0" src="http://211.155.231.109/Files/20074299389594.jpg" width="94" height="71"></img>
</a>
<p id='p123'>
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="杭州桃花源远景3" id="2">
<img border="0" src="http://211.155.231.109/Files/20074299389594.jpg" width="94" height="71"></img>
</a>
</p>
</td>
<td id="td2">
<a target="_self" href="http://211.155.231.109/Files/20074299389594.jpg" title="桃花源实景图例2">
<span>123</span>
<span>222</span>
</a>
</td>
</tr>
</table>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function aaa(){
// alert(document.all['tupian'].childNodes[0].id); //用childNodes取得div子标签对象id
var h = document.all['tupian'].childNodes[0]; //取得id为“tupian”的div子对象
// alert(h.rows[0].id); //取得table的行[0]id
// alert(h.rows[0].childNodes[0].id);
// alert(h.rows[0].cells[0].childNodes[0].childNodes[0].src); //第一行第一列A标签下的IMG标签src
// var l = h.rows[0].cells[0].childNodes.length; //childNodes中间有两个并列的双标记标签时，可用childNodes[i]取得对象
// for(var i=0;i<l;i++){
// alert(i);
// alert(h.rows[0].cells[0].childNodes[i].tagName);
// }
// alert(h.rows[0].cells[0].childNodes[0].childNodes[0].tagName); //取IMG的tagname
// alert(h.rows[0].cells[1].id); //第一行第二列ID
var w =h.rows[0].cells[1].childNodes[0].childNodes.length; //children和childNodes区别:children只取HTML，它者取HTML和包含文本innerHTML;
alert(w);
alert(h.rows[0].cells[1].childNodes[0].tagName);
for(var j=0;j<w;j++){
alert(j);
alert(h.rows[0].cells[1].childNodes[0].childNodes[j].tagName);
}
}
//上述打出的tagName有4个，因为有\t或者回车或者空格等元素存在。childNodes是会将这些元素读取进去。如果是一行则正确。
//在DOM中childNodes共5个节点类型：Element，Text，Attr，Comment，CDATASection。可用childNodes[i].nodeType == ELEMENT 对childNodes进行过滤.
//如果将childNodes[j]替换成children就不会出现这些问题。
//-->
</SCRIPT>
</BODY>
</HTML>
分享到：
相关推荐
在JavaScript中，可以使用多种属性和方法来访问这些节点，其中就包括childNodes和children。 1. childNodes属性： childNodes属性返回指定元素的所有子节点，这包括元素节点、文本节点、注释节点等。在DOM树中，...
在实际编程中，我们可能会遇到以下几种使用场景： 1. **遍历子节点**：通过循环`childNodes`，可以访问并处理每个子节点。例如，我们可以修改子节点的属性，添加新元素，或者根据需要删除某些节点。 2. **查找特定...
这段代码在IE浏览器中使用`element.children`，而在其他浏览器中，通过转换`childNodes`并筛选出元素节点来达到同样的效果。 总结来说，`parentNode`和`childNodes`是更通用、跨浏览器的属性，遵循W3C DOM标准，而`...
在HTML和JavaScript编程中，了解DOM（文档对象模型）的操作是非常关键的，特别是涉及到节点处理时。`childNodes.length`和`children.length`是两个经常在处理DOM元素时遇到的属性，它们之间存在着重要的区别。 首先...
然而，需要注意的是，`childNodes`包含所有类型的子节点，不仅仅是元素节点，所以在实际使用中可能需要配合`nodeType`属性（如只处理元素节点，可检查`nodeType`是否等于1）或者使用`children`属性（只包含元素节点...
在JavaScript DOM编程中，以下几个关键知识点是不可或缺的： 1. **DOM概念**：DOM是文档对象模型的缩写，它将HTML或XML文档解析为一个节点树。每个HTML元素、属性、文本内容都是一个节点，可以通过这些节点进行操作...
5. 遍历DOM：`childNodes`返回子节点集合，`children`返回子元素集合，`parentElement`返回父元素。 6. 动态创建元素：使用`document.createElement`创建新元素，`appendChild`、`insertBefore`、`replaceChild`等...
### JavaScript 获取网页中指定节点的父节点、子节点的方法小结 #### 概述 在进行Web前端开发的过程中，我们经常需要对DOM树中的特定节点进行操作，比如更新其样式或内容。为了实现这一目标，JavaScript 提供了一...
例如，使用`getElementsByTagName()`, `querySelector()`, `querySelectorAll()`等方法查找特定元素，`childNodes`, `firstChild`, `lastChild`等属性获取子节点，`innerHTML`, `textContent`等属性读写元素内容，`...
5. **遍历DOM**: `childNodes` 和 `children` 属性可以获取元素的子节点列表，`parentNode` 返回当前节点的父节点。`nextSibling` 和 `previousSibling` 可以获取相邻的兄弟节点。 6. **事件处理**: `...
在现代Web开发中，JavaScript与...此外，随着ECMAScript新版本的发布，如ES6中引入了`document.querySelector`和`document.querySelectorAll`等更现代的方法，它们提供了更强大和灵活的选择器语法，值得学习和使用。
- **遍历DOM树**：了解`childNodes`、`children`、`parentElement`等属性，遍历和操作DOM树。 - **异步加载**：学习如何使用`fetch`或`XMLHttpRequest`进行异步数据请求，并动态更新页面内容。 - **性能优化**：理解...
- `childNodes`和`children`属性分别返回所有子节点和只包含元素节点的子节点列表。 3. **属性操作**： - 属性可以通过`.getAttribute()`和`.setAttribute()`进行读写。 - `.innerHTML`用于获取或设置元素的HTML...
5. **DOM遍历**：遍历DOM树是常见的任务，例如`childNodes`、`children`属性和`firstChild`、`lastChild`、`previousSibling`、`nextSibling`等属性帮助我们访问和操作元素及其子元素。 6. **DOM创建与删除**：使用...
JavaScript是一种广泛用于网页和...这些题目涵盖了JavaScript的基础知识，包括DOM和BOM的使用、事件处理、定时器、获取页面元素的方法、AJAX以及对象和函数的声明等。理解并掌握这些知识点对于JavaScript开发至关重要。
书中还介绍了几种插入节点的方法： **1. `appendChild()` 方法** 将一个节点追加到另一个节点的子节点列表的末尾。 **2. `insertBefore()` 方法** 将一个节点插入到另一个节点之前。 **示例代码：** ```...
同样，`parent.children`在IE中有效，但Firefox中应使用`parent.childNodes`，并注意过滤掉文本节点。 3. **子节点的遍历与操作** 在遍历和操作子节点时，IE和Firefox的`childNodes`属性表现不同。IE将空白文本...