读解JavaScript_DOM编程艺术笔记（三）——案例研究图片库以及节点属性

最新推荐文章于 2019-06-29 17:19:52 发布

Dodder_B

最新推荐文章于 2019-06-29 17:19:52 发布

阅读量159

点赞数

分类专栏： JavaScript_DOM编程艺术笔记文章标签： JS DOM

本文链接：https://blog.csdn.net/sharilove/article/details/81638675

版权

JavaScript_DOM编程艺术笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

element.value = “the new value” 等价于 element.setAttribute(“value”,”the new value”);
编者更偏向后者的书写。
这个案例研究适合于刚入门的新手Web开发者（但建议把基础学完），以简单浅显的案例把事件处理函数讲得透彻生动，给人一种“啊！效果原来是这样产生的啊，好像我自己也能实现其它的页面效果了呢”的感觉。对于小白们，确实，这本入门级别的书适合一个基础的DOM理解，但文中第六章起的源代码与实际呈现效果有点出入，需要对代码略加修改，本节内容的代码实现没有问题，大家也可以自己尝试写写看
以下是html源代码：

<!DOCTYPE html >
<html>
    <head>
        <title> JavaScript图片库 </title>
        <meta charset="utf-8"/>
    </head>

    <body>
        <h1>Goods</h1>
        <ul>
            <li>
<!-- onclick点击事件的对应js执行语句，以及检测是否执行了onclick后的两种对应情况，之后的优化onclick会放到外部文件 -->
                <a href="images/01.jpg" title="goods_a" onclick="showPic(this);return false;">A</a>  
            </li>
            <li>
                <a href="images/02.jpg" title="goods_b" onclick="showPic(this);return false;">B</a>
            </li>
            <li>
                <a href="images/03.jpg" title="goods_c" onclick="showPic(this);return false;">C</a>
            </li>
        </ul>
<img id="placeholder" src="images/00.jpg" alt="my image gallery" />
    <script type="text/javascript" src="scripts/myjs.js"></script>
    </body>

</html>

myjs.js源代码：

function showPic(whichpic){
    var source = whichpic.getAttribute("href");     //源图片的位置指向
    var placeholder = document.getElementById("placeholder");//需要改变的属性对象
    placeholder.setAttribute("src",source); //改变对象的src属性值
}

1.childNodes属性
element.childNodes

假设需要把某个文档的body元素的全体子元素检索出来：
var body_element = document.getElementByTagName(“body”)[0]; //由于每份文档只有一个body元素
body的全部子元素：body_element.childNodes

我们可以通过在页面加载时来调用countBodyChildren函数

function countBodyChildren(){
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.childNodes.length);
}
window.onload = countBodyChildren;  //该执行语句放在JS代码段的末尾，输出9

2.nodeType属性
按上面的结构来看，body元素只有3个子元素，实际上childNodes返回的不仅仅是元素节点，文档里几乎每一样东西都是一个节点，甚至连空格和换行符都会被解释为节点。还好每个节点都有nodeType属性。
获取节点的nodeType属性：
node.nodeType
如果我们把上面的countBodyChildren中的alert语句替换成以下的语句，就会输出1，：
alert(body_element.nodeType);

nodeType属性共有12种可取值，但其中仅有3中具有实用价值
1）元素节点：属性值为1
2）属性节点：属性值为2
3）文本节点：属性值为3

3.在标记里增加一段描述
通过标记里的id属性，使指向该属性的对象的文本内容进行替换，替换为img中title的文本内容

4.nodeValue属性
用来得到（和设置）一个节点的值
var description = document.getElementById(“description”);
alert(description.childNodes[0].nodeValue); //如果不指向description的子节点的话，输出是null，因为p本身的该值属性为空，要指向该节点的子节点，即文本节点，此时输出的是文本节点的值
description.firstChild.nodeValue = text; //文本节点的值替换为图片的title,firstChild等价于 node.childNode[0]

5.firstChild和lastChild属性
node.firstChild 完全等价于 node.childNode[0]
而lastChild与之对应，表示数组最后一个元素