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

 

posted @ 2018-12-24 21:21  冰底熊  阅读(172)  评论(0编辑  收藏  举报