JavaScript基础学习 节点

节点操作

    
    
    
    Document





    

        

            
我是lis1
            
我是lis2
            
我是lis3
            
我是lis4
            
我是lis5
        

        

            

            

            

            

        
    
    

        

            块
        
    

    
        //  元素节点nodeType：1  属性节点nodeType：2     文本节点nodeType：3

        //  父节点  parentNode
        var erweima = document.querySelector('.erweima');
        console.log(erweima);

        // 得到的是离得最近的父级节点  如果找不到父节点，就返回null
        console.log(erweima.parentNode);
        erweima.nodeType


        //子节点   childNodes
        var ul = document.querySelector('ul');
        // 得到所有的子节点   包含元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType); // 文本节点的类型是3

        //获取所有子元素的节点  children  只获取元素
        console.log(ul.children);



        //获取父元素当中的第一个字元素节点(firstElementChild)和最后子元素节点(lastElementChild)
        //只会获取元素节点，其他类型的节点不管  这俩个需要IE 9 以上兼容
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);

        console.log(ul.children[ul.children.length - 1]);
    

新浪下拉菜单

    
    
    
    Document
    
        .mmm {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        li {
            /* 隐藏无序排列的点 */
            list-style-type: none;
            /* display: none; */
        }
        
        .navs {
            display: none;
        }
    





    

        

            新浪微博
            

                
登录
                
注册
                
返回
                
退出
            
        
        

            腾讯
            

                
登录
                
注册
                
返回
                
退出
            
        
        

            微信
            

                
登录
                
注册
                
返回
                
退出
            
        
    
    
        var ul = document.querySelector('.nav');
        var lis = ul.children;
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function() {
                this.children[1].style.display = 'block';
            }
            lis[i].onmouseout = function() {
                this.children[1].style.display = 'none';
            }
        }
    

兄弟节点

    
    
    
    Document





    
00000000
    
div
    span
    
        var div = document.querySelector('div');
        // 获取当前节点的下一个兄弟元素节点
        console.log(div.nextElementSibling);
        // 获取当前节点的上一个兄弟元素节点
        console.log(div.previousElementSibling);
    

添加创建节点

    
    
    
    Document





    

        
123
    
    
        // 向ul当中添加一个li节点,首先需要创建一个节点出来
        var li = document.createElement('li');

        // 获取需要插入的父节点    node.appendChild(child);   node 是父级  child是子级
        var ul = document.querySelector('ul');
        ul.appendChild(li); // 默认插到已有元素的后面

        //  插入已有元素的前面    node.insertBefore(child,指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
    

复制和删除节点

    
    
    
    Document





    

        
熊大
        
熊二
        
光头强
    
    删除
    复制
    
        //  removeChild(child)  删除的是父节点当中的子元素
        var ul = document.querySelector('ul');

        var btn = document.querySelector('button');

        var li = document.createElement('li');

        btn.onclick = function() {
            ul.removeChild(ul.children[0]);
            if (ul.children.length == 0) {
                this.disabled = true;
            }
            ul.appendChild(li);
        }

        // node.cloneNode()   复制节点()默认参数为false 浅拷贝只克隆节点本身，不克隆里面的子节点
        //参数为true时， 深拷贝克隆节点本身以及里面的子节点
        var buu = document.querySelector('.buu');
        buu.onclick = function() {
            var lili = ul.children[0].cloneNode(true);
            ul.appendChild(lili);
        }
    

发布留言案例

    
    
    
    Document
    
        * {
            margin: 50px;
        }
        
        li {
            background-color: pink;
            width: 300px;
        }
        
        textarea {
            width: 150px;
            height: 100px;
        }
    




    
    发布
    

    
    
        //  获取元素
        var texts = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');

        btn.onclick = function() {
            if (texts.value == '') {
                alert('请输入内容!');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = texts.value;
                ul.insertBefore(li, ul.children[0]);
            }

        }
    

删除留言案例

    
    
    
    Document
    
        * {
            margin: 50px;
        }
        
        li {
            background-color: pink;
            width: 300px;
        }
        
        textarea {
            width: 150px;
            height: 100px;
        }
    




    
    发布
    

    
    
        //  获取元素
        var texts = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');

        btn.onclick = function() {
            if (texts.value == '') {
                alert('请输入内容!');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = texts.value + "删除";
                ul.insertBefore(li, ul.children[0]);
            }
            var as = document.querySelector('a');
            as.onclick = function() {
                // this指的是当前的标签a  我们要删除的是整个li,li是当前a的父节点
                ul.removeChild(this.parentNode);
            }

        }