Javascript Document Object Model

DOM :DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件

D:文档  –  html 文档 或 xml 文档
O:对象 – document 对象的属性和方法
M:模型 
 

DOM 是针对xml(html)的基于树的API。
DOM树:节点(node)的层次。
DOM 把一个文档表示为一棵家谱树(父,子,兄弟)
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

DOM获取元素的三种方式

//getElementById() 返回对拥有指定 id 的第一个对象的引用。 
var div = document.getElementById("divId");
print(div);
print(div.innerHTML);
//getElementsByName() 返回带有指定名称的对象集合。
var favs =document.getElementsByName("favs");
print(favs);
//getElementsByTagName() 返回带有指定标签名的对象集合。 
var divs = document.getElementsByTagName("div");
print(divs);

Node对象的属性和方法

1.常用属性和方法

        firstChild    
        lastChild    
        childNodes    
        previousSibling    
        nextSibling    
        hasChildNodes()    

2.元素节点/文本节点/属性节点的nodeName/nodeValue/nodeType区别

属性操作

1.元素上的原始属性和自定义属性的获取值和设置值

   操作元素的原始属性:
     获取属性值:
         元素对象.属性名;
         元素对象["属性名"];
     设置属性值:
         元素对象.属性名=值;
         元素对象["属性名"]=值;
 
 操作元素自定义属性:
     获取属性值:
         元素对象.getAttribute("属性名");
     设置属性值:
         元素对象.setAttribute("属性名",值);

2.操作属性名和默认属性值相同的属性. 如:checked,selected
3.操作class属性.-->属性名为:className
4.操作style的属性.如:background-color
5.操作readonly属性:readonly--->readOnly

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注