1、DOM:Document Object Model.
document:网页加载到浏览器中时,DOM将网页文档转化为一个文档对象。
Object:JavaScript的对象分为三种类型:
用户自定义对象(一般不讨论这种对象)
内建对象(非常重要)
宿主对象(通常称为BOM:浏览器对象模型,不必太纠结BOM)
Model:模型,或者称为Map(地图)
把文档的各个元素当做节点,将文档构成一个“节点数”
2、节点
元素节点:构成了文档模型的框架
文档节点:文档的内容
属性节点:决定了文档的表现形式
元素节点包含了属性节点和文档节点
3、获取元素
getElementById()
写法:document.getElementById(id) 只有一个参数,返回的结果是一个元素节点对应的对象
getElementsByTagName( )
写法:document.getElementsByTagName(tag) 只有一个参数,返回的结果是一个数组这个数组包含的是名为tag的元素节点的对象
getElementsByClassName( )
写法:document.getElementsByClassName(class) 只有一个参数,返回的结果是一个数组,这个数组包含的是同一个class名的元素节点的对象
Tips:1.typeof操作符:可以告诉我们他的操作数的类型。exp:
typeof document.getElementById(id); 返回的结果是Object,说明它的操作数是一个对象
2.通配符“*”:获取元素的后两个方法允许把通配符作为它的参数,这意味着,对应的每个元素都将被返回在数组里。
4、获取和设置属性
getAttribute:使用方式:object.getAttribute(attribute);这样就可以获取到这个对象的属性值
判断某个对象的属性值是否为空的方法,exp:
var paras = document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++){
var title_text=paras[i].getAttribute("title");
if(title_text!=null) alert(title_text);
}
在检查某项数据是否为null时,if语句可以更简便:if(title_text) … if(something)与if(something!=null)完全等价
setAttribute:使用方式:object.setAttribute(attribute,value);它允许我们对属性节点的值做出修改。
Tips:DOM的工作模式:
先加载文档的静态内容,再动态刷新,动态刷新时不影响文档的静态内容。这正是DOM的真正威力:对页面内容进行刷新却不需要在浏览器里刷新页面。