如何将一组文章的片段显示为新的 HTML 页面
How to display snippets from a set of articles as the new HTML page
- *我正在尝试找出如何遍历 新闻文章 ，
并在新 HTML 中呈现标题和第一句。从本质上讲，如何从顶部开始创建和显示 snippet？我坚持这个。*
这是一个示例 HTML 代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Main Title</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
<div id="wrappermain">
<h1>Heading 1.1 Up</h1>
<section id="headlines">
<h2>Heading 2.1</h2>
</section>
<section id="news">
<h3>Heading 3</h3>
<article class="newsarticle">
<h4>Heading level 4 - article title </h4>
<p>Article text here.</p>
<p> Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. </p>
</article>
<article class="newsarticle">
<h4>Another Heading </h4>
<p>Another article text.</p>
<p> Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. </p>
</article>
<article class="newsarticle">
<h4>Yet One More Article</h4>
<p>More and more text here.</p>
<p> Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. </p>
</article>
</section>
</div>
</body>
</html>
您可以试试这些链接，例如：
基本上你需要将DOM个元素赋值给变量，例如：
//multiple elements
var articles = document.querySelectorAll('. newsarticle');
//one element
var article = document.getElementById('news');
articles 变量的作用类似于数组，因此您可以循环遍历它。每个元素都可以有父元素、兄弟元素等。有多种访问和修改它们的方法。
那只是为了让你继续前进。这里的人不喜欢有人要求别人为 him/her 做工作。网上到处都是文档，祝你好运:)
操作 DOM 并生成您提到的 "snippets" 列表非常简单。下面的 javascript 是 运行 一旦填充了 DOM 并使用 querySelectorAll 查找要在显示中使用的所有相关文章 - 请参阅 js 中的注释。
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>JavaScript</title>
<script>
const createsnippets=function(e){
/* the reference node near where we will generate menu */
let headlines=document.getElementById('headlines');
/* utiity to add new dom element */
const create=function(t,v,p){
let n=document.createElement( t );
n.innerHTML=v;
p.appendChild( n );
return n;
};
/* create the list */
let ul=create( 'ul', null, document.body );
/* find all articles and add new snippet headline */
Array.from( document.querySelectorAll( 'article.newsarticle > h4' ) ).forEach( function( h4 ){
create( 'li', h4.textContent+' ... '+h4.nextElementSibling.innerText, ul );
});
/* refactor HTMl to ensure layout is "just so" */
headlines.parentNode.insertBefore( ul, headlines.nextSibling )
}
/* when the DOM is ready, create the list of headline snippets */
document.addEventListener( 'DOMContentLoaded', createsnippets );
</script>
<style>
ul{ color:red; }
</style>
</head>
<body>
<div id='wrappermain'>
<h1>Bizzare News Mash Up</h1>
<section id='headlines'>
<h2>Bizzare News Summary</h2>
</section>
<section id='news'>
<h3>News Stories in Full</h3>
<article class='newsarticle'>
<h4>What a load of Bull!</h4>
<p>Chinese Kung Fu Masters are seeking the ultimate opponents</p>
<p>Several times a week, kung fu teacher Ren Ruzhi enters a ring to spar with a bovine opponent around
five times his weight and capable of killing him.</p>
<p>Ren’s mixing of martial arts and bullfighting worries his mother, but the 24-year-old has never been
hurt. Besides, he says, grappling with a snorting bull is exciting.</p>
<p>It symbolizes the bravery of a man,” Ren told Reuters in Jiaxing in China’s eastern province of
Zhejiang.</P>
<p>Unlike Spain’s more famous sport, the Chinese variant of
bullfighting involves no swords or gore but instead fuses the moves of wrestling with the skill and
speed of kung fu to bring down beasts weighing up to 400 kg (882 lb).</p>
<p>“Spanish bullfighting is more like a performance or a show,” said Hua Yang, a 41-year-old enthusiast
who watched a bullfight during a visit to Spain.</p>
</article>
<article class='newsarticle'>
<h4>Has Anybody got a Tissue?</h4>
<p>A Hawaiian monk seal got an eel caught in its nose ― and it wasn’t the first time for these
endangered creatures.</p>
<p>The Hawaiian Monk Seal Research Program posted a startling pic of the poor pup on Monday, and the
National Oceanic
and Atmospheric Administration Fisheries provided more details in a post on Wednesday.</p>
<p>The administration said it has seen the same “eels in noses” phenomenon nearly a handful of times in
the last few years.</p>
<p>“We don’t know if this is just some strange statistical anomaly or something we will see more of in
the future,”
the NOAA wrote.</p>
<p>The agency has two theories on why it happened in this case: A cornered eel was trying to defend
itself or escape, and
wound up in the seal’s nose. Or the seal could have swallowed the eel first and regurgitated its
prey out the wrong way.</p>
</article>
<article class='newsarticle'>
<h4>Dog Pulls Off Spectacular Save During Argentina Soccer Match</h4>
<p>A pooch invaded the pitch during a Federal A league match between Juventud Unida and Defensores de
Belgrano over the weekend.</p>
<p>Juventud Unida were already comfortably ahead against Defensores de Belgrano in their league clash
when the dog
made his unexpected cameo.</p>
<p>Belgrano looked on course to go four goals down when their goalkeeper kicked the ball against a
Juventud player,
who then took a shot towards the empty net.</p>
<p>But in the nick of time, a dog came out of nowhere to race across the line and nod the ball away from
goal.</p>
<p>Unfortunately, the dog was unable to inspire a comeback as Juventud went on to win the match 3-0.</p>
</article>
<article class='newsarticle'>
<h4>Nobody Beats The Laws of Nature</h4>
<p>A 69-year-old Dutch man has failed in his attempt to legally declare himself 20 years younger.</p>
<p>Last month, motivational speaker Emile Ratelband filed a lawsuit against the Dutch government
requesting that his
date of birth be switched from March 11, 1949, to March 11, 1969.</p>
<p>n Monday, a court in the Netherlands city of Arnhem rejected his age-changing application, saying
that while Ratelband
“is at liberty to feel 20 years younger than his real age and to act accordingly,” actually changing
the birth certificate
is not possible.</p>
</article>
</section>
</div>
</body>
</html>
- *我正在尝试找出如何遍历 新闻文章 ， 并在新 HTML 中呈现标题和第一句。从本质上讲，如何从顶部开始创建和显示 snippet？我坚持这个。*
这是一个示例 HTML 代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Main Title</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>
<div id="wrappermain">
<h1>Heading 1.1 Up</h1>
<section id="headlines">
<h2>Heading 2.1</h2>
</section>
<section id="news">
<h3>Heading 3</h3>
<article class="newsarticle">
<h4>Heading level 4 - article title </h4>
<p>Article text here.</p>
<p> Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. </p>
</article>
<article class="newsarticle">
<h4>Another Heading </h4>
<p>Another article text.</p>
<p> Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. </p>
</article>
<article class="newsarticle">
<h4>Yet One More Article</h4>
<p>More and more text here.</p>
<p> Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. Text sample.Text sample.Text sample.Text sample. Text sample.Text sample. </p>
</article>
</section>
</div>
</body>
</html>
您可以试试这些链接，例如：
基本上你需要将DOM个元素赋值给变量，例如：
//multiple elements
var articles = document.querySelectorAll('. newsarticle');
//one element
var article = document.getElementById('news');
articles 变量的作用类似于数组，因此您可以循环遍历它。每个元素都可以有父元素、兄弟元素等。有多种访问和修改它们的方法。
那只是为了让你继续前进。这里的人不喜欢有人要求别人为 him/her 做工作。网上到处都是文档，祝你好运:)
操作 DOM 并生成您提到的 "snippets" 列表非常简单。下面的 javascript 是 运行 一旦填充了 DOM 并使用 querySelectorAll 查找要在显示中使用的所有相关文章 - 请参阅 js 中的注释。
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>JavaScript</title>
<script>
const createsnippets=function(e){
/* the reference node near where we will generate menu */
let headlines=document.getElementById('headlines');
/* utiity to add new dom element */
const create=function(t,v,p){
let n=document.createElement( t );
n.innerHTML=v;
p.appendChild( n );
return n;
};
/* create the list */
let ul=create( 'ul', null, document.body );
/* find all articles and add new snippet headline */
Array.from( document.querySelectorAll( 'article.newsarticle > h4' ) ).forEach( function( h4 ){
create( 'li', h4.textContent+' ... '+h4.nextElementSibling.innerText, ul );
});
/* refactor HTMl to ensure layout is "just so" */
headlines.parentNode.insertBefore( ul, headlines.nextSibling )
}
/* when the DOM is ready, create the list of headline snippets */
document.addEventListener( 'DOMContentLoaded', createsnippets );
</script>
<style>
ul{ color:red; }
</style>
</head>
<body>
<div id='wrappermain'>
<h1>Bizzare News Mash Up</h1>
<section id='headlines'>
<h2>Bizzare News Summary</h2>
</section>
<section id='news'>
<h3>News Stories in Full</h3>
<article class='newsarticle'>
<h4>What a load of Bull!</h4>
<p>Chinese Kung Fu Masters are seeking the ultimate opponents</p>
<p>Several times a week, kung fu teacher Ren Ruzhi enters a ring to spar with a bovine opponent around
five times his weight and capable of killing him.</p>
<p>Ren’s mixing of martial arts and bullfighting worries his mother, but the 24-year-old has never been
hurt. Besides, he says, grappling with a snorting bull is exciting.</p>
<p>It symbolizes the bravery of a man,” Ren told Reuters in Jiaxing in China’s eastern province of
Zhejiang.</P>
<p>Unlike Spain’s more famous sport, the Chinese variant of
bullfighting involves no swords or gore but instead fuses the moves of wrestling with the skill and
speed of kung fu to bring down beasts weighing up to 400 kg (882 lb).</p>
<p>“Spanish bullfighting is more like a performance or a show,” said Hua Yang, a 41-year-old enthusiast
who watched a bullfight during a visit to Spain.</p>
</article>
<article class='newsarticle'>
<h4>Has Anybody got a Tissue?</h4>
<p>A Hawaiian monk seal got an eel caught in its nose ― and it wasn’t the first time for these
endangered creatures.</p>
<p>The Hawaiian Monk Seal Research Program posted a startling pic of the poor pup on Monday, and the
National Oceanic
and Atmospheric Administration Fisheries provided more details in a post on Wednesday.</p>
<p>The administration said it has seen the same “eels in noses” phenomenon nearly a handful of times in
the last few years.</p>
<p>“We don’t know if this is just some strange statistical anomaly or something we will see more of in
the future,”
the NOAA wrote.</p>
<p>The agency has two theories on why it happened in this case: A cornered eel was trying to defend
itself or escape, and
wound up in the seal’s nose. Or the seal could have swallowed the eel first and regurgitated its
prey out the wrong way.</p>
</article>
<article class='newsarticle'>
<h4>Dog Pulls Off Spectacular Save During Argentina Soccer Match</h4>
<p>A pooch invaded the pitch during a Federal A league match between Juventud Unida and Defensores de
Belgrano over the weekend.</p>
<p>Juventud Unida were already comfortably ahead against Defensores de Belgrano in their league clash
when the dog
made his unexpected cameo.</p>
<p>Belgrano looked on course to go four goals down when their goalkeeper kicked the ball against a
Juventud player,
who then took a shot towards the empty net.</p>
<p>But in the nick of time, a dog came out of nowhere to race across the line and nod the ball away from
goal.</p>
<p>Unfortunately, the dog was unable to inspire a comeback as Juventud went on to win the match 3-0.</p>
</article>
<article class='newsarticle'>
<h4>Nobody Beats The Laws of Nature</h4>
<p>A 69-year-old Dutch man has failed in his attempt to legally declare himself 20 years younger.</p>
<p>Last month, motivational speaker Emile Ratelband filed a lawsuit against the Dutch government
requesting that his
date of birth be switched from March 11, 1949, to March 11, 1969.</p>
<p>n Monday, a court in the Netherlands city of Arnhem rejected his age-changing application, saying
that while Ratelband
“is at liberty to feel 20 years younger than his real age and to act accordingly,” actually changing
the birth certificate
is not possible.</p>
</article>
</section>
</div>
</body>
</html>