《JavaScript.DOM编程艺术》笔记1

改变文本节点的值

html有一个p标签

<p id="test">testeeeeeeee</p>

想通过javascript DOM提供的方法修改p标签中文本的值
具体的方法是用dom提供的 nodeValue属性

p元素中的文本也属于一个节点,且是p元素的第一个子节点,可以使用firstChild 获取
所以获取p元素的文本值得方法为

<script>
    var test = document.getElementById("test");
    alert(test.firstChild.nodeValue)
</script>

如果要修改p元素的文本值 方法为

<script>
    var test = document.getElementById("test");
    var text = "QQ"
    test.firstChild.nodeValue = text
</script>

点击链接更换图片

先看html的内容

<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <script type="text/javascript" src="../js/showPic.js"></script>
</head>
<body>
<h1>头像</h1>
<ul>
    <li><a href="../img/test1.jpg" title="头像1" onclick="showPic(this);return false">头像w</a></li>
    <li><a href="../img/test2.jpg" title="头像2" onclick="showPic(this);return false">头像q</a></li>
    <li><a href="../img/test3.jpg" title="头像3" onclick="showPic(this);return false">头像e</a></li>
</ul>

<img id="placeholder" src="../img/placeholder.jpg" alt="img gallery">
<p id="description">choose a img</p>
</body>

showPic.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

};

总结

主要是关于几个基础的DOM方法的学习