children对象数组元素示例
<html>
<body>
<table id="tbl">
<tbody> <tr> <td> 行1列1 </td><td>行1列2 </td></tr>
<tr> <td> 行2列1 </td><td>行2列2 </td></tr>
</tbody>
</table>
<input onclick="alert(document.all.tbl.children(0).children(0).innerHTML)" value="children(0)" type="button">
<input onclick="alert(document.all.tbl.children(0).children(1).innerHTML)" value="children(1)" type="button">
<input onclick="alert(document.all.tbl.children(0).children(1).children(0).innerHTML)" value="children(2)" type="button">
<div id=test>
<a></a>
<table></table>
</div>
<script>
alert(test.children[0].tagName)
alert(test.children[1].tagName)
</script>
</body>
</html>
在DOM中,整个页面里的元素是个树型结构
children 代表对象的子节点数组
document.all.tbl.children(0).children(0).innerHTML解释
document.all.tbl.children(0)定位到table的第一个子节点<tbody>
document.all.tbl.children(0).children(0)定位到table的第一个子节点的第一个子节点<tr>,打印结果<td> 行1列1 </td><td>行1列2 </td>
document.all.tbl.children(0).children(1).innerHTML,打印结果<td> 行2列1 </td><td>行2列2 </td>
document.all.tbl.children(0).children(1).children(0).innerHTML 打印结果行2列2
fistChild,lastChild示例
<html>
<body>
<table id="tbl">
<tbody> <tr id="tr1"> <td> 行1列1 </td><td>行1列2 </td></tr>
<tr> <td="tr2"> 行2列1 </td><td>行2列2 </td></tr>
</tbody>
</table>
<input onclick="alert(document.all.tbl.firstChild.firstChild.innerHTML)" value="children(0)" type="button">
<input onclick="alert(document.all.tbl.firstChild.lastChild.innerHTML)" value="children(1)" type="button">
<input onclick="alert(document.all.tbl.firstChild.lastChild.firstChild.innerHTML)" value="children(2)" type="button">
<div id=test>
<a></a>
<table></table>
</div>
<script>
alert(test.firstChild.tagName)
alert(test.lastChild.tagName)
</script>
</body>
</html>
document.all.tbl.firstChild定位到table的第一个子节点<tbody>
document.all.tbl.firstChild.firstChild定位到table的第一个子节点<tbody>
的第一个子节点<tr id="tr1">
document.all.tbl.firstChild.firstChild.innerHTML打印结果是<td> 行1列1 </td><td>行1列2 </td>
document.all.tbl.firstChild.lastChild定位到table的第一个子节点<tbody>
的最后子节点<tr id="tr2">
document.all.tbl.firstChild.lastChild.innerHTML打印结果是<td="tr2"> 行2列1 </td><td>行2列2 </td>
document.all.tbl.firstChild.lastChild.firstChild.innerHTML 打印结果是
行2列2
分享到：
相关推荐
本篇将解析在DOM操作中，如何使用`children`、`firstChild`和`lastChild`这几个属性。 ### `children`属性 `children`属性返回一个HTMLCollection对象，它是一个包含所有子元素的动态集合（实时更新）。这个集合只...
在 DOM 中，每个节点都有其父节点和子节点，可以使用 parentNode、childNodes、previousSibling、firstChild、lastChild 和 nextSibling 等属性来访问和操作节点之间的关系。 除此之外，DOM 中还提供了一些常用的...
本文将对JavaScript中关于DOM（文档对象模型）元素对象的属性和方法进行详细解析。DOM是用于表示和交互HTML或XML文档的API，它是JavaScript中最为重要的组成部分之一，允许我们通过脚本来读取、修改和删除文档内容、...
2. **创建和插入元素**：使用`createElement`创建新的元素，然后通过`appendChild`、`insertBefore`等方法将其插入到树中的特定位置。 3. **删除元素**：`removeChild`方法可以移除指定的子节点。 4. **修改元素...
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
"JavaScript对DOM中各种类型的元素的常用操作" JavaScript 对 DOM 中各种类型的元素的常用操作是 JavaScript 编程中的一大根本任务。DOM 操作涉及到对不同类型的元素的操作，包括元素、属性、文本、注释、文档等。...
- **树遍历**: 使用`childNodes`、`firstChild`、`lastChild`、`nextSibling`、`previousSibling`等属性遍历DOM树。 - **深度优先搜索**和**广度优先搜索**: 两种常见的遍历策略，用于访问所有节点。 通过深入...
下面将详细介绍DOM文档对象以及如何在JavaScript中使用它。 首先，DOM是一个树形结构，每个HTML或XML文档都被解析为一个节点层级。根节点是`document`对象，它是整个文档的入口点。在JavaScript中，我们可以使用`...
- 在JavaScript中，可以使用`ActiveXObject`（IE）或`XMLHttpRequest`（其他浏览器）加载XML文件，然后使用DOM方法进行操作。 - `document.implementation.createDocument`方法可用于创建一个新的XML文档实例。 8...
5. **选择和遍历**: DOM提供了多种选择和遍历文档的方法，如`querySelector()`, `querySelectorAll()`, `childNodes`, `firstChild`, `lastChild`等，使得定位和操作文档中的特定元素变得简单。 6. **DOM变更与更新...
通过创建XMLHttpRequest对象，发送异步请求到服务器获取数据，然后使用DOM操作将新数据插入到页面中，实现页面的局部刷新。例如，使用`XMLHttpRequest.onreadystatechange`事件监听请求状态，当数据返回后，通过`...
它将网页视为一系列相互关联的对象，包括元素对象、文本对象、属性对象等。 2. **DOM树**：在DOM中，文档被解析成一棵树，根节点是整个文档，子节点可以是元素、文本、注释或其他类型的节点。通过遍历这棵树，可以...
可以通过 `arr.length = 0` 清空数组，或者使用 `splice` 方法删除数组中的元素。此外，判断数组是否为空，可以使用 `if (arr.length) {}`。 #### 数组排序 排序数组可以使用数组的 `sort()` 方法，它可以根据提供...
在"DOM中文手册"中，你将找到关于DOM的各种详细信息，包括其基本概念、节点类型、节点关系、以及如何使用JavaScript来操作这些节点。手册通常会涵盖以下内容： 1. **DOM基础**：解释DOM是什么，它是如何工作的，...
- `Attr`对象代表元素的属性，但通常我们使用`getAttribute()`和`setAttribute()`直接操作元素属性。 3. DOM操作： - `Document`对象提供了诸如`createAttribute()`、`createComment()`、`createElement()`和`...
- `lastChild`: 指向`childNodes`的最后一个元素。 - `previousSibling` 和 `nextSibling`: 分别用于访问当前节点的前一个和后一个兄弟节点。 对于节点的操作，JavaScript提供了以下方法： 1. `appendChild()`: 在...
- **使用`find`函数**：该函数返回一个对象数组，可以根据不同的选择器来查找元素。 ```php // 查找所有的`<a>`标签 $links = $html->find('a'); // 查找ID为`main`的第一个`<div>`元素 $mainDiv = $...
DOM文档对象模型是Web开发中的核心概念，允许开发者通过JavaScript或其他脚本语言与网页内容进行交互。 1. **DOM的基本概念** - **节点（Node）**: DOM将整个文档视为一系列相互关联的节点，每个节点代表文档的一...