49 BOM 和DOM

时间：2022-09-21 09:44:09

一.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>

　　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>

　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属性控制

相关文章