个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
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/
26
4
0
我正在做一个关于代码学院的教程，我在这里收到一个错误，说“看起来你的函数没有返回‘唉，你没有资格获得信用卡。资本主义就是这样残酷。’”当收入参数为 75 时。”但是该字符串在控制台中返回(由于某种原因
我正在阅读 Go 的官方教程，但很难理解 Channel 和 Buffered Channels 之间的区别。教程的链接是 https://tour.golang.org/concurrency/2和
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
作为 iOS 新手，有大量书籍可以满足学习基础知识的需求。现在，我想转向一些高级阅读，例如 OAuth 和 SQLite 以及动态 API 派生的 TableView 等。您可以推荐任何资源吗？ 最佳
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 8 年前。 Improve
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。 关闭 8 年前。
前言 很多同学都知道，我们常见的CTF赛事除了解题赛之外，还有一种赛制叫AWD赛制。在这种赛制下，我们战队会拿到一个或多个服务器。服务器的连接方式通常是SSH链接，并且可能一个战队可能会同时有
Memcached是一个自由开源的，高性能，分布式内存键值对缓存系统 Memcached 是一种基于内存的key-value存储，用来存储小块的任意数据（字符串、对象），这些数据可以是数据库调用、A
Perl 又名实用报表提取语言， 是 Practical Extraction and Report Language 的缩写 Perl 是由 拉里·沃尔（Larry Wall）于19
WSDL 是 Web Services Description Language 的缩写，翻译成中文就是网络服务描述语言 WSDL 是一门基于 XML 的语言，用于描述 Web Services 以
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
我正在寻找解释在 WPF 中创建自定义用户控件的教程。 我想要一个控件，它结合了一个文本 block 、一个文本框和一个启动通用文件打开对话框的按钮。我已经完成了布局，一切都连接好了。它有效，但它是三
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我接近 fourth page of the Django tutorial 的开始看着vote查看，最后是这样的: # Always return an HttpResponseRedirect a
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
是否有任何好的 Qt QSS 教程，或者在某个地方我可以看到样式小部件的示例？如果某处可用，我想要一些完整的引用。除了有关如何设置按钮或某些选项卡样式的小教程外，我找不到任何其他内容。 最佳答案 Qt
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
我是一名优秀的程序员,十分优秀！