javascript - 节点如何放置在 DOM 树中？-6ren

javascript - 节点如何放置在 DOM 树中？

转载作者：行者123 更新时间：2023-11-30 12:29:29

25

4

我正在学习 JavaScript。我是文档对象模型 (DOM) 主题的新手。

我对节点在 DOM 树中的布局方式感到困惑？

我使用了这个 HTML 文件。

<html>
<body>

<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>

<ul>
<li id="one"><em>emText</em>directText</li>
</ul>

</div>

<div id='TDiv'>
<h1 id='travelhead'>headText</h1>
</div>

<script src="javac.js"></script>
</body>
</html>

我使用了这个 JavaScript 文件。

var li = document.getElementById('one');

var emText = li.firstChild.firstChild.nodeValue;
var directText = li.firstChild.nextSibling.nodeValue;

document.write(emText + '<br />');
document.write(directText + '<br />');

var div = document.getElementById('TDiv');
var headText = div.firstChild.nextSibling.firstChild.nodeValue;
document.write(headText);

两个变量:

var li = document.getElementById('one');
var div = document.getElementById('TDiv');

保存 li 元素节点和 div 元素节点在 DOM 树中的位置。

虽然这行给出了正确的答案，但它的表述出乎意料:

var headText = div.firstChild.nextSibling.firstChild.nodeValue;

用于获取DIV节点元素中H1节点元素中文本节点的文本值。所以我希望它是这样写的:

var headText = div.firstChild.firstChild.nodeValue;

DIV 将 H1 作为第一个子节点，而 H1 又将 Text 节点作为第一个子节点。

div.firstChild 应该返回 H1。
div.firstChild.firstChild 应该返回 H1 的 Text 节点。
div.firstChild.firstChild.nodeValue 应该返回文本节点的值。

这些节点实际上是如何放置在 DOM 树中的？!

最佳答案

<div> 之间有空格和 <h1> - 换行符。这将(或可能)变成一个文本节点。

如果您更改了 HTML:

<div id='TDiv'><h1 id='travelhead'>headText</h1></div>

那么 DOM 将不会有那个额外的文本节点。

这很好地说明了为什么 JavaScript 代码期望来自 HTML 文档的特定结构是一个糟糕的想法。

关于javascript - 节点如何放置在 DOM 树中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28194414/

25

4

0

文章推荐： c# - 使用导航属性的 LINQ 查询生成多个 SELECT 语句

文章推荐： swift - URL字符问题

文章推荐： ios - 订阅 Observable 时如何在 onNext 情况下获取状态码

