dom编程艺术笔记2--第三章

DOM

1.dom:简单理解为文档对象模型<==>节点树

2.宿主对象：浏览器提供的对象—>document对象

3.

　　html标签为树顶点元素

　　head body为html子元素以此类推个节点元素的父子关系

4.节点分类：

　　元素节点：即标签元素对象，可用该元素节点调用内部元素属性

　　文本节点:<p>内部包含的文本内容为文本节点

　　属性节点：标签内的属性以及属性值为属性节点 例如<p title="a">，title=“a”是属性节点

　　css复习:class属性： .class{font-style：xxx}

　　　　　　id属性： #id{font-style：xxx}

　　

5.获取元素

　　（1）getElementById：获取/返回id对应的元素对象

　　　　 document.getElementById("id")

　　（2）getElementsByTagName:筛选出同类标签的节点，返回一个数组对象，数组内对应相应标签的元素节点/元素对象

　　　　document.getElementsByTagName("tag")

　　　　支持通配符* 例如查看多少个元素节点：document.getElementByTagName("*").length;

　　　　查看某id对应元素内部有多少元素节点(id为shit的节点B下面还有多少节点元素)

　　　　【1】 a = document.getElementById("shit")

　　　　【2】 a.getElementsByTagName("*")

　　（3）getElementsByClassName（classname1 [classname2、classname3.....]空格分隔）：获取/取得classname对应的元素节点的对象数组

　　　　多个类名之间的匹配取交集，与顺序无关？？？？？

　　　　支持与document.getElementById混用：

　　　　　　【1】a = document.getElementById('id_name');获取id为id_name的元素节点对象a

　　　　　　【2】classname_arry = a.getElementByClassName("class_name");在元素节点对象a内，查找，并返回class为class_name的元素节点对象的数组

5.getAttribute（属性名）

　　object（元素节点对象）.getAttribute(属性名)：用于查看该属性值

　　例如：a = document.getElementsByTagName('tag_name')；查找tag_name的元素节点对象数组

　　　　   a[0].getAttribute('title')查看该对象数组中第一个对象的名为title的属性的值（如果该没有该属性，则返回Null）

6.setAttribute（"属性名"，"设置的值"）

　　object（元素节点对象）.setAttribute(“属性名”，“设置的值”)：用于修改该属性值,如果该属性没有，则添加该属性并且赋值

　　注意：setAttribute修改的属性，在源码中是查看不到的；

　　　　　因为dom工作模式：先加载文档静态内容，即现呈现原有源码，然后再动态添加，即添加后属性不会传回服务器，因而无法从源码中看到改变！！！！！