Dom及JavaScript图片库

最新推荐文章于 2022-06-13 19:04:04 发布

吃瓜的兔

最新推荐文章于 2022-06-13 19:04:04 发布

阅读量607

点赞数 1

分类专栏： JavaScript 文章标签： DOM javascript

本文链接：https://blog.csdn.net/lsp199508/article/details/50626083

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

补充上一篇的内容：
JavaScript中的对象可以分为三种类型：
1.用户定义的对象：由程序员自行创建的对象。
2.内建对象：内建在JavaScript中的对象，如Array,Math与Date。

一. DOM

1.DOM

5个常用DOM方法：getElementById,getElementsByTagName,getElementsByClassName,getAttribute,setAttribute

2.getAttribute

getAttribute用于利用getElementById等方法得到所需元素后获取它的属性。
getAttribute不属于document对象，所以它只能通过元素节点对象调用。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
     <ul id="test">
        <li value="1">aa</li><li value="2">aaa</li><li>aaaa</li>
    </ul>
<script>
    var values=document.getElementsByTagName("li");
    for(var i=0;i<values.length;i++){
        alert(values[i].getAttribute("value"));
    }
</script>
</body>
</html>

3.setAttribute

setAttribute用于更改属性节点的值。例如：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
     <ul id="test" value="你好">
        <li value="1">aa</li><li value="2">aaa</li><li>aaaa</li>
    </ul>
<script>
    var values=document.getElementById("test");
    alert(values.getAttribute("value"));
    values.setAttribute("value","你也好");
    alert(values.getAttribute("value"));
</script>
</body>
</html>

4.css

在不同class属性同classname的情况下，可以通过class属性.classname{}的方式为元素定义特定的样式。
节点类型：元素节点，属性节点，文本节点。

JavaScript图片库

childNodes属性用于获取任何一个元素的所有子元素。
nodeValue属性用于获取一个节点的值，改变文本节点的值。
注：<p>元素原本的nodeValue属性是一个空值，<p>元素的文本是另一个节点，是<p>的第一个子节点。因此获取<p>的文本内容的写法：id名.childNodes[0].nodeVlue
firstChild相当于childNodes[0]
lastChild：childNodes的最后一个元素，相当于childNodes[node.childNodes.length-1]

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

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

图片库案例如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
    <script>
        function showPic(whichpic){    /*whichpic代表元素节点a*/
            var source=whichpic.getAttribute("href");   /*解析图片路径并存入source中*/
            var placeholder=document.getElementById("placeholder");
            placeholder.setAttribute("src",source); /*刷新id=placeholder中的src*/

            var content=whichpic.getAttribute("title");
            var description=document.getElementById("description");
            description.firstChild.nodeValue=content; /*刷新p中的文本值*/
    }

    </script>
</head>

<body>
    <ul>
        <li><a href="../images/7d0a79d0gw1ezmnxoszxyj20c80c8wg6.jpg" οnclick="showPic(this);return false;" title="one picture">第一张图片</a></li>
        <li><a href="../images/930212c3jw1ezmoc09hfuj20c80gawfm.jpg" οnclick="showPic(this);return false;" title="two picture">第二张图片</a></li>
        <li><a href="../images/930212c3jw1ezmoc11gqkj20c808raak.jpg" οnclick="showPic(this);return false;" title="three picture">第三张图片</a></li>
        <li><a href="../images/930212c3jw1ezmoc27n33j20c80dzwfe.jpg" οnclick="showPic(this);return false;" title="fourth picture">第四张图片</a></li>
    </ul>
    <img id="placeholder" />    
    <p id="description">显示图片</p>
</body>

</html>

效果图：