Dom 文档对象模型

最新推荐文章于 2022-06-24 19:22:31 发布

维克多噗噗

最新推荐文章于 2022-06-24 19:22:31 发布

阅读量318

点赞数

分类专栏：知识点

知识点专栏收录该内容

52 篇文章 0 订阅

订阅专栏

获取属性节点的值
getAttribute(attr) —setAttribute(attr,value) —-removeAttribute(attr)

获取属性节点
getAttributeNode(attr)

children 它不会拿除了元素节点的其他的节点.

childNodes 它会拿除了元素节点的其他节点.
===>返回的是个数组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="box">123<p>1</p>123<p></p>123<p></p>123<p></p>123<!-- 123 --></div>
    <!-- <div id="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div> -->
    <script type="text/javascript">
        /*
            IE9+
            (推荐)children    它不会拿除了元素节点的其他的节点

            childNodes  它拿除了元素节点的其他节点
         */
        //IE8+    querySelector
        var box = document.querySelector("#box");
        // alert(box.getElementsByTagName("p").length);
        // alert(box.children.length);//iE 8 注释也拿. iE9+ 不拿
        console.log(box.children[0]);
        box.children[0].style.color = "red";
        // console.log(box.childNodes.length);// 10
    </script>
</body>
</html>

节点

        节点        nodeName    nodeType    nodeValue
        元素        元素名称       1          null
        属性        属性名称       2          属性值
        文本        #text         3          文本

例子:

<div id="box" title="xq">
    我爱你们
    <p>1111</p>
    <p>1111</p>
</div>

var boxDom = document.getElementById("box");
// 元素节点
// DIV --- 1 --- null;
console.log(boxDom.nodeName+"====="+boxDom.nodeType+"====="+boxDom.nodeValue);
// console.log(boxDom.nodeName+"====="+boxDom.tagName+"====="+boxDom.localName);
// DIV-----DIV----div===>NodeName---tagName---localName

// 属性节点
// title --- 2 --- xq
var boxAttr = boxDom.getAttributeNode("title");
console.log(boxAttr.nodeName+"====="+boxAttr.nodeType+"====="+boxAttr.nodeValue);

// 文本节点
// #text --- 3 --- 我爱你们
var textNode = boxDom.childNodes[0];
console.log(textNode.nodeName+"====="+textNode.nodeType+"===="+textNode.nodeValue);

通过它们拿到对应元素节点进行操作

firstChild ====> IE8 其他浏览器会拿到其他的节点过滤空格,其他不过滤,文本节点没有属性方法
firstElementChild ====> IE9+支持只拿元素节点

lastChild ====> IE8 其他浏览器会拿到其他的节点过滤空格,其他不过滤,文本节点没有属性方法
lastElementChild ====> IE9+支持只拿元素节点

// 兼容IE  firstChild firstElementChild====> 只拿元素节点
if(boxDom.firstElementChild){
    boxDom.firstElementChild.style.color = "red";
}else{
    if(boxDom.firstChild){   // 拿第一个节点
        boxDom.children[0].style.color = "blue";
    }
}
// 兼容lastChild lastElementChild    同上

parentNode,parentElement, removeChild

        在javascript里 看的是父子关系 --- 层级关系
        parentNode(推荐)   符合w3c规范  只能一级一级找
        parentElement     这个不符合
        removeChild       在javascript里, 不可以自己干不掉自己 必须让父级干掉你.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="box">
        <p id="pp">1</p>
        <p >2</p>
        <p >3</p>
    </div>
    <script type="text/javascript">
        var pDom = document.getElementById("pp");
        // alert(pDom.parentNode.id);
        pDom.parentNode.removeChild(pDom);//只删掉pDom
    </script>
</body>

元素的大小(没单位)

        clientWidth/clientHeight=====>width+padding

        offsetWidth/offsetHeight --  平时使用====>width+border+padding

        scrollWidth/scrolHeight=====>width+padding+内容溢出的width

元素的位置(没单位)

offsetLeft/offsetTop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";padding: 100px;}
        #box{width: 100px;height: 100px;background: #111;color: #fff;text-align: center;line-height: 100px;border: 25px solid red;padding: 25px;}
        #pp{font-size: 20px;font-weight: bold;}
    </style>
