DOM

2017-10-14 本文已影响0人 likeli

DOM简介

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。

DOM属性

简单常用属性
className、 id 、innerHTML、 innerText 、style。

DOM中特殊属性
1.大小width height

 var 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的基础知识点应该就那么些如果去深究的话肯定特别的多。

DOM

DOM简介

DOM属性

DOM对象

DOM节点

猜你喜欢

热点阅读