树结构之MongoDb 使用的到底是 B 树，还是 B+ 树？
关于 B 树与 B+ 树，网上有一个比较经典的问题：为什么 MongoDb 使用 B 树，而 MySQL 索引使用 B+ 树? 但实际上 MongoDb 真的用的是 B 树吗?
c# - 持久(基于磁盘)R 树(或 R* 树)
如何将 R* Tree 实现为持久(基于磁盘)树？保存 R* 树索引或保存叶值的文件的体系结构是什么？注意:此外，如何在这种持久性 R* 树中执行插入、更新和删除操作？注意事项二:我已经实现了一个
java - 给定另一个 AST 树，在 Java 中创建一个 AST 树
目前，我正在努力用 Java 表示我用 SML 编写的 AST 树，这样我就可以随时用 Java 遍历它。我想知道是否应该在 Java 中创建一个 Node 类，其中包含我想要表示的数据，以及一个数
c++ - C++ 中任何好的范围查询库(使用 K-D 树、四叉树或 R 树)
我之前用过这个库http://www.cs.umd.edu/~mount/ANN/ .但是，它们不提供范围查询实现。我猜是否有一个 C++ 范围查询实现(圆形或矩形)，用于查询二维数据。谢谢。最佳
为什么MySQL数据库索引选择使用B+树?
在进一步分析为什么MySQL数据库索引选择使用B+树之前，我相信很多小伙伴对数据结构中的树还是有些许模糊的，因此我们由浅入深一步步探讨树的演进过程，在一步步引出B树以及为什么MySQL数据库索引选择
数据结构-树，三探之代码实现
书接上回，今天和大家一起动手来自己实现树。相信通过前面的章节学习，大家已经明白树是什么了，今天我们主要针对二叉树，分别使用顺序存储和链式存储来实现树。 01、数组实现我们在上一节中说过，
数据结构-树，再探
书节上回，我们接着聊二叉树，N叉树，以及树的存储。 01、满二叉树如果一个二叉树，除最后一层节点外，每一层的节点数都达到最大值，即每个节点都有两个子节点，同时所有叶子节点都在最后一层，则这个
数据结构-树，初探
树是一种非线性数据结构，是以分支关系定义的层次结构，因此形态上和自然界中的倒挂的树很像，而数据结构中树根向上树叶向下。什么是树？ 01、定义树是由n（n>=0）个元素节点组成的
操作系统的那棵“树”---06
操作系统的那棵“树” 今天从一颗开始，我们看看如何从小树苗长成一颗苍天大树。运转CPU CPU运转起来很简单，就是不断的从内存取值执行。 CPU没有好好运转 IO是个耗费时间的活，如果CPU在取值
r - 从物种列表制作简单的系统发育树状图(树)
我想为海洋生物学类(class)制作一个简单的系统发育树作为教育示例。我有一个具有分类等级的物种列表: Group <- c("Benthos","Benthos","Benthos","Be
c++ - 树，无法正确删除节点
我从这段代码中删除节点时遇到问题，如果我插入数字 12 并尝试删除它，它不会删除它，我尝试调试，似乎当它尝试删除时，它出错了树的。但是，如果我尝试删除它已经插入主节点的节点，它将删除它，或者我插入数字
haskell - 如何在Haskell中实现B+树？
B+ 树的叶节点链接在一起。将 B+ 树的指针结构视为有向图，它不是循环的。但是忽略指针的方向并将其视为链接在一起的无向叶节点会在图中创建循环。在 Haskell 中，如何将叶子构造为父内部节点的子
GWT 树，开幕事件
我在 GWT 中使用树控件。我有一个自定义小部件，我将其添加为 TreeItem: Tree testTree = new Tree(); testTree.addItem(myWidget); 我想
c - 树/链表结构的遍历
它有点像混合树/链表结构。这是我定义结构的方式 struct node { nodeP sibling; nodeP child; nodeP parent; char
c - 树:使用队列进行层序遍历
我编写了使用队列遍历树的代码，但是下面的出队函数生成错误，head = p->next 是否有问题？我不明白为什么这部分是错误的。 void Levelorder(void) { node *tmp,
javascript - 将平面数组解析为嵌套结构(树)
例如，我想解析以下数组: var array1 = ["a.b.c.d", "a.e.f.g", "a.h", "a.i.j", "a.b.k"] 进入: var json1 = { "nod
java - 树-路径总和
问题 -> 给定一棵二叉树和一个和，确定该树是否具有从根到叶的路径，使得沿路径的所有值相加等于给定的和。我的解决方案 -> public class Solution { public bo
带有列的 Java 树
我有一个创建 java 树的任务，它包含三列:运动名称、运动类别中的运动计数和上次更新。类似的东西显示在下面的图像上: 如您所见，有 4 种运动:水上运动、球类运动、跳伞运动和舞蹈运动。当我展开 sk
mysql - H2数据库中的B+树
我想在 H2 数据库中实现 B+ Tree，但我想知道，B+ Tree 功能在 H2 数据库中可用吗？最佳答案 H2 已经使用了 B+ 树(PageBtree 类)。关于mysql - H2数据库
java - 字符串数组(树)
假设我们有 5 个字符串数组: String[] array1 = {"hello", "i", "cat"}; String[] array2 = {"hello", "i", "am"}; Str

首页

博学

6Ren·AI

商城

javascript - 节点如何放置在 DOM 树中？