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工作模式:先加载文档静态内容,即现呈现原有源码,然后再动态添加,即添加后属性不会传回服务器,因而无法从源码中看到改变!!!!!