DOM,Document-Object-Map(Model)
DOM的工作模式,先加载文档的静态内容,再动态刷新,动态刷新不影响文档的静态内容。即对页面内容进行刷新却不需要在浏览器里刷新页面。
1、js中有三种对象
- 用户自定义对象
- 内建对象,如Array,Date等
- 宿主对象,由浏览器提供的对象
2、DOM中最主要的三种节点类型
- 元素节点,主查页面标签
- 文本节点,即标签包括起来的文本内容
- 属性节点,总是会被包含在元素节点之中
3、3种获取指定元素节点的DOM方法
- getElementById,如document.getElementById("purchases"),该调用返回一个元素对象。
- getElementByTagName,返回一个对象数组,支持使用一个通配符作为参数查找所有的元素。
var shopping = document.getElementById("purchases");
var items = shopping.getElementByTagName("*");
- getElementByClassName
var shopping = document.getElementById("purchases");
var sales = shopping.getElementByClassName("sale");
4、其他知识点
- 一份文档就是一棵节点树
- 节点分为不同的类型:元素节点、属性节点和文本节点等
- getElementById将返回一个对象,该对象对应着文档里的一个特定的元素节点
- getElementByTagName和getElementByClassName将返回一个对象数组,它们分别对应着文档里的一组特定的元素节点
- 每个节点都是一个对象
5、获取和设置属性
object.getAttribute(attribute)
object.setAttribute(attribute)
var paras = document.getElementsByTagName("p");
for (var i=0; i<paras.length;i++) {
var title_text = paras[i].getAttribute("title");
if (title_text) alert(title_text);
}注:上面代码中的if语句使用了两个小技巧,以使得代码更加简明。
6、使用DOM知识编写一个图片库
本部分的三个主要内容是:
- 学习使用DOM所提供的方法去编写图片库脚本;
- 学习利用事件处理函数把js代码和网页集成在一起;
- 初步认识CSS;
事件处理函数:在特定事件发生时调用特定的JavaScript代码。
语法如下:
event = "JavaScript satement(s)" --可以把任意数量的JavaScript语句放在这对引号之间,只要把各条语句用分号隔开即可。
怎么样阻止在点击链接后离开当前页面的默认行为?
方法是在js函数后添加一个方法的返回值,让事件处理函数认为“这个链接没有被点击”。这样就可以防止用户被带到目标链接窗口。
onclick = "showPic(this); return false;"
怎么使用ChildNodes属性
在一棵节点树上,childNodes属性可以用来获取任何一个元素的所有子元素,这是一个包含全部子元素的数组。
例如,获取body元素的全体子元素:
var body_element = document.getElementByTagName("body")[0];
body_element.childNodes;
body_element.childNodes.length; --获取数组元素数量
nodeType属性类型
由childNodes返回的数组包含所有类型的节点,而不仅仅是元素节点。内容中的空格和换行符也会被解释为节点。
因此,需要掌握nodeType的使用:
node.nodeType;
nodeType属性共有12种可取值,但最常用的只有以下3种:
- 元素节点的nodeType属性值是1;
- 属性节点的nodeType属性值是2;
- 文本节点的nodeType属性值是3;
占位符的使用:我们需要在当前页面显示自己的图片库,就需要预先设置好一个标记文件起“占位置”的作用。
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> --一个图片占位符
<p id="description">Choose an image.</p> --一个文本占位符
nodeValue属性
如果想改变一个文本节点的值,就需要使用nodeValue属性,它可以用来得到或设置一个节点的值。
怎么获取<p>元素里的文本?
description.nodeValue --这只会返回一个null值,因为返回的是<p>元素本身的nodeValue
description.childNodes[0].nodeValue --这样才能正确得到文本内容,原因是包含在<p>元素里的文本是另一种节点,它是<p>元素的第一个子节点。
firstChild属性和lastChild属性
childNodes数组的第一个元素可以写成firstChild:
node.firstChild;
等同于
node.childNodes[0];
node.lastChild;
等同于
node.childNodes[node.childNodes.length-1];
因此<p>元素中文本内容值可以表示为以下:
description.firstChild.nodeValue;
本部分使用到的代码样例:
gallery.html
<!DOCTYPE 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>Snapshots</h1>
<ul>
<li><a href="images/fireworks.jpg" οnclick="showPic(this); return false;" title="A fireworks display">Fireworks</a></li>
<li><a href="images/coffee.jpg" οnclick="showPic(this); return false;" title="A cup of back coffee">Coffee</a></li>
<li><a href="images/rose.jpg" οnclick="showPic(this); return false;" title="A red,red rose">Rose</a></li>
<li><a href="images/bigben.jpg" οnclick="showPic(this); return false;" title="A famous clock">Big Ben</a></li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">Choose an image.</p>
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
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 {
fload: left;
padding: 1em;
list-style: none;
}
img {
display:block;
clear:both;
}
7、DOM Core和HTML-DOM
像以下几个方法都是DOM Core的组成部分:
- getElementById
- getElementByTagName
- getAttribute
- setAttribute
这些方法并不专属于javascript,任一种支持DOM的语言都可以使用它们,如XML。
HTML-DOM提供了一个forms对象,这个对象允许把下面这样的语句:
document.getElementsByTagName("form")
简化为:
document.form
又如:
element.getAttribute("src") --> element.src
var source = whichpic.getAttribute("href") --> var source = whichpic.href
placeholder.setAttribute("src",source) ---> placeholder.src = source