跳转到内容

JavaScript/DOM

维基教科书,自由的教学读本

HTML文档在被浏览器加载时就被解析为一棵抽象的树,这棵树就是文档对象模型DOM),它的根节点在Javascript中表示为document。HTML文档中的每一个标签、每一段文字以及每一个注释都是DOM树的子节点。

访问临近节点

[编辑]

可以用firstChild()lastChild()childNodes()访问任何一个节点的子节点

查找特定节点

[编辑]

可以用getElementsByName()getElementsByClass()getElementsByTagName()访问任何一个节点的子节点

例:查找特定节点并中序遍历其子节点

[编辑]

例:错在哪里?

[编辑]

某网站托管了一组网页文件,其结构如下:

/
  index.html
  index.js
  images/
    dog.png
    cat.jpg
    elephant.tif

index.html

<html>
<head>
<script src="/index.js"></script>
</head>
<body>
<image id="selected" src="cat.jpg" />
<button onclick="change('images/cat.jpg')">点我选猫</button>
<button onclick="change('images/dog.png')">点我选狗</button>
<button onclick="change('images/elephant.tif')">点我选大象</button>
</body>
</html>

index.js

var imageNode = document.getElementById('selected');
function change(target){
  imageNode.src=target
}

点击页面上的三个按钮后,发现显示的图片没有变化,为什么?