js--DOM对象

一、DOM:Document Object Model 文档对象模型

二、Dom分类：Dom core（核心）;

　　　　　　　HTML Dom;

　　　　　　　Css Dom;

三、节点和节点的关系：

　　1.整个文档是一个文档节点

　　2.每个html标签是一个元素节点

　　3.包含在html元素中的文本是文本节点

　　4.每个html属性是一个属性节点

　　5.注释属于注释节点

四、访问节点

　　（1）根据document对象的系列方法访问指定节点

　　（2）根据层次关系访问节点

　　　　　　parentNode 返回节点的父节点

　　　　　　childNodes 返回子节点集合，childNodes[i]

　　　　　　firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

　　　　　　lastChild 返回节点的最后一个子节点

　　　　　　nextSibling 下一个节点

　　　　　　previousSibling 上一个节点

五、解决浏览器兼容问题：

　　firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

　　lastElementChild 返回节点的最后一个子节点

　　nextElementSibling 下一个节点

　　previousElementSibling 上一个节点

例如：oNext = oParent.nextElementSibling || oParent.nextSibling

六、节点信息：

　　nodeName：节点名称

　　nodeValue：节点值（对于文档节点和元素节点是不可用的）

　　nodeType：节点类型

　　　　元素 element：1

　　　　属性 attr：2

　　　　文本 text: 3

　　　　注释 comments : 8

　　　　文档 document ：9

七、操作节点：

　　节点属性：

　　　　getAttribute("属性名")

　　　　setAttribute("属性名","属性值")

　　创建和插入节点：

　　　　createElement( tagName) 创建一个标签名为tagName的新元素节点

　　　　A.appendChild( B) 把B节点追加至A节点的末尾

　　　　insertBefore( A,B ) 把A节点插入到B节点之前

　　　　cloneNode(deep) 复制某个指定的节点

　　　　　　deep：true：复制该节点以及该节点的所有子节点

　　　　　　　　　false：只复制该节点及其属性

　　删除和替换节点：
　　　　removeChild( node) 删除指定的节点
　　　　replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

　　操作节点样式：

　　　　1.style属性：

　　　　　　元素.style.样式属性 ="值"

function whtmouseover() {
//要让字体变大 颜色变绿
document.getElementById("wht").style.fontSize="15px";
document.getElementById("wht").style.color="green";
};
function whtmouseout() {
//要让字体变小 
document.getElementById("wht").style.fontSize="8px";
document.getElementById("wht").style.backgroundColor="pink";
};

　　　　2.className 属性

　　　　　　/* 元素.className 事先在样式中创建名为.className的值的样式列表*/　　

　　　　　　元素.className="样式名称"

function lbmouseover() {
document.getElementById("lb").className="lb";
};
function lbmouseout() {
document.getElementById("lb").className="lbout";
}

　　　　3. 元素.style.cssText="css属性值"

function llmouseover() {
document.getElementById("ll").style.cssText="color:red;font-size:10px;";
}
function llmouseout() {
document.getElementById("ll").style.cssText="color:black;font-size:60px;";
}

八、获取元素的样式　　　

　　1.元素.style.样式属性

　　　　但此种方式只能获取内联方式的值，因此可以使用currentStyle对象

　　2.元素.currentStyle.样式属性

　　　　此对象的特性是只读的，如果要给样式属性赋值吗必须用style对象（只限于IE浏览器）

　　3.document.defaultView.getComputedStyle(元素，null).属性

　　　　（只有IE不支持）

九、获取元素位置

　　元素属性：
　　　　offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
　　　　offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
　　　　offsetHeight 返回元素的高度
　　　　offsetWidth 返回元素的宽度
　　　　offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
　　　　scrollTop 返回匹配元素的滚动条的垂直位置
　　　　scrollLeft 返回匹配元素的滚动条的水平位置
　　　　clientWidth 返回元素的可见宽度
　　　　clientHeight 返回元素的可见高度
　　元素属性应用：
　　　　document.documentElement.scrollTop;
　　　　document.documentElement.scrollLeft;
　　　　或者
　　　　document.body.scrollTop;
　　　　document.body.scrollLeft;
　　制作固定广告：

var adver;
window.onload=function(){
adver=document.getElementById("adver");
}
//onscroll:滚动条滚动时触发
window.onscroll=function(){
//获取滚动条滚动大小
var scorlltop=document.documentElement.scrollTop||document.body.scrollTop;
var scorllleft=document.documentElement.scrollLeft||document.body.scrollLeft;
//元素跟随滚动条一起变化
adver.style.top=scorlltop+30+"px";
adver.style.left=scorllleft+10+"px";
}

猜你喜欢