简单DOM操作 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1 {
            width: 200px;
            height: 200px;
            position: relative;
            background-color: grey;
        }
        .div2 {
            width: 100px;
            height: 100px;
            left: 50px;
            top: 50px;
            position: absolute;
            background-color: springgreen;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv1 = document.getElementsByClassName('div1')[0];
            var timer = setInterval(function(){
                if (oDiv1.offsetLeft > 800)
                {
                    clearInterval(timer)
                }
                oDiv1.style.left = oDiv1.offsetLeft + 2 + "px";
            },30);
        };
    </script>
</head>
<body>
<!--
元素属性的操作方式：
oDiv.style.display = 'block';
oDiv.style['display'] = 'block';
DOM方式，即采用函数：
获取 getAttribute(parm)
设置 setAttribute(parm1,parm2)
删除 removeAttribute(parm)

IE 谷歌chrome 火狐FF 浏览器对DOM的支持分别是10% 50% 99%
IE9之后对DOM支持的多一点
子节点：childNodes children
childNodes属性和nodeType属性
children 属性只包含元素节点不包含文本节点 用的多
推荐children不推荐childNodes,都是子节点,不包括孙节点等

父节点：parentNode
应用举例：单机链接，隐藏整个li

offsetParent 用来获取一个元素用来定位的那个父级元素 详见CSS中的相对定位/绝对定位
注意:div1 包含 div2,两个块元素,div2有绝对定位,div1不设置position,这个时候div1移动的时候div2不会移动,只有给div1设置相对定位,div2才会跟着div1移动而移动
如果div1不设置相对定位，div2.offsetParent是body，只有给div1设置相对定位，div2.offsetParent才是div1

首尾子节点 有兼容性问题
firstChild、firstElementChild
lastChild、lastElementChild
 firstChild存在兼容性问题，IE6-8下可用，高版本的浏览器不可用，高版本及其他高级浏览器需要使用firstElementChild
 使用if else 解决兼容性问题
 if(oUl.firstElementChild)
 {
 oUl.firstElementChild.style.background='red';
 }else
 {
 oUl.firstChild.style.background='red';
 }

兄弟节点
nextSibling、nextElementSibling
previousSibling、previousElementSibling

用className选择元素
 function getByClass(oParent,sClass)
 {
 var aResult=[];
 var aEle = oParent.getElementsByTagName('*');
 for(var i = 0; i<aEle.length;i++)
 {
 if(aEle[i].className == sClass)
 {
 aResult.push(aEle[i]);
 }
 }
 return aResult;
 }

DOM应用：
创建、插入和删除元素
创建DOM元素，createElement(标签名)、appendChild(节点)
插入元素，insertBefore(节点,原有节点)
删除DOM元素，removeChild(节点)

-->
<div class="div1">
    <div class="div2"></div>
</div>

</body>
</html>

详见：html基础总结&html5新特性

posted @ 2017-11-22 10:25  我将枕中记忆抹去任岁月浮光掠影  阅读(99)  评论(0)  编辑  收藏  举报