JavaScript-dom3 json_str dom元素控制 模拟百度搜索

时间：2024-03-22 11:07:02

访问关系-封装代码

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>访问关系封装</title>

<style>

    li{

        width: 100px;

        height: 100px;

        background-color: pink;

        margin: 5px;

        list-style: none;

    }

</style>

</head>

<body>

    <ul>

        <li></li>

        <li></li>

        <li id="box"></li>

        <li></li>

        <li></li>

    </ul>

<script src="tools.js"></script>

<script>

    //获取box改为red

    var box = getEle("box");

    box.style.backgroundColor="red";

    //获取第一个和最后一个子节点

    var parent = box.parentNode;

    getFirstNode(parent).style.backgroundColor="yellow";

    getLastNode(parent).style.backgroundColor="yellow";

    //获取上一个下一个兄弟节点

    getNextNode(box).style.backgroundColor="blue";

    getPrevNode(box).style.backgroundColor="blue";

    //指定兄弟节点

    getEleOfIndex(box,0).style.backgroundColor="green";

    getEleOfIndex(box,1).style.backgroundColor="green";

    //获取所有的兄弟节点

    var arr = getAllSiblings(box);

    for(var i=0;i<arr.length;i++){

        arr[i].style.backgroundColor = "black";

    }

    // //父节点

    // div.parentNode;

    //

    // //兄弟节点

    // div.previousSibling;

    // div.previousElementSibling;

    // div.nextSibling;

    // div.nextElementSibling;

    //

    // //单个子节点

    // div.firstChild;

    // div.firstElementChild;

    // div.lastChild;

    // div.lastElementChild;

    //

    // //所有子节点

    // div.childNodes;

    // div.children;

    //

    // //获取指定的兄弟节点

    // div.parentNode.children[index];

    //

    // //获取所有的兄弟节点

    // function fn(ele) {

    //     var newArr = [];

    //     var arr = ele.parentNode.children;

    //     for (var i = 0; i < arr.length; i++) {

    //         //如果不是ele元素本身，添加到新数组，老数组里面包含的ele

    //         if (ele !== arr[i]) {

    //             newArr.push(arr[i]);

    //         }

    //     }

    // }

</script>

</body>

</html>

tool.js

function getEle(id) {

    return document.getElementById(id)

}

/**

 * 功能：给指定元素查找它的第一个元素子节点，并返回

 * @param ele

 * @returns {Element | (() => Node) | ActiveX.IXMLDOMNode | Node | SVGElementInstance}

 */

function getFirstNode(ele) {

    var node = ele.firstElementChild || ele.firstChild;

    return node;

}

/**

 * 功能：给指定元素查找它的最后一个元素子节点，并返回

 * @param ele

 * @returns {Element | ActiveX.IXMLDOMNode | Node | SVGElementInstance | (() => Node)}

 */

function getLastNode(ele) {

    return ele.lastElementChild || ele.lastChild;

}

/**

 * 功能：给定元素查找他的下一个元素兄弟节点，并返回

 * @param ele

 * @returns {Element | null | Node | SVGElementInstance | ActiveX.IXMLDOMNode | (() => Node)}

 */

function getNextNode(ele) {

    return ele.nextElementSibling || ele.nextSibling;

}

/**

 * 功能：给定元素查找他的上一个元素兄弟节点，并返回

 * @param ele

 * @returns {Element | null | Node | SVGElementInstance | ActiveX.IXMLDOMNode | (() => Node)}

 */

function getPrevNode(ele) {

    return ele.previousElementSibling || ele.previousSibling;

}

/**

 * 功能：给定元素和索引值查找指定索引值的兄弟节点，并返回

 * @param ele

 * @param index

 * @returns {Element}

 */

function getEleOfIndex(ele,index) {

    return ele.parentNode.children[index];

}

/**

 * 功能：给定元素查找它的所用兄弟元素，并返回数组

 * @param ele

 */

