文本节点和属性节点内容替换

最新推荐文章于 2023-01-18 17:03:38 发布

原创最新推荐文章于 2023-01-18 17:03:38 发布 · 649 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用JavaScript操作DOM的实例，通过修改元素的属性实现图片切换效果，并展示了如何获取和设置节点的nodeValue。

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

nodeType属性总共有12种可取值，其中只有3种具有实用价值

a. 元素节点的nodeType属性值是1.

b. 属性节点的nodeTyoe属性值是2.

c. 文本节点的nodeType属性值是3.

测试demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <script type="text/javascript" src="js/showPic.js" ></script>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li><a href="images/ad.jpg" title="A fireworks display" onclick="showPic(this);return false;"  >Fireworks</a></li>
        <li><a href="images/ad2.jpg"  title="A cup of black coffee" onclick="showPic(this);return false;">coffee</a></li>
        <li><a href="images/ad3.jpg" onclick="showPic(this);return false;" title="A red, red rose">Rose</a></li>
        <li><a href="images/ad4.jpg" title="the famous clock" onclick="showPic(this);return false;">Big Ben</a></li>
        <img id="placeholder" src="images/placeholder.jpg" alt="my img gallery"/>
    </ul>   
    <p id="description">Choose an image.</p>
</body>
</html>

js 代码

 function showPic(whichpic){
    var source = whichpic.getAttribute("href");
    var placeholder=document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
    var text = whichpic.getAttribute('title');
    var description = document.getElementById("description");
    description.firstChild.nodeValue=text;
}