鑺傜偣鎿嶄綔

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了鑺傜偣鎿嶄綔相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/color' title='color'>color   this   als   function   demo   pen   utf-8   res   html   

鐖惰妭鐐规搷浣?

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 鑺傜偣鐨勪紭鐐?-->
    <div>鎴戞槸div</div>
    <span>鎴戞槸span</span>
    <ul>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>
    </ul>
    <div class="demo">
        <div class="box">
            <span class="erweima">脳</span>
        </div>
    </div>

    <script>
        // 1. 鐖惰妭鐐?parentNode
        var erweima = document.querySelector(鈥?/span>.erweima鈥?/span>);
        // var box = document.querySelector(鈥?box鈥?;
        // 寰楀埌鐨勬槸绂诲厓绱犳渶杩戠殑鐖剁骇鑺傜偣(浜茬埜鐖? 濡傛灉鎵句笉鍒扮埗鑺傜偣灏辫繑鍥炰负 null
        console.log(erweima.parentNode.parentNode);
    </script>
</body>

</html>

瀛愯妭鐐规搷浣?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 鑺傜偣鐨勪紭鐐?-->
    <div>鎴戞槸div</div>
    <span>鎴戞槸span</span>
    <ul>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>

    </ul>
    <ol>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>
        <li>鎴戞槸li</li>
    </ol>

    <div class="demo">
        <div class="box">
            <span class="erweima">脳</span>
        </div>
    </div>

    <script>
        // DOM 鎻愪緵鐨勬柟娉曪紙API锛夎幏鍙?/span>
        var ul = document.querySelector(鈥?/span>ul鈥?/span>);
        var lis = ul.querySelectorAll(鈥?/span>li鈥?/span>);
        // 1. 瀛愯妭鐐? childNodes 鎵€鏈夌殑瀛愯妭鐐?鍖呭惈 鍏冪礌鑺傜偣 鏂囨湰鑺傜偣绛夌瓑
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 鑾峰彇鎵€鏈夌殑瀛愬厓绱犺妭鐐?涔熸槸鎴戜滑瀹為檯寮€鍙戝父鐢ㄧ殑
        console.log(ul.children);
    </script>
</body>

</html>

 

鑾峰彇鎸囧畾鍏冪礌:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ol>
        <li>鎴戞槸li1</li>
        <li>鎴戞槸li2</li>
        <li>鎴戞槸li3</li>
        <li>鎴戞槸li4</li>
        <li>鎴戞槸li5</li>
    </ol>
    <script>
        var ol = document.querySelector(鈥?/span>ol鈥?/span>);
        // 1. firstChild 绗竴涓瓙鑺傜偣 涓嶇鏄枃鏈妭鐐硅繕鏄厓绱犺妭鐐?/span>
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 杩斿洖绗竴涓瓙鍏冪礌鑺傜偣 ie9鎵嶆敮鎸?/span>
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 瀹為檯寮€鍙戠殑鍐欐硶  鏃㈡病鏈夊吋瀹规€ч棶棰樺張杩斿洖绗竴涓瓙鍏冪礌
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
</body>

</html>

 

鏂版氮涓嬫媺鑿滃崟:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">寰崥</a>
            <ul>
                <li>
                    <a href="">绉佷俊</a>
                </li>
                <li>
                    <a href="">璇勮</a>
                </li>
                <li>
                    <a href="">@鎴?span style="color: rgba(0, 0, 255, 1)"></a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">寰崥</a>
            <ul>
                <li>
                    <a href="">绉佷俊</a>
                </li>
                <li>
                    <a href="">璇勮</a>
                </li>
                <li>
                    <a href="">@鎴?span style="color: rgba(0, 0, 255, 1)"></a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">寰崥</a>
            <ul>
                <li>
                    <a href="">绉佷俊</a>
                </li>
                <li>
                    <a href="">璇勮</a>
                </li>
                <li>
                    <a href="">@鎴?span style="color: rgba(0, 0, 255, 1)"></a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">寰崥</a>
            <ul>
                <li>
                    <a href="">绉佷俊</a>
                </li>
                <li>
                    <a href="">璇勮</a>
                </li>
                <li>
                    <a href="">@鎴?span style="color: rgba(0, 0, 255, 1)"></a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        // 1. 鑾峰彇鍏冪礌
        var nav = document.querySelector(鈥?/span>.nav鈥?/span>);
        var lis = nav.children; // 寰楀埌4涓皬li
        // 2.寰幆娉ㄥ唽浜嬩欢
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 鈥?/span>block鈥?/span>;
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 鈥?/span>none鈥?/span>;
            }
        }
    </script>