</head>
<body>
    <div id="box">boxboxboxboxboxboxboxboxbox</div>
    <p id="pp"></p>
    <script type="text/javascript">
        var boxDom = document.getElementById("box");
        var pDom = document.getElementById("pp");
        //width + padding
        pDom.innerHTML = "clientWidth:===="+boxDom.clientWidth+"<br />";
        //width + border + padding
        pDom.innerHTML += "offsetWidth:===="+boxDom.offsetWidth+"<br />";
        //width + padding + 溢出文字的长度
        pDom.innerHTML += "scrollWidth:===="+boxDom.scrollWidth;
    </script>
</body>
</html>

这里写图片描述

添加,替换,创建元素节点/文本节点.

            追加
        appendChild
            创建元素节点
        createElement
            创建文本节点
        createTextNode
            替换
        replaceChild(newNode,oldNode)
            往已知节点前添加
        insertBefore(newNode,node)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
    </style>
</head>
<body>
    <div id="box">
        <p id="pp">123</p>
    </div>
    <script type="text/javascript">
        /*
                追加
            appendChild
                创建元素节点
            createElement
                创建文本节点
            createTextNode
                替换
            replaceChild(newNode,oldNode)
                往已知节点前添加
            insertBefore(newNode,node)
         */
        //创建一个元素节点 div
        /*
        var divDom = document.createElement("div");
        divDom.id = "box";
        divDom.style.color = "red";
        //创建了一个文本节点
        var textNode = document.createTextNode("我是一个div");
        //文本节点追加元素节点里边
        divDom.appendChild(textNode);
        //元素节点追加到body里边
        document.body.appendChild(divDom);
        */

        var boxDom = document.getElementById("box");
        var pp = document.getElementById("pp");
        var textNode = document.createTextNode("我是一个pppppp标签");
        var pDom = document.createElement("p");
        pDom.appendChild(textNode);
        boxDom.insertBefore(pDom,boxDom.children[0]);
        //pp.replaceChild(textNode,pp.childNodes[0]);
    </script>
</body>
</html>

小球追随轨迹例子
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #wrap{width: 400px;margin: 30px auto}
        #box{width: 400px;height: 400px;background: #111;position:relative;}
        #ball{width: 10px;height: 10px;position: absolute;left: 0;top: 0;background: green;border-radius: 10px;}
    </style>
</head>
<body>
    <div id="wrap">
        <input type="button" value="开始" onclick="cstart()" />
        <input type="button" value="暂停" onclick="cstop()" id="stop" />
        <div id="box">
            <div id="ball"></div>
        </div>
    </div>
    <script type="text/javascript">
        var boxDom = document.getElementById("box");
        var ball = document.getElementById("ball");
        var x = 0;
        var y = 0;
        var speed = 0.09;
        var timer = null;
        var balls = [];
        function draw(){
            x += speed;
            y += speed;
            var cleft = 195 + Math.cos(x)*200;
            var ctop = 195 + Math.sin(y)*200;
            ball.style.left = cleft +"px";
            ball.style.top = ctop +"px";
            //创建div
            var divDom = document.createElement("div");
            divDom.style.position = "absolute";
            divDom.style.left = ball.offsetLeft+"px";//ball的left
            divDom.style.top = ball.offsetTop+"px";//ball的top
            divDom.style.width = "5px";
            divDom.style.height = "5px";
            divDom.style.borderRadius = "5px";
            divDom.style.background = color();
            balls.push(divDom);
            boxDom.appendChild(divDom);
            // //用数组
            // if(balls.length>40){
            //     // var oBall = balls.shift();
            //     // boxDom.removeChild(oBall);

            //     //splice slice返回的是一个数组
            //     var oBall = balls.splice(0,1);//[<div></div>]
            //     boxDom.removeChild(oBall[0]);
            // };

            // 用children
            if(boxDom.children.length>40){
                var one = boxDom.children[1]
                boxDom.removeChild(one);
            }
        };

        timer = setInterval(draw,1000/30);
        function cstart(){
            if(timer)clearInterval(timer);
            timer = setInterval(draw,1000/30);
        }
        function cstop(){
            clearInterval(timer);
            var time = setInterval(function(){
                // var oball = balls.shift();
                // boxDom.removeChild(oball);
                // if(balls.length == 0)clearInterval(time);
                //
                var one = boxDom.children[1];
                boxDom.removeChild(one);
                if(boxDom.children.length == 1)clearInterval(time);
            },1000/30);
        }

        function color(){
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            return "rgb("+r+","+g+","+b+")";
        }
    </script>
</body>
</html>