Div CSS / JS操作Node / Html-优快云博客

这是一个互动式的网页应用，用户可以点击喜欢的蓝调音乐专辑封面来收藏它们，并且最多可以收藏五张专辑到自己的Top5列表中。该应用通过JavaScript实现了动态添加和移除收藏的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ddddd

dddd

top5.html-------------------

<html>

<head>

<title>Top 5 CD Recommendations</title>

</head>

Click on a CD cover to add it to the Top 5 list. If you want to start over, click the "Start Over" button to clear the Top 5 list.

</div>

<img class="cover" src="images/vaughan_flood.jpg"

alt="Texas Flood, by Stevie Ray Vaughan" />

<img class="cover" src="images/clapton_cream.jpg"

alt="The Cream of Clapton, by Eric Clapton" />

<img class="cover" src="images/mayer_try.jpg"

alt="Try! Live, by John Mayer Trio" />

<img class="cover" src="images/waters_live.jpg"

alt="Live, by Muddy Waters" />

<img class="cover" src="images/house_delta.jpg"

alt="Original Delta Blues, by Son House" />

<img class="cover" src="images/cream_live.jpg"

alt="Royal Albert Hall, by Cream" />

<img class="cover" src="images/shepherd_ledbetter.jpg"

alt="Ledbetter Heights, by Kenny Wayne Shepherd" />

<img class="cover" src="images/johnson_complete.jpg"

alt="The Complete Recordings, by Robert Johnson" />

<img class="cover" src="images/hendrix_experience.jpg"

alt="Are You Experienced, by Jimmi Hendrix" />

<img class="cover" src="images/jorma_blues.jpg"

alt="Blue Country Heart, by Jorma Kaukonen" />

<img class="cover" src="images/johnson_wizard.jpg"

alt="The Original Guitar Wizard, by Lonnie Johnson" />

<img class="cover" src="images/lang_lie.jpg"

alt="Lie to Me, by Jonny Lang" />

</div>

</div>

<form>

</form>

</body>

</html>

test.html----------------------

<html>

<head>

<title>Insert title here</title>

<style>

.rank{

position: absolute;

text-align: center;

top: 20px;

left: 20px;

font-size: small;

background-color: yellow;

color: black;

border: thin solid white;

width: 80px;

height: 80px;

z-index: 99;

}

#div1 {

height: 270px;

padding: 10px;

border: thin solid red;

background-color: purple;

margin: auto 20px auto 20px;

}

</style>

//在Dom树内，一切都是节点：元素，文本，属性，注释。

//节点元素有getAttribute() 和 setAttribute()

var manganese = document.getElementById('xx').value;

var firstData = document.getElementByTagName("p")[0];

var htmlElement = document.documentElement;//HTML文档的<html>根元素

var myImage = document.createElement("img");

var favShows = document.createTextNode("24 and lost");

divNode.parentNode;

divNode.childnodes;

divNode.firstChild;

divNode.lastChild;

divNode.nodeName;

divNode.nodeValue;//nul / undefined

divNode.nodeType;

// 每种节点类型(元素, 文本, 属性)都具有一个数字。但是尽力不用Node,很多浏览器不支持。

if(someNode.nodeType == Node.ELEMENT_NODE){

//DO SOMETHING FOR ELEMENT

}else if (someNode.nodeType == Node.TEXT_NODE) {

// DO SOMETHING FOR TEXTNODE

}

divNode.parentNode.getAttribute("id").nodeValue;

//替代删除追加

//onclick()

divNode.appendChild(imgElement);

divNode.insertBefore(imgElement);

divNode.replaceNode(imgElement);

document.getElementById("top5").childNodes.length;

document.getElementById("top5").childNodes[i].nodeName.toLowerCase();

</script>

function document.onkeydown() {

if(event.keyCode == 13) {

document.getElementById("enter").click();

return false;

}

</script>

</head>

<body>

<p style="color: red">hello world</p>

<br/>

<br/>

</div>

</body>

</html>

top5.js--------------

function addOnClickHandlers() {

var cdsDiv = document.getElementById("cds");

var cdImages = cdsDiv.getElementsByTagName("img");

for (var i=0; i<cdImages.length; i++) {

cdImages[i].onclick = addToTop5;

}

function addToTop5() {

var imgElement = this;

var top5Element = document.getElementById("top5");

var numCDs = 0;

for (var i=0; i<top5Element.childNodes.length; i++) {

if (top5Element.childNodes[i].nodeName.toLowerCase() == "img") {

numCDs = numCDs + 1;

}

if (numCDs >= 5) {

alert("You already have 5 CDs. Click \"Start Over\" to try again.");

return;

}

top5Element.appendChild(imgElement);

imgElement.onclick = null;

var newSpanElement = document.createElement("span");

newSpanElement.className = "rank";

var newTextElement = document.createTextNode(numCDs + 1);

newSpanElement.appendChild(newTextElement);

top5Element.insertBefore(newSpanElement, imgElement);

}

function startOver() {

var top5Element = document.getElementById("top5");

var cdsElement = document.getElementById("cds");

while (top5Element.hasChildNodes()) {

var firstChild = top5Element.firstChild;

if (firstChild.nodeName.toLowerCase() == "img") {

cdsElement.appendChild(firstChild);

} else {

top5Element.removeChild(firstChild);

}

addOnClickHandlers();

}

top5.css-------------

body {

font-family: "Comic Sans MS", Verdana, sans-serif;

text-align: center;

}

#instructions {

margin: 20px 200px;

}

#cds {

width: 400px;

margin: 20px auto 20px auto;

}

form {

position: relative;

margin: 50px auto auto auto;

}

img.cover {

height: 70px;

padding: 10px;

}

#top5-listings {

margin: 50px auto;

}

#top5 {

position: relative;

border-top: thin solid black;

margin: 10px auto 10px auto;

width: 650px;

padding: 10px;

text-align: left;

}

#top5 img {

position: relative;

height: 100px;

padding: 0px;

margin: 10px;

top: 10px;

left: 5px;

z-index: 1;

}

.rank {

position: absolute;

text-align: center;

top: 20px;

font-size: small;

background-color: black;

color: white;

border: thin solid white;

width: 20px;

z-index: 99;

}