</body>

</html>

鍏勫紵鑺傜偣:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div>鎴戞槸div</div>
    <span>鎴戞槸span</span>
    <script>
        var div = document.querySelector(鈥?/span>div鈥?/span>);
        // 1.nextSibling 涓嬩竴涓厔寮熻妭鐐?鍖呭惈鍏冪礌鑺傜偣鎴栬€?鏂囨湰鑺傜偣绛夌瓑
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2. nextElementSibling 寰楀埌涓嬩竴涓厔寮熷厓绱犺妭鐐?/span>
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>
</body>

</html>

鍒涘缓娣诲姞鑺傜偣:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 鍒涘缓鑺傜偣鍏冪礌鑺傜偣
        var li = document.createElement(鈥?/span>li鈥?/span>);
        // 2. 娣诲姞鑺傜偣 node.appendChild(child)  node 鐖剁骇  child 鏄瓙绾?鍚庨潰杩藉姞鍏冪礌  绫讳技浜庢暟缁勪腑鐨刾ush
        var ul = document.querySelector(鈥?/span>ul鈥?/span>);
        ul.appendChild(li);
        // 3. 娣诲姞鑺傜偣 node.insertBefore(child, 鎸囧畾鍏冪礌);
        var lili = document.createElement(鈥?/span>li鈥?/span>);
        ul.insertBefore(lili, ul.children[0]);
        // 4. 鎴戜滑鎯宠椤甸潰娣诲姞涓€涓柊鐨勫厓绱?锛?1. 鍒涘缓鍏冪礌 2. 娣诲姞鍏冪礌
    </script>
</body>

</html>

 

