49 BOM 和DOM

一.BOM
　　window 对象
　　1.确认，输入，
　　　　window.alert(123) // 弹框
　　　　let ret = window.confirm("是否删除") //确认
　　　　let ret =window.prompt(">>>") // 输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        // window对象 alert
        // window.alert(123);
        // let ret=window.confirm("是否删除?");
        // console.log(ret); //true  false
        // let ret2=window.prompt("请输入验证码")
        // console.log(ret2);
    </script>
</head>
<body>

</body>
</html>

window 对象中打印，弹框，输入

　　2.定时器
　　　　 var ID;
　　　　ID = setInterval(func名,1000) ; //设置定时器
　　　　clearInterval(ID); //清除定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //计时器

        function show_time() {
            //// 创建时间字符串
            var now = new Date().toLocaleString();//此变量需要放在函数内部
            var el = document.getElementById("jishiqi");
            el.value =now;
        }
        var ID; //在函数外部先定义一个ID变量，并不赋值，方便其他函数可以引用该变量
        function setTimer() {
            //if 判断防止，计时器重复设置，没设置计时器之前ID===underfined
            if (ID===undefined){
                show_time(); //解决需要等待第一秒的问题
                ID = setInterval(show_time,1000);//每隔一秒，执行show_time函数一次
            }
        }
        function stop_time() {
            clearInterval(ID);
            ID = undefined;
        }

    </script>

    <input type="text" id ="jishiqi" class="c1">
    <button onclick="setTimer()">start</button>
    <button onclick="stop_time()">end</button>

</body>
</html>

计时器

3.location 对象
　　 location.href ="http://www.baidu.com" 跳转到指定页面
　　 location.assign("http://www.baidu.com")跳转到指定页面（assign表示分配，指派）
　　 location.href 拿到整个url
　　location.search 拿url数据部分
　　 location.host

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //location.herf 获取url
        //location.search 获取url 后的数据部分
        // console.log(location.href);
        console.log(location.search);
        // location.href = "http://www.baidu.com"; //跳转到指定的页面，此处跳转到百度页面
        // location.assign("http://www.taobao.com");//跳转到淘宝页面
        console.log(location.host);
    </script>


</body>
</html>

location对象

二.DOM
　　文档树结构：树形结构
　　两个DOM(节点)对象：
　　　　1.document对象
　　　　2.element对象:所有标签
　1.查找标签
　　1.直接查找
　　　　document.getElementById() //一个结果
　　　　document.getElementsByTagName() // 数组
　　　　document.getElementsByClassName() // 数组
　　　　document.getElementsByName() // 数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<div class="c1" id="i1">
    <p>123</p>
    <div class="c2">222</div>
</div>

<div class="c2">333</div>

<script>
     /*
      document.getElementById();    // 一个element对象
      document.getElementsByClassName(); // 多个element对象构成的数组
      document.getElementsByTagName(); // 多个element对象构成的数组
      document.getElementsByName(); // 多个element对象构成的数组
      document.getElementsByClassName("c2");
      */
      var c1=document.getElementsByClassName("c1")[0];
      console.log("c1",c1);
      var c2=c1.getElementsByClassName("c2")[0];
      console.log(c2)

</script>
</body>
</html>

View Code

　　2.导航查找
　　　　parentElement 父节点标签元素
　　　　children 所有子标签
　　　　firstElementChild 第一个子标签元素
　　　　lastElementChild 最后一个子标签元素
　　　　nextElementSibling 下一个兄弟标签元素
　　　　previousElementSibling 上一个兄弟标签元素

　　　　var ul = document.getElementById("target1");//通过id名获取
　　　　var li1 = ul.getElementsByClassName("li1")[0];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>

</head>
<body>
    <ul class="box" id ="target1" >
        <li class="li1">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div></div>
    <input type="text" name="wang">

    <script>
        // 导航查找法

        var ul = document.getElementById("target1");//通过id名获取
        var li1 = ul.getElementsByClassName("li1")[0];

        li1.onclick = function (ev) {
            // alert(2);
            this.style.background = "pink";
        };
        //获取下一个兄弟节点
        var li2 = li1.nextElementSibling;
        li2.onclick = function () {
            alert("第2个li");
        };
        var li3 = li1.nextElementSibling.nextElementSibling;
        li3.onclick = function () {
            alert("第3个li");
        };
        //获取父节点
        var  partent = li1.parentElement;
        partent.onclick = function (ev) {
            this.style.background ="green";
        };
        //获取父节点下的所有子节点
        var lis = partent.children;


    </script>


