学习DOM基础3

1 DOM把你编写的网页文档转换为一个文档对象；对象是一种自足的数据集合；与某个特定对象相关联的变量被称为这个对象的属性；只能通过某个特定函数去调用的函数被称为这个对象的方法；

2对象可以分为三种类型：用户定义对象、内建对象、宿主对象；

宿主对象最基本的对象window对象；BOM(浏览器对象模型)；

3 DOM把文档表示为一颗家谱树；家谱树本身就是一种模型；根元素是html，html代表整个文档；

4 节点（node）这个词是网络术语，他表示网络中的一个连接点；一个网络就是由一些节点构成的集合；包含着其他类型的节点: 元素节点、文本节点、属性节点；

5 在“购物清单”例子里，<p>元素包含着文本“Don’t forget to buy this stuff ”.他是一个文本节点（text node）；文本节点总是被包含在元素节点的内部；但并非所有的元素节点都包含文本节点；

6  DOM的原子是元素节点（element nod）；

7 属性节点（attribute nod）对元素做出更具体的描述；

例:<p tittle=”a gentle reminder”>Don’t forget to buy this stuff.</p>

在DOM 中tittle=”a gentle reminder”是一个属性节点；

8 并非所有的元素都包含着属性，但所有的属性都被元素包含着；

9 继承（inheritance）是CSS 技术中一项强大的功能；为了把某一个或某几个元素与其他元素区别开来，需要使用class 属性和id属性；

10可以在网页上任意任用class属性，可以为class属性相同的所有元素定义同一种样式；

11Id属性的用途是给网页里的某个元素加上独一无二的标识符；id本身只能使用一次；id就像是一个挂钩，一头连着文档里的某个元素，另一头连着css样式表里的某个样式；DOM也可以使用这种挂钩；

12三种DOM方法获取元素节点：getElementById, getElementsByTagName, getElementsByclassName;

13 getElementById,这个方法将返回一个与那个给定id属性值的元素节点对应的对象；请注意区分大小写；他是document对象特有的函数；在脚本代码里函数名的后面必须跟有一对圆括号，这对括号包含着函数的参数；getElementByI方法只有一个参数：你想获得的那个元素的id属性的值，这个id值必须放在单引号或双引号里；

document.getElementById(“purchases”);

14  type of 操作符可以告诉我们他的操作数是一个字符串、数组、函数、布尔值、还是对象；alert (typeof document.getElementById(“purchases”));

 

15我本人并不赞成把js代码直接嵌入文档，但这确实是简单快捷的测试手段；

16 事实上文档中的每个元素都有对象；利用DOM提供的方法能得到任何一个对象；

17 getElementsByTagName方法返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素；这个方法也只是只有一个参数的函数，他的参数是标签的名字:

element.getElementsByTagName(tag);

例：

document.getElementsByTagName(“li”);这个调用将返回一个对象数组，每个对象都对应着document对象中的一个列表项元素；与任何其他数组一样我们可以利用length属性查出这个数组里的元素个数；alert (document.getElementsByTagName(“li”).length);

18 改善代码的可读性：只要把document.getElementsByTagName(“li”) 赋值给一个变量即可；

var iteams=document.getElementsByTagName(“li”);

For(var i=0;i<iteams.length;i++)｛

  alert(typeof iteams[“i”]);

}

19通配符必须放在引号里(“*”);如果你想知道某份元素里总共有多少元素节点，像下面这样使用通配符即可：alert (document.getElementsByTagName(“*”).lenth);

20 getElementsByClassName可以通过class属性中的类名来访问元素；也只接受一个函数就是类名getElementsByClassName(class);用这个方法还可以查找那些带有多个类名的元素； alert (document.getElementsByClassName(“important sale”).length);不仅类名的实际顺序不重要，就算元素还带有更多类名也没有关系；

21 get Attribute是一个函数。他只有一个参数-你打算查询的属性的名字：

object.getAttribute(attribute);

22 getAttribute方法不属于document对象，所以不能通过document对象调用，他只能通过元素节点对象调用；

23 If(something)比if（something!=null）更简明的代码；

24 setAttribute也只能用于元素节点，允许我们对属性节点值做出修改；

语法：object.setAttribute(attribute,value);

25 如果一个属性的节点原先并不存在，setAttribute 先创建这个属性在设置他的值；如果用在一个本身就有这个属性的元素节点上，这个属性值就和被覆盖掉；

26 通过setAttribute对文档做出修改后，不会反应在文档本身的源代码里；因为DOM的工作模式先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容；这正是 DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面；