DOM简介
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
DOM属性
-
简单常用属性
className、 id 、innerHTML、 innerText 、style。 -
DOM中特殊属性
1.大小width heightvar box=document.getElementsByClassName("box")[0]; var box2=document.getElementsByClassName("box2")[0]; var redDiv=document.getElementsByClassName("redDiv")[0]; console.log(box.offsetHeight);//带边框的高度 console.log(box.clientHeight);//可视高度（不包含滚动条和边框等） console.log(box.scrollHeight);//内容总高度
2.位置left top
console.log("---------------")
console.log(redDiv.offsetTop);//相对于定位父级的top值
console.log(redDiv.clientTop);//与边框有关，一般指代边框
box.onclick=function(){
console.log(box.scrollTop);//box滚动上去的那一部分，不能滚动的元素，scrollTop一般为0
}
3.窗口宽度
// inner不包含工具栏，控制台
// outer包含工具栏，控制台
console.log(window.innerWidth);
console.log(window.outerWidth);
DOM对象
DOM节点
- childNodes获取所有子节点，换行也是一个节点
- children 所有是标签类型的子节点
- parentNode：父节点
- nextSibling 下一个兄弟节点
- previousSibling上一个兄弟节点
- firstChild第一个子集节点
- lastChild：最后一个子节点
创建标签类型节点
var span=document.createElement("span");
appendChild 在redDiv末尾插入span标签
redDiv.appendChild(span);
insertBefore 在**之前插入span
redDiv.insertBefore(span,redDiv.children[1]);
移出的方法 移出div的子节点
redDiv.removeChild(redDiv.children[6]);
移出address标签,是第七个子集标签
redDiv.children[6].remove();
一个简单的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 75px;
height: 75px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: url("1.png");
z-index: 12;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="bo"></div>
</body>
<script type="text/javascript">
var box=document.getElementsByClassName("box")[0];
var timer1;
box.onclick=function(){
clearTimeout(timer1);
box.style.background="url(2.png)"
timer1=setTimeout(function(){
box.style.background="url(1.png)"
},100)
var div1=document.createElement("div");
box.appendChild(div1);
div1.style.width="25px";
div1.className="div";
div1.style.height="16px";
div1.style.backgroundImage="url(3.png)";
div1.style.position="absolute";
div1.style.top="28px";
div1.style.right="-20px";
var a=-20;
var timer=setInterval(function(){
a--;
div1.style.right=a+"px";
if(a<=-520){
clearInterval(timer);
box.removeChild(div1);
}
},5)
}
</script>
</html>
DOM的基础知识点应该就那么些如果去深究的话肯定特别的多。
网友评论