JavaScript---DOM（基础）

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myTest</title>

<style>

    body, ul{
        margin: 0;
        padding: 0;
    }
    body {
        color: white;
        background-color: black;
    }

    #purchases {
        border: 1px solid white;
        background-color: #333;
        color: #ccc;
        padding: 1em;
    }
    #purchases li {
        font-weight: bold;
    }
    p {
        color: yellow;
        font-family: "arial", sans-serif;
        font-size: 1.2em;
    }
</style>

</head>
<body>
    <h1>What to buy ?</h1>
    <p title="a gentle reminder">Don't foger to buy this stuff.</p>
    <ul id="purchases">
        <li>shoes</li>
        <li class="sale">hat</li>
        <li class="sale important">towel</li>
    </ul>

    <script>
        var mood = "about 5'10\" tall", age = 32;
        alert(mood);
        alert(age);

        //DOM方法的使用
        //每个标签（节点）都是一个对象
        1、getElementByID
        //返回id对应的对象
        //实列：
        alert(typeof document.getElementById('purchases'));
        2、getElementByTagName
        //返回一个对象数组
        alert(document.getElementsByTagName('li').length);
        alert(document.getElementsByTagName('*').length);
        //显示标签的总个数
        var shopping = document.getElementById('purchases');
        var items = shopping.getElementsByTagName('*');
        alert(items.length);
        3、getElementsByClassName
        //返回class对应的对象数组
        4、getAttribute
        //查询属性的值

         var paras = document.getElementsByTagName('p');
        for (var i = 0; i < paras.length; i++) {
            var titleText = paras[i].getAttribute('title');
            if (titleText != null) alert(titleText);
        }

        //5、setAttribute
        //修改属性

        var shopping = document.getElementById("purchases");
        alert(shopping.getAttribute("title"));
        shopping.setAttribute("title", "a list of goods");
        alert(shopping.getAttribute("title"));


    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>

<style>
    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;
        list-style: none;
    }
    img {
        display: block;
        clear: both;
        width: 50%;
    }
</style>

</head>
<body>
    <h1>My js---Gallery</h1>

    <ul>
        <li>
            <a href="C:\Users\zwh\Desktop\simple\images\1.jpg"
               onclick="showPicture(this); return false;"
               title="A beautiful alien globe">外星球</a>
        </li>
        <li>
            <a href="C:\Users\zwh\Desktop\simple\images\2.jpg"
               onclick="showPicture(this); return false;" 
               title="A beautiful girl">美女</a>
        </li>
        <li>
            <a href="C:\Users\zwh\Desktop\simple\images\3.jpg"
               onclick="showPicture(this); return false;"
               title="the many stars">星星</a>
        </li>
        <li>
            <a href="C:\Users\zwh\Desktop\simple\images\4.jpg"
               onclick="showPicture(this); return false;"
               title="The beautiful view">风景</a>
        </li>
    </ul>

    <img id="placeholder" src="C:\Users\zwh\Desktop\simple\images\1.jpg" alt="my image gallery">
    <p id="description">Choose an image.</p>

    <script>

        //点击链接把img图片替换给链接的图片
        //nodeValue用来改变一个节点的值或查看节点值
        //childNodes用来获取一个元素的所有子元素
        function showPicture (whichPicture) {
            //whichPicture代表一个元素节点

            //提取属性的值
            var sourceHref = whichPicture.getAttribute("href");
            var soreceTitle = whichPicture.getAttribute("title");

            //得到对应id的对象
            var placeholder = document.getElementById("placeholder");
            var description = document.getElementById("description");

            //description.childNodes[0].nodeValue = soreceTitle;
            description.firstChild.nodeValue = soreceTitle;

            placeholder.setAttribute("src", sourceHref);


        }
        //nodeType让我们知道正在和那个节点的打交道

        function countBodyChildren() {
            var bodyElement = document.getElementsByTagName("body")[0];
            alert(bodyElement.nodeType);
        }
        //自动加载方法
        //window.onload = countBodyChildren;

    </script>

</body>
</html>

JavaScript---DOM（基础）

猜你喜欢