JS——dom

节点的获取

<script>
    var div = document.getElementById("box");//返回指定标签
    var div = document.getElementsByClassName("box")[0];//返回html标签元素数组
    var div = document.getElementsByTagName("div")[0];//返回html标签元素数组
</script>

访问关系：父节点、兄弟节点、单个子节点

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box1">
        <div id="box2">我是box2的内容</div>
        <div id="box3">我是box3的内容</div>
    </div>
    <script>
        var parent = document.getElementById("box2").parentNode;//返回父节点元素
        var nextEle = document.getElementById("box2").nextSibling;//返回下一个节点（包括空文档和换行节点）
        var nextEle = document.getElementById("box2").nextElementSibling;//返回下一个节点（不包括空文档和换行节点）
        var previouEle = document.getElementById("box3").previousSibling;//返回上一个节点（包括空文档和换行节点）
        var previouEle = document.getElementById("box3").previousElementSibling;//返回上一个节点（不包括空文档和换行节点）
        var firstEle = document.getElementById("box1").firstChild;//返回子节点中的第一个节点（包括空文档和换行节点）
        var firstEle = document.getElementById("box1").firstElementChild;//返回子节点中的第一个节点（不包括空文档和换行节点）
        //var lastEle = document.getElementById("box1").lastChild;//返回子节点中的最后一个节点（包括空文档和换行节点）
        var lastEle = document.getElementById("box1").lastElementChild;//返回子节点中的最后一个节点（不包括空文档和换行节点）
        var childEles = document.getElementById("box1").childNodes;//返回所有子节点的集合（包括空文档和换行节点）
        var childEles = document.getElementById("box1").children;//返回所有子节点的集合（不包括空文档和换行节点）
        console.log(childEles[0]);
    </script>
</body>
</html>

随意得到兄弟节点

<script>
    function siblings(elm) {
        var a = [];
        var p = elm.parentNode.children;
        for (var i = 0, pl = p.length; i < pl; i++) {
            if (p[i] !== elm) a.push(p[i]);
        }
        return a;
    }
</script>

节点属性：nodeType、nodeValue、nodeName

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box">你好</div>
    <script>
        var ele = document.getElementById("box");
        var att = ele.getAttributeNode("id");//获得属性节点
        var txt = ele.firstChild;
        console.log(ele.nodeType);//1
        console.log(att.nodeType);//2
        console.log(txt.nodeType);//3

        console.log(ele.nodeName);//div
        console.log(att.nodeName);//id
        console.log(txt.nodeName);//#text

        console.log(ele.nodeValue);//null
        console.log(att.nodeValue);//box
        console.log(txt.nodeValue);//你好
    </script>
</body>
</html>

节点操作：追加、插入、删除、复制、替换

追加，插入，删除的动作都是移动节点的操作
appendChild：父节点调用此方法，返回被移动的节点，实现效果是将一个节点移动到父节点的子节最后
insertBefore：父节点调用此方法，返回被移动的节点，实现效果是将一个节点移动到某个子节点之前
removeChild：父节点调用此方法，返回追移除的节点，实现效果是将一个节点移除
杀死自己：子节点.parentNode之后找到父节点，用父节点调用removeChild方法，将自己移除，返回被移除节点
replaceChild：父节点调用，返回被替换的节点对象
cloneNode：任意节点对象调用，返回一个复制的副本，参数为true表示深度克隆（什么都有），参数为false表示浅度克隆，没有innerText

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box1">
    <div id="box2">我是box2的内容</div>
    <div id="box3">我是box3的内容</div>
</div>
<script>
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "我是newDiv的内容";
    var box3 = document.getElementById("box3");
    document.getElementById("box1").appendChild(newDiv); //在父节点中最后插入
    document.getElementById("box1").insertBefore(newDiv, box3);//在参考节点之前插入子节点
    document.getElementById("box1").removeChild(box3);//父节点移除指定子节点
    document.getElementById("box2").parentNode.removeChild(document.getElementById("box2"));//自己移除自己，一般在不知道父节点的情况下使用
    document.getElementById("box1").replaceChild(newDiv, box3);//新的子节点替换老的子节点
    console.log(document.getElementById("box2").cloneNode(true));//复制节点 true深度复制 false浅度复制
</script>
</body>
</html>

节点属性：获取、设置、删除

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box1">
        <div id="box2">我是box2的内容</div>
        <div id="box3">我是box3的内容</div>
    </div>
    <a href="#123" id="a" class="a">123</a>
    <script>
        var newDiv = document.createElement("div");
        var box3 = document.getElementById("box3");
        var a = document.getElementById("a");
        console.log(a.getAttribute("href"));//节点属性的获取
        a.setAttribute("href", "#456");//节点属性的设置
        a.removeAttribute("class");//节点属性的移除
    </script>
</body>
</html>

事件的绑定：1、函数绑定；2、匿名函数；3、行内绑定

<script>
    var div = document.getElementById("box");//返回指定标签
    div.onclick = fn;
    function fn() {
        alert(1);
    }
</script>

<script>
    var div = document.getElementById("box");
    div.onclick = function () {
        alert(1);
    }
    div.onclick = fn; 
</script>

<div class="box" id="box" onclick="fn()"></div>

window.onload

