<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
<
html
>
<
head
>
<
meta
http-equiv
="keywords"
content
="keyword1,keyword2,keyword3"
>
<
meta
http-equiv
="description"
content
="this is my page"
>
<
meta
http-equiv
="content-type"
content
="text/html; charset=UTF-8"
>
<!--
<link rel="stylesheet" type="text/css" href="./styles.css">
-->
<
title
>
Shopping list
</
title
>
<
style
type
="text/css"
>
p
{
color
:
yellow
;
}
</
style
>
</
head
>
<!--
DOM的工作模式:先加载文档的静态内容，再以动态方式对他们进行刷新，动态刷新不影响文档的静态内容．
对页面内容的刷新不需要用户在他们的浏览器里执行页面刷新操作就可以实现
-->
<
body
>
<!--
文档是由节点构成的，在dom中存在许多不同类型的节点。
元素节点：DOM的原子是元素节点，如果把web上的文档比较一座大厦，元素就是大厦的砖块．
这些元素的在文档中的布局形成了文档的布局．
各种标签提供元素的名字．如<p>,<div>等．
元素可以包含其他元素，没有被包含在其他元素中的唯一元素是<html>,它是我们节点树的根元素．
文本节点：文本节点总是包含的元素节点的内部，但并不是所有的元素节点都包含有文本节点．
属性节点：元素都或多或少地有一些属性，属性的作用是对元素做出更具体的描述。
例如，几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述
属性总是被放在起始标签里，所以属性节点总是被包含在元素节点当中。
-->
<
h1
>
what to buy
</
h1
>
<
p
title
="a gentle reminder"
>
Don't forget to buy this stuff
</
p
>
<
ul
id
="purchases"
>
<
li
>
Cheese
</
li
>
<
li
>
Milk
</
li
>
<
li
>
Apple
</
li
>
</
ul
>
<!--
document.getElementById("元素属性id"):返回一个对象，这个对象对应DOM中独一无二的元素．
getElementsByTagName("标签的名字tag") :返回一个对象数组.
方法允许我们把一个通配符当为它的参数,如想知道文档中有多少个元素节点
使用document.getElementsByTagName("*").length;
getElementById()和getElementsByTagName()方法结合起来运用:
var shopping=document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");
object.getAttribute(attribute):返回对象的属性值．getAttribute()不能通过document对象调用，只能通过元素节点调用它．
object.setAttribute(attibute,value):设置对象的属性值，只能通过元素节点对象调用的函数．
setAttribute()方法做出的修改不会反映在文档本身的源代码里
element.childNodes：返回一个数组，这个数组包含给定元素节点的全部子节点．
-->
</
body
>
</
html
>