</body>
</html>

View Code

　2..标签控制
　　　　1.文本控制

　　　　　　var ele = document.getElementById("d1");
　　　　　　1.获取文本节点的内容
　　　　　　ele.innerText //只得到文本内容
　　　　　　ele.innerHTML //得到ele标签中所有内容，包括标签

　　　　2.设置文本内容
　　　　　　ele.innerText ="<a>yuan</a>" // 不识别标签，显示文本原来的样子
　　　　　　ele.innerHTML ="<a>yuan</a>" //可以识别标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<ul>
    <li id="i1">123</li>
    <li id="i2"><a href="">123</a></li>
    <li>234</li>
    <li>789</li>
</ul>

<script>
    let ele=document.getElementById("i2");
    // 获取文本
    console.log(ele.innerHTML);
    console.log(ele.innerText);

    //赋值文本
    //ele.innerHTML="yuan"
    //ele.innerText="yuan"
    ele.innerHTML="<a href=''>yuan</a>"
    ele.innerText="<a href=''>alex</a>"




</script>
</body>
</html>

innerHTML和innerText

　　3.属性控制

　　　　attribute操作
　　　　ele.setAttribute("egon","123");
　　　　ele.getAttribute("egon");
　　　　ele.removeAttribute("alex");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<ul>
    <li id="i1">123</li>
</ul>
<input type="text" id="i2">

<script>
    let ele=document.getElementById("i1");
    let ele2=document.getElementById("i2");
    ele.setAttribute("egon","123");
    ele.getAttribute("alex");
    ele.getAttribute("egon");
    ele.removeAttribute("alex")  ;
    ele2.value;
    ele2.value=0

</script>
</body>
</html>

属性控制attitude

　　4.class属性控制
　　　　ele.classList.add("c3")
　　　　ele.classList.remove("c2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: rebeccapurple;
        }
        .c2{
            color: white;
        }

        .c3{
            font-size: 28px;
        }
    </style>
</head>
<body>

<div class="c1">Yuan</div>

<script>
        var ele=document.getElementsByClassName("c1")[0];
        ele.classList.add("c3");
        ele.classList.remove("c1")




</script>
</body>
</html>

class属性控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li,ul{
            list-style: none;
        }


        .box{
            width: 100%;
            height: 600px;

        }
        .box .left{
            float: left;
            width: 20%;
            height: 100%;
            background: #a3a3a3;
        }
          .box .right{
            float: right;
            width: 80%;
            height: 100%;
            background: #829094;
        }
       .box .left .item{
            width: 100%;
            /*height: 120px;*/
           margin-bottom: 5px;
        }
        .box .left .item p{
            width: 100%;
            height: 30px;
            background: red;
        }

        .hide{
            display: none;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <div class="item">
                <p class="target">菜单一</p>
                <ul class="it hide">
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                    <li>11111</li>
                </ul>
            </div>
             <div class="item">
                 <p class="target">菜单二</p>
                <ul class="it hide">
                    <li>22222</li>
                    <li>22222</li>
                    <li>22222</li>
                    <li>22222</li>
                </ul>
            </div>
             <div class="item">
                 <p class="target">菜单三</p>
                <ul class="it hide">
                    <li>33333</li>
                    <li>33333</li>
                    <li>33333</li>
                    <li>33333</li>
                </ul>
            </div>

        </div>
        <div class="right">
        </div>

    </div>

    <script>
        //找到需要绑定事件的标签
        var p_lst = document.getElementsByClassName("target");
        for (var i=0;i<p_lst.length;i++){
            p_lst[i].onclick = function () {
                //把自己的下一个兄弟节点属性，设置为显示

                this.nextElementSibling.classList.remove("hide");
                //将其他兄弟节点属性，设置为隐藏
                for (var j=0;j<p_lst.length;j++){
                    if(p_lst[j] !==this){
                        p_lst[j].nextElementSibling.classList.add("hide");
                    }
                }

            }
        }


    </script>
</body>
</html>

菜单栏

　 5.css控制
　　　　var ele=document.getElementsByClassName("c1")[0];
　　　　ele.style.color="red";
　　　　ele.style.fontSize="38px"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="d" id ="d">
        python
    </div>
    <script>
        //css 操作
        // var d = document.getElementsByClassName("d")[0];
        var d =document.getElementById("d");
        d.style.width ="200px";
        d.style.height ="200px";
        d.style.fontSize="20px";
        d.style.color = "green";
        d.style.border ="1px solid";
        d.style.background ="red";
    </script>
</body>
</html>

ccs属性控制

猜你喜欢