function getAllSiblings(ele) {

    var newArr = [];

    var arr = ele.parentNode.children;

    for (var i = 0; i < arr.length; i++) {

        //如果不是ele元素本身，添加到新数组，老数组里面包含的ele

        if (ele !== arr[i]) {

            newArr.push(arr[i]);

        }

    }

    return newArr;

}

style属性特点

1、样式少的时候使用

2、style是对象

3、值是字符串，没有设置值是""

4、命名规则，驼峰命名和css不一祥

5、设置了类样式不能获取（只和行内式交互，和内嵌式外链式无关）

6、box.style.cssText="字符串形式的样式"（可以赋值多个属性）

案例-文本焦点高亮显示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文本焦点高亮显示</title>

    <style>

        input {

            display: block;

        }

    </style>

</head>

<body>

<ul>

    <input type="text"/>

    <input type="text"/>

    <input type="text"/>

    <input type="text"/>

    <input type="text"/>

    <button>设置</button>

</ul>

<script>

    var inpArr = document.getElementsByTagName("input");

    var button = inpArr[inpArr.length - 1].nextElementSibling;

    button.onclick = function () {

        for (var i = 0; i < inpArr.length; i++) {

            //当button被点击，所有input绑定事件onfocus

            inpArr[i].onfocus = function () {

                this.style.border = "2px solid red";

                this.style.backgroundColor = "#ccc";

            };

            //绑定onblur事件，取消样式

            inpArr[i].onblur = function () {

                this.style.border = "";

                this.style.backgroundColor = "";

            }

        }

    }

</script>

</body>

</html>

