个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在做(强烈推荐)Javascript 教程 ( http://www.newthinktank.com/2015/09/learn-javascript-one-video/ )，其中一个解决方案不起作用。我正在尝试更改第一段的背景颜色，我没有收到任何错误，“开发人员工具”显示“样式”没有更新。我什至从备忘单中复制了代码，但它仍然不起作用。不确定这是版本问题还是真正的错误(它已被查看超过 1,000,000 次，所以我相信现在有人会注意到它)。这是代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel='stylesheet' href='style.css'>
</head>
<body>
<div id="sampDiv">
<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit. Integer feugiat in tortor at scelerisque. Aenean nulla dui, auctor sit amet dignissim et, ultrices non odio. Pellentesque luctus eu ligula id feugiat. Mauris tempus mollis est, eget elementum massa luctus eu.</p>
<p> Sed ac ipsum libero. <b>Donec et leo</b> sit amet ante posuere pretium at eu massa. Donec tincidunt <em>elementum risus</em>, nec scelerisque massa luctus vitae. Praesent blandit tincidunt orci, <b>at commodo eros</b> interdum eu.</p>
</div>
<script>
// first paragraph
var sampDiv = document.getElementById('sampDiv');
sampDiv.childNodes[0].style.backgroundColor = "#F0FFFF";
</script>
</body>
</html>
我知道有很多方法可以实现，例如:
var pElements = document.getElementsByTagName('p');
pElements[0].style.backgroundColor = "#F0FFFF";
...但我很想知道出了什么问题。澄清一下，这是不起作用的代码:
var sampDiv = document.getElementById('sampDiv');
sampDiv.childNodes[0].style.backgroundColor = "#F0FFFF";
我正在运行 Chrome 版本 68.0.3440.106(官方构建)(64 位)
最佳答案
问题是第一个子节点是文本节点(包含 <div id="sampDiv"> 之后和 <p> 之前的空格)，而不是元素:
var sampDiv = document.getElementById('sampDiv');
console.log(sampDiv.childNodes[0].nodeName);<div id="sampDiv">
<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit. Integer feugiat in tortor at scelerisque. Aenean nulla dui, auctor sit amet dignissim et, ultrices non odio. Pellentesque luctus eu ligula id feugiat. Mauris tempus mollis est, eget elementum massa luctus eu.</p>
<p>Sed ac ipsum libero. <b>Donec et leo</b> sit amet ante posuere pretium at eu massa. Donec tincidunt <em>elementum risus</em>, nec scelerisque massa luctus vitae. Praesent blandit tincidunt orci, <b>at commodo eros</b> interdum eu.</p>
</div>作者应该用了 children ，它只包含元素，而不是 childNodes ，其中包括所有类型的节点:
var sampDiv = document.getElementById('sampDiv');
sampDiv.children[0].style.backgroundColor = "#F0FFFF";<div id="sampDiv">
<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit. Integer feugiat in tortor at scelerisque. Aenean nulla dui, auctor sit amet dignissim et, ultrices non odio. Pellentesque luctus eu ligula id feugiat. Mauris tempus mollis est, eget elementum massa luctus eu.</p>
<p>Sed ac ipsum libero. <b>Donec et leo</b> sit amet ante posuere pretium at eu massa. Donec tincidunt <em>elementum risus</em>, nec scelerisque massa luctus vitae. Praesent blandit tincidunt orci, <b>at commodo eros</b> interdum eu.</p>
</div>虽然有人会争辩说 firstElementChild 会比 children[0] 好.
可能是作者没有那个空格，而你用格式化引入了它，或者作者通常通过压缩器运行他/她的 HTML，压缩器可能会删除它，等等，因为如果那样的话代码就可以工作没有空格:
var sampDiv = document.getElementById('sampDiv');
sampDiv.childNodes[0].style.backgroundColor = "#F0FFFF";<div id="sampDiv"><p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit. Integer feugiat in tortor at scelerisque. Aenean nulla dui, auctor sit amet dignissim et, ultrices non odio. Pellentesque luctus eu ligula id feugiat. Mauris tempus mollis est, eget elementum massa luctus eu.</p>
<p>Sed ac ipsum libero. <b>Donec et leo</b> sit amet ante posuere pretium at eu massa. Donec tincidunt <em>elementum risus</em>, nec scelerisque massa luctus vitae. Praesent blandit tincidunt orci, <b>at commodo eros</b> interdum eu.</p>
</div>关于Javascript 教程， 'childNodes' 解决方案不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52217751/
25
4
0
只有 JS，没有 Jquery。 如何获取容器的所有子节点，然后为每个子节点获取子节点？ 我不想将 ID 添加到作为网格行子级的每个包装器，我尝试使用“this”或此索引进行定位。该脚本应该是动态的，
我有这个简单的html: text1 text2 text3
谁能解释为什么 ChildNodes.FindNode('') (1) 失败但 ChildNodes[''] (2) 成功？ ==> 代码: const cNodeSOAPEnvelope =
我需要帮助来理解我成功使用的 dart 代码。 (详细信息:我用它来注入(inject)包含绑定(bind)到可变 CSS 类的 SVG 图形) 我可以在这里调用构造函数参数“注入(inject)依赖
现在，在 Angular 代码的子函数中的compileNodes函数中，有以下几行: } else if (childLinkFn) { childLinkFn(scope, node.chil
您好，我是编码新手，有一个通用问题，我到处查找但找不到解决方案。我正在学习 javascript 教程，并遇到了这一行特定的代码。子节点指出属性“backgroundColor”未定义，我不确定为什么
使用这个 HTML: 还有这个 JavaScript: var x = document.getElementById("child").childNodes; console.log(x.leng
First p element (index 1) Second p element (index 3) 试图理解为什么索引 0 是文本节点。 根据 w3schools 的这个例子，索引 0、2
场景 我想获取 div 的所有子节点并更改其颜色。代码: function myFunction() { var divv = document.getElementById("divv");
http://www.quirksmode.org/dom/domform.html 我正在尝试在我的项目中实现这个扩展表单功能。但是无法找到字段名称(控制台日志返回“未定义”)，直到我将输入字段放在
// Some jQuery to load the HTML file $(function(){ $("#myDiv").load("./someHTMLfile.html"); }); va
我正在尝试使以下代码为每个子节点工作一次。该函数还按照逻辑删除节点，对于多个子节点，它似乎永远不会遍历到每个子节点。 //Deleting from child node va
下面的代码应该让我获得表中复选框旁边的列的值，但是，单击按钮后，我将得到: Cannot read property childNodes of null 注意:来自 firebase 的数据库，表中
我想在 JavaScript 中将 Element 的 childNode 转换为数组。 如何将 childNode 转换为数组？有什么好主意吗？ 最佳答案 我用 _.toArray() 做到了这一点
我有以下代码，我正在尝试动态地从元素 supercontainer 中动态删除所有“容器”元素。由于 nodeList 处于事件状态，因此以下代码应删除 container1 以及 container
从下图中可以看出，childNodes 数组有 13 个项目。但显然“book”元素只有 6 个子节点。为什么这是不准确的？ 最佳答案 因为 childNodes 返回所有子节点，包括文本节点(即使它
我正在做(强烈推荐)Javascript 教程 ( http://www.newthinktank.com/2015/09/learn-javascript-one-video/ )，其中一个解决方案
我现在正在学习 JavaScript，我正在编写函数来更改每个段落标记 和字体样式标记emphasis(em) 的样式和 bold(b) 位于 内 元素。这是我的程序。 Lorem ipsum d
我是 Ajax 新手。 我正在尝试解析 this document . 我已经了解了 readystatechange，它正在获取 XML。但是当涉及到子节点及其值时，我感到困惑。 这是一些代码。如果
给定一个像这样的简单结构: Text1 Text2 Text3 LinkText4 我正在尝试使用 Javascript 提取所有 Text1-4，不带任何子节点。 循环列 ... x = rows[
我是一名优秀的程序员,十分优秀！