javascript - 如何使用 querySelector 将数据传递到 DOM
问题描述
我正在使用 querySelectorAll 来访问我的 index.html 文件中的 id 和类。我遇到的问题是我试图将数据传递到我的 p.source 类中,该类有两个子跨度,当我使用 innerText 或 innerHTML 时,尽管我的控制台日志显示了数据并没有传递到 DOM要传递到 DOM 的正确数据。您能否帮助我了解发生了什么以及如何将数据传递到该源类中。我是使用 querySelector 的新手,而且 MDN 文档的深度不如我想的那么安静。下面是我的代码。
到目前为止,通过使用控制台,我已经尝试访问 childeNodes 的属性,并且它们可以正常工作,只是让数据反映在 DOM 中
function myQuotes() {
var quotes = [{
quote: "Seven billion souls that move around the sun.",
source: "Childish Gambino",
citation: "Feels like summer"
},
{
quote: "Don't wait for your world to begin crumbling to make a change.",
source: "Josh",
citation: "Past midnight thoughts"
},
{
quote: "The only time we will ever have is right now, no other time exist.",
source: "Josh",
citation: "Past midnight thoughts",
year: 2018
},
{
quote: "Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.",
source: "Patrick McKenzie",
citation: "Twitter"
}
];
console.log('quotes', quotes);
return quotes;
}
var myQuotesLength = myQuotes().length;
var quotes = myQuotes();
function getRandomQuote(maxNum) {
var randomNum = Math.floor(Math.random() * maxNum);
var randomQuote = quotes[randomNum];
// console.log('random quote', randomQuote );
return randomQuote;
}
function printQuote() {
//data call to grab quotes from array of objects
var message = getRandomQuote(myQuotesLength);
console.log('message', message);
//using querySelectors to dynamically pass the data from 'message' into the DOM. Each field works except for sourceField.
var quoteField = document.querySelectorAll('.quote')[0].innerText = message.quote;
var source_Parent = document.querySelectorAll('.source');
console.log('parent', source_Parent);
var sourceField = source_Parent[0].childNodes[0].innerHTML = message.source;
console.log('source', sourceField);
var citationField = source_Parent[0].childNodes[1].innerText = message.citation;
var yearField = source_Parent[0].childNodes[2].innerText = message.year;
if (yearField === undefined) {
yearField = document.getElementsByClassName('year')[0].innerHTML = ' ';
}
}
document.getElementById('loadQuote').addEventListener("click", printQuote, false);
body {
background-color: #36b55c;
color: white;
font-family: 'Playfair Display', serif;
}
#quote-box {
position: absolute;
top: 20%;
left: 10%;
right: 10%;
width: 80%;
line-height: .5;
}
.quote {
font-size: 4rem;
font-weight: 400;
line-height: 1.1;
position: relative;
margin: 0;
}
.quote:before,
.quote:after {
font-size: 6rem;
line-height: 2.5rem;
position: absolute;
}
.quote:before {
content: "“";
top: .25em;
left: -.5em;
}
.quote:after {
content: "”";
bottom: -.1em;
margin-left: .1em;
position: absolute;
}
.source {
font-size: 1.25rem;
;
letter-spacing: 0.05em;
line-height: 1.1;
text-align: right;
margin-right: 4em;
}
.source:before {
content: "—";
}
.citation {
font-style: italic;
}
.citation:before {
content: ", ";
font-style: normal;
}
.year:before {
content: ", ";
font-style: normal;
}
#loadQuote {
position: fixed;
width: 12em;
display: inline-block;
left: 50%;
margin-left: -6em;
bottom: 150px;
border-radius: 4px;
border: 2px solid #fff;
color: #fff;
background-color: #36b55c;
padding: 15px 0;
transition: .5s;
}
#loadQuote:hover {
background-color: rgba(255, 255, 255, .25);
}
#loadQuote:focus {
outline: none;
}
@media (max-width: 420px) {
.quote {
font-size: 2.5rem;
}
.quote:before,
.quote:after {
font-size: 3rem;
}
.source {
font-size: 1rem;
}
}
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<div class="container">
<div id="quote-box">
<p class="quote">Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.</p>
<p class="source">Patrick McKenzie<span class="citation">Twitter</span><span class="year">2016</span></p>
</div>
<button id="loadQuote">Show another quote</button>
</div>
最终结果是:
-我想将 message.quote 数据传递到quote-box id的innerHTML(这有效)
-我想将 message.source 数据传递到源类的 innerText (这不起作用)
-我想将message.citation数据传递到引文类的innerText(这个有效)
-我想将 message.year 数据传递到 year 类的 innerText 中(这行得通)
解决方案
您正面临作为 childNode 的名称,但它不是 的 childNode .source div
,它是一个innerText
. 如果您将名称放入 a <span>
too,它也将成为 childNode,并且会像魅力一样工作。
这是您的“固定”代码笔,我刚刚
<span>
在名称周围添加了一个: https ://codepen.io/anon/pen/pGrBEo?editors=1010#0
或者看看这个工作示例:
function myQuotes() {
var quotes = [{
quote: "Seven billion souls that move around the sun.",
source: "Childish Gambino",
citation: "Feels like summer"
},
{
quote: "Don't wait for your world to begin crumbling to make a change.",
source: "Josh",
citation: "Past midnight thoughts"
},
{
quote: "The only time we will ever have is right now, no other time exist.",
source: "Josh",
citation: "Past midnight thoughts",
year: 2018
},
{
quote: "Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.",
source: "Patrick McKenzie",
citation: "Twitter"
}
];
return quotes;
}
var myQuotesLength = myQuotes().length;
var quotes = myQuotes();
function getRandomQuote(maxNum) {
var randomNum = Math.floor(Math.random() * maxNum);
var randomQuote = quotes[randomNum];
return randomQuote;
}
function printQuote() {
var message = getRandomQuote(myQuotesLength);
var quoteField = document.querySelectorAll('.quote')[0].innerText = message.quote;
var source_Parent = document.querySelectorAll('.source');
var sourceField = source_Parent[0].childNodes[0].innerHTML = message.source;
var citationField = source_Parent[0].childNodes[1].innerText = message.citation;
var yearField = source_Parent[0].childNodes[2].innerText = message.year;
if (yearField === undefined) {
yearField = document.getElementsByClassName('year')[0].innerHTML = ' ';
}
}
document.getElementById('loadQuote').addEventListener("click", printQuote, false);
body {
background-color: #36b55c;
color: white;
font-family: 'Playfair Display', serif;
}
#quote-box {
position: absolute;
top: 20%;
left: 10%;
right: 10%;
width: 80%;
line-height: .5;
}
.quote {
font-size: 4rem;
font-weight: 400;
line-height: 1.1;
position: relative;
margin: 0;
}
.quote:before,
.quote:after {
font-size: 6rem;
line-height: 2.5rem;
position: absolute;
}
.quote:before {
content: "“";
top: .25em;
left: -.5em;
}
.quote:after {
content: "”";
bottom: -.1em;
margin-left: .1em;
position: absolute;
}
.source {
font-size: 1.25rem;
;
letter-spacing: 0.05em;
line-height: 1.1;
text-align: right;
margin-right: 4em;
}
.source:before {
content: "—";
}
.citation {
font-style: italic;
}
.citation:before {
content: ", ";
font-style: normal;
}
.year:before {
content: ", ";
font-style: normal;
}
#loadQuote {
position: fixed;
width: 12em;
display: inline-block;
left: 50%;
margin-left: -6em;
bottom: 150px;
border-radius: 4px;
border: 2px solid #fff;
color: #fff;
background-color: #36b55c;
padding: 15px 0;
transition: .5s;
}
#loadQuote:hover {
background-color: rgba(255, 255, 255, .25);
}
#loadQuote:focus {
outline: none;
}
@media (max-width: 420px) {
.quote {
font-size: 2.5rem;
}
.quote:before,
.quote:after {
font-size: 3rem;
}
.source {
font-size: 1rem;
}
}
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<div class="container">
<div id="quote-box">
<p class="quote">Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.</p>
<p class="source"><span>Patrick McKenzie</span><span class="citation">Twitter</span><span class="year">2016</span></p>
</div>
<button id="loadQuote">Show another quote</button>
</div>
推荐阅读
- mysql - 为什么 Master 上的 GTID 与 Slave 上的 GTID 不同,而两者都同步(MariaDB 10.5)?
- sql - 像 Hive 的 LATERAL VIEW STACK 这样的非透视数据的 Snowflake 替代方案是什么?
- javascript - 阿波罗客户端 offsetLimitPagination 不起作用
- javascript - 有没有办法访问我的响应错误消息?
- java - 如何通过maven在tomee应用程序中从源代码和静态负载构建java代理?
- ansible - ansible中的多个OR条件
- javascript - 如何显示最少输入 2 个字符的 Javascript 过滤器结果?
- angular - 找不到名称“列表”?(Ionic - Angular) 使用 ViewChild 时
- linux - 将docker容器内的进程绑定到linux中的特定网络接口
- excel - 如何使用应用程序将我的 Firebase 数据导出到 Excel 工作表中?