案例-百度皮肤

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>百度皮肤</title>

    <style>

        *{

            padding: 0;

            margin:0;

        }

        body{

            background: url(image/3.png) no-repeat;

        }

        .box{

            height: 200px;

            padding-top: 30px;

            text-align: center;

            background: rgba(255,255,255,0.3);

        }

        img{

            cursor: pointer;

            margin: 0 10px;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="data:image/1.png" alt="" width="200px"/>

        <img src="data:image/2.png" alt="" width="200px"/>

        <img src="data:image/3.png" alt="" width="200px"/>

        <img src="data:image/4.png" alt="" width="200px"/>

        <img src="data:image/5.png" alt="" width="200px"/>

    </div>

    <script>

        //点击图片修改背景图片

        var box=document.getElementsByTagName("div")[0];

        //body js内部已优化

        var body=document.body;

        var imgArr=box.children;

        for(var i=0;i<imgArr.length;i++){

            imgArr[i].index=i;

            imgArr[i].onclick = function () {

                // body.style.backgroundImage = "url(image/"+(this.index+1)+".png)"

                // body.style.background = "url(image/"+(this.index+1)+".png) no-repeat "

                //url("http://localhost:63343/dom3/image/2.png")

                body.style.backgroundImage = "url("+this.src+")";

            }

        }

    </script>

</body>

</html>

dom元素的创建

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>dom元素的创建</title>

</head>

<body>

<button>创建</button>

<ul>

    aaa

</ul>

<script>

    //1、 document.write创建；会覆盖原来内容

    document.write("<li>我是document.write创建的</li>");

    var btn=document.getElementsByTagName("button")[0];

    var ul=document.getElementsByTagName("ul")[0];

    // btn.onclick = function () {

    //     document.write("<li>我是document.write创建的</li>");

    // }

    //2、直接利用元素innerHTML方法。（innerText方法不识别标签,会覆盖原来内容用+=就行）

    ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>"

    //3、利用dom的api创建元素

    var newli=document.createElement("li");

    newli.innerHTML="我是createElement创建的";

    //在赋元素的最后添加元素

    // ul.appendChild(newli);

    //指定位置添加(放在li1之前)

    var li1=document.getElementById("li1");

    ul.insertBefore(newli,li1)

</script>

</body>

</html>

dom元素的操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>元素的操作</title>

</head>

<body>

<ul>

    <li id="li1">参照标签</li>

</ul>

<script>

    // document.write()不常用容易覆盖原来的页面

    // innerHTML;用的比较多，绑定属性和内容比较方便

    //document.createElement；用的比较多，指定数量的时候一般用它

    var ul=document.getElementsByTagName("ul")[0];

    var li1=document.getElementById('li1');

    //创建，添加()

    var li2=document.createElement("li");

    li2.innerText= "我是createElment创建的标签，用的是appendChild的方法";

    ul.appendChild(li2);

    var li3=document.createElement("li");

    // li3.id="test";

    li3.innerText= "我是createElment创建的标签，insertBefore添加";

    //父节点.inserBefore(新节点，参照节点)

    ul.insertBefore(li3,li1);

    //删除，替换

    ul.removeChild(li3);

    // 父节点.replaceChild(newNode,oldNode)

    // var li4=document.createElement("li");

    // li4.innerText="test";

    ul.replaceChild(li3,li2)

    //克隆 cloneNode(true)，true是深层复制

    for(var i=0;i<=3;i++){

        var newLi = li3.cloneNode(true);

        ul.appendChild(newLi);

    }

</script>

</body>

</html>

案例-选择水果

1、简单版

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择水果</title>

    <style>

        select{

            width: 170px;

            height: 200px;

            font-size: 16px;

            background-color: #a4ff43;

        }

    </style>

</head>

<body>

    <select name="" id="sel1" size="10" multiple>

        <option value="">香蕉</option>

        <option value="">苹果</option>

        <option value="">鸭梨</option>

        <option value="">葡萄</option>

    </select>

    <input type="button" value=">>>"/>

    <input type="button" value="<<<"/>

    <input type="button" value=">"/>

    <input type="button" value="<"/>

    <select name="" id="sel2" size="10" multiple>

    </select>

    <script>

        //点击>>>和<<<两个按钮

        var sel1=document.getElementById("sel1");

        var sel2=document.getElementById("sel2");

        var inpArr=document.getElementsByTagName("input");

        inpArr[0].onclick = function () {

            //获取所有子元素，整体添加到另一个标签中

            var arr = sel1.children;

            for(var i=arr.length-1;i>=0;i--){

                //放入select2，不能用push要用appendChild

                sel2.appendChild(arr[0]);

            }

            //也可以在for循环外面定义一个变量

            // var arrLen=arr.length-1;

            // for(var i=0;i<=arrLen;i++){

            //     //放入select2，不能用push要用appendChild

            //     console.log(i);

            //     // console.log(i);

            //     sel2.appendChild(arr[0]);

            // }

        };

        inpArr[1].onclick = function () {

            //获取所有子元素，整体添加到另一个标签中

            var arr = sel2.children;

            for(var i=arr.length-1;i>=0;i--){

                //放入select2，不能用push要用appendChild

                sel1.appendChild(arr[0]);

            }

        };

        //被选定的子元素跑到对面

                // inpArr[2].onclick = function () {

                //     //获取所有子元素，整体添加到另一个标签中

                //     var arr = sel1.children;

                //     for(var i=arr.length-1;i>=0;i--){

                //         //放入select2，不能用push要用appendChild

                //         if(arr[i].selected === true){

                //             sel2.appendChild(arr[i]);

                //         }

                //     }

                // };

        inpArr[2].onclick = function () {

            var arr=sel1.children;

            //遍历判断数组中的元素selected属性为true，添加到相反的select标签中

            for(var i=arr.length-1;i>=0;i--){

                if(arr[i].selected === true){

                    sel2.appendChild(arr[i]);

                }

            }

        };

        inpArr[3].onclick = function () {

            var arr=sel2.children;

            //遍历判断数组中的元素selected属性为true，添加到相反的select标签中

            for(var i=arr.length-1;i>=0;i--){

                if(arr[i].selected === true){

                    sel1.appendChild(arr[i]);

                }

            }

        }

    </script>

</body>

</html>

2、封装版

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择水果</title>

    <style>

        select{

            width: 170px;

            height: 200px;

            font-size: 16px;

            background-color: #a4ff43;

        }

    </style>

</head>

<body>

    <select name="" id="sel1" size="10" multiple>

        <option value="">香蕉</option>

        <option value="">苹果</option>

        <option value="">鸭梨</option>

        <option value="">葡萄</option>

    </select>

    <input type="button" value=">>>"/>

    <input type="button" value="<<<"/>

    <input type="button" value=">"/>

    <input type="button" value="<"/>

    <select name="" id="sel2" size="10" multiple>

    </select>

    <script>

        //点击>>>和<<<两个按钮

        var sel1=document.getElementById("sel1");

        var sel2=document.getElementById("sel2");

        var inpArr=document.getElementsByTagName("input");

        inpArr[0].onclick = function () {

            fn1(sel1,sel2)

        };

        inpArr[1].onclick = function () {

            fn1(sel2,sel1)

        };

        inpArr[2].onclick = function () {

            fn2(sel1,sel2)

        };

        inpArr[3].onclick = function () {

            fn2(sel2,sel1)

        };

        function fn1(ele1,ele2) {

        //获取所有子元素，整体添加到另一个标签中

        var arr = ele1.children;

        for(var i=arr.length-1;i>=0;i--){

            //放入select2，不能用push要用appendChild

            ele2.appendChild(arr[0]);

            }

        }

        function fn2(ele1,ele2) {

            var arr=ele1.children;

            //遍历判断数组中的元素selected属性为true，添加到相反的select标签中

            for(var i=arr.length-1;i>=0;i--){

                if(arr[i].selected === true){

                    ele2.appendChild(arr[i]);

                }

            }

        };

    </script>

</body>

</html>

案例-高级隔行变色json_str

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>高级隔行变色</title>

    <style>

        *{

            padding: 0;

            margin: 0;

            text-align: center;

        }

        .wrap{

            width: 500px;

            margin: 100px auto 0;

        }

        table{

            /*separate在分隔模式下，相邻的单元格都拥有独立的边框。collapse在合并模式下，相邻单元格共享边框。*/

            border-collapse: collapse;

            border-spacing:0;

            border: 1px solid #c0c0c0;

            width: 500px;

        }

        th,td{

            /*border: 1px solid #d0d0d0;*/

            color: #404060;

            padding: 10px;

        }

        th{

            background-color: #09c;

            font: bold 16px "微软雅黑";

            color: #fff;

        }

        td{

            font: 14px "微软雅黑";

        }

        tbody tr{

            background-color: #f0f0f0;

            cursor: pointer;

        }

        .current{

            background-color: red!important;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <table>

            <thead>

                <tr>

                    <th>序号</th>

                    <th>姓名</th>

                    <th>课程</th>

                    <th>成绩</th>

                </tr>

            </thead>

            <tbody id="target">

            </tbody>

        </table>

    </div>

    <script>

        var json_str = [

            {"id":"1","name":"张三","kecheng":"英语","fenshu":"100"},

            {"id":"2","name":"李四","kecheng":"英语","fenshu":"100"},

            {"id":"3","name":"王二","kecheng":"英语","fenshu":"100"},

            {"id":"4","name":"孙悟空","kecheng":"英语","fenshu":"100"},

            {"id":"5","name":"金角大王","kecheng":"英语","fenshu":"100"},

            {"id":"6","name":"金角大王","kecheng":"英语","fenshu":"100"},

            {"id":"7","name":"金角大王","kecheng":"英语","fenshu":"100"},

            {"id":"8","name":"金角大王","kecheng":"英语","fenshu":"100"},

            {"id":"9","name":"金角大王","kecheng":"英语","fenshu":"100"},

        ];

        var tbody=document.getElementById("target");

        for(var i=0;i<json_str.length;i++){

            console.log(json_str[i]);

            tbody.innerHTML += "<tr>\n" +

                                    "<td>"+json_str[i].id+"</td>\n" +

                                    "<td>"+json_str[i].name+"</td>\n" +

                                    "<td>"+json_str[i].kecheng+"</td>\n" +

                                    "<td>"+json_str[i].fenshu+"</td>\n" +

                                "</tr>"

        }

        //通过document.createElement

        // for(var i=0;i<json_str.length;i++){

        //     tr=document.createElement("tr");

        //     td1=document.createElement("td");

        //     td2=document.createElement("td");

        //     td3=document.createElement("td");

        //     td4=document.createElement("td");

        //     td1.innerText =json_str[i].id;

        //     td2.innerText =json_str[i].name;

        //     td3.innerText =json_str[i].kecheng;

        //     td4.innerText =json_str[i].fenshu;

        //     tbody.appendChild(tr);

        //     tr.appendChild(td1);

        //     tr.appendChild(td2);

        //     tr.appendChild(td3);

        //     tr.appendChild(td4);

            // tbody.innerHTML += "<tr>\n" +

            //     "<td>"+json_str[i].id+"</td>\n" +

            //     "<td>"+json_str[i].name+"</td>\n" +

            //     "<td>"+json_str[i].kecheng+"</td>\n" +

            //     "<td>"+json_str[i].fenshu+"</td>\n" +

            //     "</tr>"

        // }

        // var tbody=document.getElementById("target");

        var trArr=tbody.children;

        //循环判断并隔行赋值背景色

        for(var i=0;i<trArr.length;i++){

            if(i%2!==0){

                trArr[i].style.backgroundColor = "#a3a3a3";

            }else{

                trArr[i].style.backgroundColor = "#ccc";

            }

            //鼠标经过高亮显示

            //难点，鼠标移开恢复原本颜色

            //计数器(进入tr立刻记录颜色，移开使用记录好的颜色)

            var color="";

            trArr[i].onmouseover = function () {

                //赋值颜色之前记录颜色

                color=this.style.backgroundColor;

                this.style.backgroundColor = "#fff";

            };

            trArr[i].onmouseout = function () {

                this.style.backgroundColor = color;

            }

        }

    </script>

</body>

</html>

案例-模拟百度搜索

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模拟百度搜索</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 500px;

            margin: 200px auto;

        }

        ul{

            width: 392px;

            padding: 5px;

            list-style: none;

            border: 1px solid red;

        }

        li:hover{

            background-color: red;

        }

        input{

            width: 400px;

        }

        button{

            width: 70px;

        }

    </style>

</head>

<body>

<div class="box">

    <input type="text"/>

    <button>搜索</button>

    <!--<ul>-->

        <!--<li>aaa</li>-->

        <!--<li>bbb</li>-->

        <!--<li>ccc</li>-->

    <!--</ul>-->

    <script>

        //需求：输入内容(输入事件，键盘弹起事件)

        var arr = ["a","ab","abc","abcd","baa","aab"];

        var box = document.getElementsByTagName("div")[0];

        var inp =  box.children[0];

        //绑定事件

        inp.onkeyup = function () {

            var newArr=[];

            //创建一个字符串，里面添加满了li和对应的内容

            //遍历老数组，那项是以input内容为开头的

            for(var i=0;i<arr.length;i++){

                //是否以input内容为开头的

                var val=this.value;

                if(arr[i].indexOf(val)===0){

                    newArr.push("<li>"+arr[i]+"</li>");

                }

            }

            //把创建好的内容添加到ul

            var str=newArr.join("");

            // var aa = document.getElementsByTagName("ul")[0];

            //1 如果ul存在，删除

            if(box.children[2]){

                //只要存在那么就是object类型

                box.removeChild(box.children[2]);

            }

            //2 内容为空那么不能生成ul

            //3 如果数组中没有input字符开头的元素，切断函数

            //换个说法，newArr长度为0

            if(this.value.length===0 || newArr.length === 0){

                //切换函数

                return;

            }

            var ul = document.createElement("ul");

            ul.innerHTML = str;

            box.appendChild(ul)

        }

    </script>

</div>

</body>

</html>

相关文章