绠€鍗曠増鍙戝竷鐣欒█妗堜緥:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>鍙戝竷</button>
    <ul>

    </ul>
    <script>
        // 1. 鑾峰彇鍏冪礌
        var btn = document.querySelector(鈥?/span>button鈥?/span>);
        var text = document.querySelector(鈥?/span>textarea鈥?/span>);
        var ul = document.querySelector(鈥?/span>ul鈥?/span>);
        // 2. 娉ㄥ唽浜嬩欢
        btn.onclick = function() {
            if (text.value == 鈥樷€?/span>) {
                alert(鈥?/span>鎮ㄦ病鏈夎緭鍏ュ唴瀹?/span>鈥?/span>);
                return false;
            } else {
                // console.log(text.value);
                // (1) 鍒涘缓鍏冪礌
                var li = document.createElement(鈥?/span>li鈥?/span>);
                // 鍏堟湁li 鎵嶈兘璧嬪€?/span>
                li.innerHTML = text.value;
                // (2) 娣诲姞鍏冪礌
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

</html>

鍒犻櫎鑺傜偣:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <button>鍒犻櫎</button>
    <ul>
      <li>鐔婂ぇ</li>
      <li>鐔婁簩</li>
      <li>鍏夊ご寮?span style="color: rgba(0, 0, 255, 1)"></li>
    </ul>
    <script>
      // 1.鑾峰彇鍏冪礌
      var ul = document.querySelector("ul");
      var btn = document.querySelector("button");
      // 2. 鍒犻櫎鍏冪礌  node.removeChild(child)
      // ul.removeChild(ul.children[0]);
      // 3. 鐐瑰嚮鎸夐挳渚濇鍒犻櫎閲岄潰鐨勫瀛?/span>
      btn.onclick = function () {
        if (ul.children.length == 0) {
          this.disabled = true;
        } else {
          ul.removeChild(ul.children[0]);
        }
      };
    </script>
  </body>
</html>

 

绠€鍗曠増鍒犻櫎鐣欒█妗堜緥:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
        
        li a {
            float: right;
        }
    </style>
</head>

<body>
    <textarea name="" id=""></textarea>
    <button>鍙戝竷</button>
    <ul>

    </ul>
    <script>
        // 1. 鑾峰彇鍏冪礌
        var btn = document.querySelector(鈥?/span>button鈥?/span>);
        var text = document.querySelector(鈥?/span>textarea鈥?/span>);
        var ul = document.querySelector(鈥?/span>ul鈥?/span>);
        // 2. 娉ㄥ唽浜嬩欢
        btn.onclick = function() {
            if (text.value == 鈥樷€?/span>) {
                alert(鈥?/span>鎮ㄦ病鏈夎緭鍏ュ唴瀹?/span>鈥?/span>);
                return false;
            } else {
                // console.log(text.value);
                // (1) 鍒涘缓鍏冪礌
                var li = document.createElement(鈥?/span>li鈥?/span>);
                // 鍏堟湁li 鎵嶈兘璧嬪€?/span>
                // href=鈥榡avascript:;鈥?  璁╅摼鎺ヤ笉璺宠浆,url涓笉浼氬啀娣诲姞鍐呭
                li.innerHTML = text.value + "<a href=鈥榡avascript:;鈥?gt;鍒犻櫎</a>";
                // (2) 娣诲姞鍏冪礌
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                // (3) 鍒犻櫎鍏冪礌 鍒犻櫎鐨勬槸褰撳墠閾炬帴鐨刲i  瀹冪殑鐖朵翰
                var as = document.querySelectorAll(鈥?/span>a鈥?/span>);
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // node.removeChild(child); 鍒犻櫎鐨勬槸 li 褰撳墠a鎵€鍦ㄧ殑li  this.parentNode;
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>
</body>

</html>

鑺傜偣澶嶅埗:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector(鈥?/span>ul鈥?/span>);
        // 1. node.cloneNode(); 鎷彿涓虹┖鎴栬€呴噷闈㈡槸false 娴呮嫹璐?鍙鍒舵爣绛句笉澶嶅埗閲岄潰鐨勫唴瀹?/span>
        // 2. node.cloneNode(true); 鎷彿涓簍rue 娣辨嫹璐?澶嶅埗鏍囩澶嶅埗閲岄潰鐨勫唴瀹?/span>
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>

</html>

 

以上是关于鑺傜偣鎿嶄綔的主要内容，如果未能解决你的问题，请参考以下文章

JQuery/JS鎻掍欢 jsTree鍔犺浇鏍戯紝鍒濆鍖栨椂鍔犺浇鍓嶄笁绾ц妭鐐癸紝褰撳睍寮€绗笁绾ц妭鐐规椂 灏卞姞杞借鑺傜偣涓嬬殑鎵€鏈夊瓙鑺傜偣

js鏂囨湰瀵硅薄妯″瀷[DOM]銆愮画銆?Node鑺傜偣绫诲瀷)

Java鎿嶄綔JSON鏁版嵁--Gson鎿嶄綔JSON鏁版嵁

鎿嶄綔绯荤粺-鎿嶄綔绯荤粺-鍐呮牳涓殑灞忓箷鎵撳嵃(涓?

鏁版嵁搴撶瑪璁?馃搾 MySQL鍩虹鎿嶄綔鍛戒护 鍒嗙被娓呮櫚