《JavaScript_DOM编程艺术》Chapter04-事件处理函数和Node类型---20210426

chapter 4

事件处理函数

事件处理函数1:点击

onclick = "showPic(this);return false"

事件处理函数2:加载

window.onload = countBodyChildren;

Node类型

childNodes属性

它是一个包含全部子元素的数组:element.childNodes

element.childNodes
  • length属性
childNodes.length

nodeType

由childNodes返回的数组不仅包含element节点,而且空格和换行符都会被解析为节点。 所以用nodeType来判断在于哪个节点打交道是必要的。

node.nodeType

1. 元素节点:nodeTyep = 12. 属性节点:nodeType = 23. 文本节点:nodeType = 3

nodeValue属性

想改变一个文本节点的值,那就使用DOM提供的nodeValue属性! 但是非文本节点的nodeValue很可能是空值。比如

的nodeValue属性就是null,因为真正存文本的是它的儿子–文本节点

#以下可能是NULLalert(description.nodeValue)

#取值它的儿子
alert(description.childNodes[0].nodeValue)

firstChild和lastChild

比childNodes[0]和childNodes[childNodes.length - 1]的可读性好!

综合代码

#gallery.html


<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>
            Image Gallery
        title>
        <link rel="stylesheet" href="styles/layout.css" media="screen">
    head>
    <body>
        <h1>Snapshotsh1>
        <ul id="purchases">
            <li>
                <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this);return false;">Fireworksa>
            li>
            <li>
                <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this);return false;">Coffeea>
            li>
            <li>
                <a href="images/rose.jpg" title="A red,red rose" onclick="showPic(this);return false;">Rosea>
            li>
            <li>
                <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this);return false;">Big Bena>
            li>
        ul>
        <img id="placeholder" src="images/placeholder.gif" alt="my image gallery">
        <p id="description">Choose an image.p>
        <script src="scripts/showPic.js">script>
    body>
html>

#styles\layout.css

body{
     
    font-family: "Helvetica","Arial",serif;
    color: #333;
    background-color: #ccc;
    margin: 1em 10%;
}
h1{
     
    color: #333;
    background-color: transparent;
}
a{
     
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul{
     
    padding: 0;
}
li{
     
    float:left;
    padding: 1em;
}
img{
     
    display: block;
    clear: both;
}

#scripts/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 descrition = document.getElementById("description");
    descrition.firstChild.nodeValue = text;
}


《JavaScript_DOM编程艺术》Chapter04-事件处理函数和Node类型---20210426_第1张图片

你可能感兴趣的:(dom,js,css)