html和js是同步加载的，js若放在html之前容易报错
onload可以预防报错，它是在页面或图像加载完成后触发的事件

value、innerHTML、innerText

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input id="inp1" type="text" value="我是inpput的value属性值" />
    <div id="box1">
        我是box1的内容
        <div id="box2">我是box2的内容</div>
    </div>
    <div id="box3">
        我是box1的内容
        <div id="box4">我是box2的内容</div>
    </div>
    <script>
        //value：标签的value属性。
        console.log(document.getElementById("inp1").value);
        //innerHTML：获取双闭合标签里面的内容。（识别标签）
        console.log(document.getElementById("box1").innerHTML);
        document.getElementById("box1").innerHTML = "<h1>我是innerHTML</h1>";
        //innerText：获取双闭合标签里面的内容。（不识别标签）（老版本的火狐用textContent）
        console.log(document.getElementById("box3").innerText);
        document.getElementById("box3").innerText = "<h1>我是innerText</h1>";
    </script>
</body>
</html>

练习（一）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .top-banner {
            background-color: pink;
            height:60px;
        }

        .w {
            width: 1000px;
            margin: 10px auto;
            position: relative;
        }

        img {
            width: 1000px;
            height: 60px;
            background-color: blue;
        }

        a {
            position: absolute;
            top: 5px;
            right: 5px;
            width:20px;
            height:20px;
            color:#fff;
            background-color:black;
            font:700 14px/20px "simsum";
            text-align:center;
            text-decoration:none;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div class="top-banner" id="topBanner">
        <div class="w">
            <img src="#" />
            <a href="#" id="closeBanner">╳</a>
        </div>
    </div>
    <script>
        var closeBanner = document.getElementById("closeBanner");
        var topBanner = document.getElementById("topBanner");
        closeBanner.onclick = function () {
            //topBanner.className += " hide";
            topBanner.style.display = "none";
        }
    </script>
</body>
</html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function () {
            var img = document.getElementById("box");
            img.onmouseover = function () {
                img.src = "image/jd2.png";
            }
            var img = document.getElementById("box");
            img.onmouseout = function () {
                this.src = "image/jd1.png";
            }
    </script>
</head>
<body>
    <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;" />
</body>
</html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        function fn() {
            pic.src = "456.jpg";
        }
        window.onload = function () {
            var btn = document.getElementById("btn");
            var pic = document.getElementById("pic");
            //btn.onclick = function () {
            //    pic.src = "456.jpg";
            //    return false; //组织a链接跳转
            //}  
        }
    </script>
</head>
<body>
    <a href="http://www.baidu.com" id="btn" onclick="fn(); return false;">切换</a>
    <img src="123.jpg" id="pic" style="width:400px;"/>
</body>
</html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button{
            margin:10px 0;
        }
        div{
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
    
</head>
<body>
    <button id="btn">隐藏</button>
    <div id="box">你好吗？</div>
    <script>
        var btn = document.getElementById("btn");
        var box = document.getElementById("box");
        btn.onclick = function () {
            if (btn.innerHTML == "隐藏") {
                box.style.display = "none";
                btn.innerHTML = "显示";
            } else {
                box.style.display = "block";
                btn.innerHTML = "隐藏";
            }
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            font-family: "Helvetica", "Arial", serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }

        h1 {
            color: #333;
            background-color: transparent;
        }

        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }

        ul {
            padding: 0;
        }

        li {
            float: left;
            padding: 1em;
            list-style: none;
        }

        #imagegallery {
            list-style: none;
        }

            #imagegallery li {
                margin: 0px 20px 20px 0px;
                padding: 0px;
                display: inline;
            }

                #imagegallery li a img {
                    border: 0;
                }
    </style>

</head>
<body>
    <h2>
        美女画廊
    </h2>
    <a href="#">注册</a>
    <ul id="imagegallery">
        <li>
            <a href="image/1.jpg" title="美女A">
                <img src="image/1-small.jpg" width="100" alt="美女1" />
            </a>
        </li>
        <li>
            <a href="image/2.jpg" title="美女B">
                <img src="image/2-small.jpg" width="100" alt="美女2" />
            </a>
        </li>
        <li>
            <a href="image/3.jpg" title="美女C">
                <img src="image/3-small.jpg" width="100" alt="美女3" />
            </a>
        </li>
        <li>
            <a href="image/4.jpg" title="美女D">
                <img src="image/4-small.jpg" width="100" alt="美女4" />
            </a>
        </li>
    </ul>
    <div style="clear:both"></div>
    <img id="image" src="image/placeholder.png" width="450px" />
    <p id="des">选择一个图片</p>
    <script>
        var ul = document.getElementById("imagegallery");
        var aArr = ul.getElementsByTagName("a");
        var img = document.getElementById("image");
        var des = document.getElementById("des");
        for (var i = 0; i < aArr.length; i++) {
            aArr[i].onclick = function () {
                img.src = this.href;//aArr[i].herf会出错，因为函数第一次加载注册的时候i停留在4，而且加载只加载函数名不加载函数体
                des.innerHTML = this.title;
                return false;
            }
        }
    </script>
</body>
</html>

posted @ 2017-11-20 14:23 var_obj 阅读(277) 评论(0) 收藏举报

刷新页面返回顶部

站错队了同志

JS——dom

公告