節(jié)點操作--父子節(jié)點

$\color{rgba(254, 67, 101, .8)}{1.學習節(jié)點操作的目的：}$

學習節(jié)點操作的目的還是為了獲取元素赋续，獲取元素的常用兩種方式：
1.利用DOM提供的方法(API)獲取元素
例如：document.getElementById();或document.getElementByTagName();或document.queyrSelector();等
之前的這些方法很繁瑣，且邏輯性不強
$\color{rgba(254, 67, 101, .8)}{所以學習利用節(jié)點的層級關系獲取元素}$

$\color{rgba(254, 67, 101, .8)}{利用節(jié)點的層級關系獲取元素:}$

利用父子兄節(jié)點關系獲取元素
邏輯性強痊焊，但是兼容性稍差
一般的，節(jié)點至少擁有nodeType(節(jié)點類型)和nodeName(節(jié)點名稱)和nodeValue(節(jié)點值)三個基本屬性

這些值是規(guī)定的：

元素節(jié)點 nodeType 值為 1

屬性節(jié)點 nodeType 值為 2

文本節(jié)點nodeType 值為 3(文本節(jié)點包含文字律胀、空格宋光、換行等)
$\color{rgba(254, 67, 101, .8)}{在實際開發(fā)中，節(jié)點操作主要是操作元素節(jié)點}$

$\color{rgba(254, 67, 101, .8)}{box這個對象中就有這三個屬性}$

    <!-- 節(jié)點的優(yōu)點 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <script>
        var box = document.querySelector('.box');
        //打印這個元素對象
        console.dir(box);
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{節(jié)點層級：}$

利用DOM樹可以把節(jié)點劃分為不同的層級關系炭菌，常見的是父子兄層級關系

$\color{rgba(254, 67, 101, .8)}{1.父級節(jié)點}$
node.parentNode
它拿到的是離他最近的上一層罪佳，如果找不到父節(jié)點返回null

$\color{rgba(254, 67, 101, .8)}{2.子級節(jié)點}$
1.parentNode.childNodes(標準)
parentNode.childNodes返回包含指定節(jié)點的子節(jié)點的集合，該集合為即時更新的集合
注意：返回值里面包含了所有子節(jié)點黑低，包括元素節(jié)點赘艳、文本節(jié)點等
如果只想獲得里面的元素節(jié)點需要專門處理，所以一般不提倡使用childNodes,需要用循環(huán)瓤宋铡：

//如果要取到變遷中的元素蕾管，需要用下面的方法循環(huán)去取，所以菩暗，一般不提倡使用childNodes
        var ul = document.querySelector('ul');
        for (var i = 0; i < ul.childNodes; i++) {
            if (ul.childNodes[i].nodeType == 1) {
                //ul.childNodes[i]是元素節(jié)點
                console.log(ul.childNodes[i]);
            }
        }

    <!-- 節(jié)點的優(yōu)點 -->
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <div class="box">
        <span class="erweima">×</span>
    </div>
    <!-- <script>
        // var box = document.querySelector('.box');
        // //打印這個元素對象
        // console.dir(box);

        //1.父節(jié)點node.parentNode
        //從前的寫法：
        var erweima = document.querySelector('.erweima');
        var box = document.querySelector('.box');
        //現(xiàn)在如果想要拿到box掰曾，就按下面這樣寫：
        //他拿到的是離他最近的，他的上一層停团，如果找不到父節(jié)點返回null
        console.log(erweima.parentNode);;
    </script> -->


    <script>
        //以前要拿ul里面的li要寫兩行旷坦，拿兩次才行：
        //利用DOM提供的方法(API)獲取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');

        //子節(jié)點：parentNode.childNodes(標準)
        console.log(ul.childNodes);
    </script>

之所以有9個節(jié)點掏熬，是因為ul標簽到li標簽之間是默認有一個換行的，這個換行是text屬性秒梅，而且每一個li之間也有一個換行旗芬，就是每換一次行有一個text

image.png

$\color{rgba(254, 67, 101, .8)}{上面的childnodes太繁瑣，一般不用}$
$\color{rgba(254, 67, 101, .8)}{獲取子節(jié)點第二種方法：}$
$\color{rgba(254, 67, 101, .8)}{這種方法只會拿到子元素節(jié)點捆蜀，這種才是最常用的}$

console.log(ul.children);

image.png

$\color{rgba(254, 67, 101, .8)}{第一個子元素和最后一個子元素}$

子節(jié)點：
parentNode.firstChild firstChild返回第一個子節(jié)點疮丛，找不到則返回null，同樣辆它，也是包含所有的節(jié)點誊薄，返回值帶換行等節(jié)點
parentNode.lastChild返回最后一個子節(jié)點，返回值帶換行等節(jié)點

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>

    <script>
        //獲取元素
        var ol = document.querySelector('ol');

        //parentNode.firstChild返回第一個子節(jié)點
        //parentNode.firstChild返回最后一個子節(jié)點
        //返回的還是9個節(jié)點娩井，連換行都在其中.所以下面代碼返回的都是text
        console.log(ol.firstChild);
        console.log(ol.lastChild);

image.png

$\color{rgba(254, 67, 101, .8)}{上面的兩種方法不好用暇屋，還有其他方法：}$

有兼容性問題，IE9以上才支持
parentNode.firstElementChild返回第一個子元素(不帶換行等節(jié)點)
parentNode.lastElementChild返回最后一個子元素(不帶換行等節(jié)點)

實際開發(fā)中洞辣，firstChild和lastChild包含其他節(jié)點，操作不便昙衅，而firstElementChild和lastElementChild又有兼容問題扬霜，解決方案如下：
1.如果想要第一個元素節(jié)點，可以使用parentNode.children[0];

    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>

    <script>
        //獲取元素
        var ol = document.querySelector('ol');

        //parentNode.firstChild返回第一個子節(jié)點
        //parentNode.firstChild返回最后一個子節(jié)點
        //返回的還是9個節(jié)點而涉，連換行都在其中.所以下面代碼返回的都是text
        console.log(ol.firstChild);
        console.log(ol.lastChild);

        //parentNode.firstElementChild返回第一個子元素著瓶，不代換行，比上面那兩個好用
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);

        //實際開發(fā)中啼县，既沒有兼容問題材原，又返回第一個子元素：
        console.log(ol.children[0]);
        console.log(ol.children[3]);
    </script>

image.png

$\color{rgba(254, 67, 101, .8)}{案例：下拉菜單}$

分析：
1..nav ul { /* 先把彈出列表項隱藏起來 */ display: none; }
2.導航欄里面的li都要有鼠標經(jīng)過的效果，所以要循環(huán)注冊鼠標事件
3.原理：當鼠標經(jīng)過li里面的第二個孩子ul顯示季眷，當鼠標離開余蟹，ul隱藏

$\color{rgba(254, 67, 101, .8)}{代碼實現(xiàn)：}$

    <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="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">評論</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>


    <script>
        //1.獲取元素
        var nav = document.querySelector('.nav');
        //2.獲取ul的四個小li
        var lis = nav.children;
        //3.循環(huán)注冊事件
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                //鼠標經(jīng)過，讓li里面的ul顯示
                //block:正常顯示子刮，none：不顯示威酒，隱藏
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                //鼠標離開，隱藏
                this.children[1].style.display = 'none';
            }
        }
    </script>

新浪下拉菜單.gif