DOM

DOM( 文档对象模型 Document Object Model ) 是 JavaScript 操作HTML文档的接口, 使文档操作变得非常优雅 , 简便

一.nodeType常用属性值

nodeType值 : 1 , 　　是元素节点;

nodeType值 : 3 , 　是文字节点;

nodeType值 : 8 , 　　是注释节点;

nodeType值 : 9 , 　　是document节点; document对象代表整个页面的总节点

nodeType值 : 10 , 　　是DTD节点;

二.节点获取

document.getElementById( )　　　　　　　　　通过id得到元素　　　　 IE6兼容

　　注意: 有多个相同id,只能得到第一个哦　　

        <div id="box">我是一个盒子</div>
        <script>
            var box = document.getElementById('box')
            console.log(box);
            // <div id="box">我是一个盒子</div>
        </script>

document.getElementByTagName( )　　　　　　通过标签名得到元素数组 IE6兼容

        <div id="box">我是一个盒子</div>
        
        <script>
            var box = document.getElementsByTagName('div')
            console.log(box[0]);
            // <div id="box">我是一个盒子</div>
        </script>

document.getElementByClassName( )　　　　　通过class得到元素数组 　IE9兼容

        <div id="box" class='classBox'>我是一个盒子</div>
        
        <script>
            var box = document.getElementsByClassName('classBox')
            console.log(box[0]);
            // <div id="box" class='classBox'>我是一个盒子</div>
        </script>

document.querySelector( )　　　　　　　　　　通过选择器得到元素　　IE8部门兼容,IE9完全兼容基本用这种,方便

document.querySelectorAll( )　　　　　　　　通过选择器得到元素数组 IE8部门兼容,IE9完全兼容

        <div id="box" class='classBox'>我是一个盒子</div>
        <div id="box1" class='classBox'>我是2个盒子</div>
        
        <script>
            var box = document.querySelector('#box')
            var box1 = document.querySelector('.classBox')
            var box2 = document.querySelectorAll('.classBox')

            console.log(box);
            // <div id="box" class='classBox'>我是一个盒子</div>

            console.log(box1);
            // <div id="box" class='classBox'>我是一个盒子</div>

            console.log(box2[1]);
            // <div id="box1" class='classBox'>我是2个盒子</div>
        </script>

三.节点的关系

关系　　　　　　　　所有节点　　　　　　　　只考虑元素节点( IE9开始兼容的 )

子节点:　　　　　　childNodes　　　　　　　　　　children

父节点:　　　　　　parentNode　　　　　　　　　　同

第一个子节点:　　　firstChild　　　　　　　　firstElementChild

最后一个子节点:　　lastChild　　　　　　　　 lastElementChild

前一个兄弟节点:　　previousSibling　　　　　previousElementSibling

后一个兄弟节点:　　nextSibling　　　　　　　nextElementSibling

注意 : 文本节点也是子节点

    <body>
        <div class="box">
            <p>我是段落</p>
            <h1 id='hro'>我是h1</h1>
            <p class='pro'>我是段落</p>
        </div>
        
        <script>
            console.log(document.getElementsByClassName('box')[0].childNodes); 
            // 获取所有的节点: NodeList(7) [text, p, text, h1, text, p, text]
            
            console.log(document.getElementsByClassName('box')[0].children); 
            // 获取元素节点:HTMLCollection(3) [p, h1, p]
            
            console.log(document.getElementsByClassName('box')[0].children.hro); 
            // 是id的话,可以直接.id调用  <h1 id="hro">我是h1</h1>
            
            console.log(document.getElementsByClassName('box')[0].children.pro); 
            // 是class的话,会 undefined
            
            console.log(document.getElementsByClassName('box')[0].children[2]);
            // <p class='pro'>我是段落</p>
        </script>
    </body>

只考虑元素节点 ( 兼容IE6的 )

// 封装函数 : 可以返回元素的所有子元素节点（兼容到IE6），类似children的功能
        function getChildren(node) {
            // 结果数组
            var children = [];
            // 遍历node这个节点的所有子节点，判断每一个子节点的nodeType属性是不是1
            // 如果是1，就推入结果数组
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i].nodeType == 1) {
                    children.push(node.childNodes[i]);
                }
            }
            return children;
        }

// 封装函数 : 可以返回元素的前一个元素兄弟节点（兼容到IE6），类似previousElementSibling的功能
        function getElementPrevSibling(node) {
            var o = node;
            // 使用while语句
            while (o.previousSibling != null) {
                if (o.previousSibling.nodeType == 1) {
                    // 结束循环，找到了
                    return o.previousSibling;
                }

                // 让o成为它的前一个节点，就有点“递归”的感觉
                o = o.previousSibling;
            }
            return null;
        }

// 封装函数 : 可以返回元素的所有元素兄弟节点( 前面 和 后面)
        function getAllElementSibling(node) {
            // 前面的元素兄弟节点
            var prevs = [];
            // 后面的元素兄弟节点
            var nexts = [];
            
            var o = node;
            // 遍历node的前面的节点
            while(o.previousSibling != null) {
                if(o.previousSibling.nodeType == 1){
                    prevs.unshift(o.previousSibling);
                }
                o = o.previousSibling;
            }

            o = node;

            // 遍历node的后面的节点
            while(o.nextSibling != null) {
                if(o.nextSibling.nodeType == 1){
                    nexts.push(o.nextSibling);
                }
                o = o.nextSibling;
            }

            // 将两个数组进行合并，然后返回
            return prevs.concat(nexts);
        }

四.节点操作

　　1.改变元素节点中的内容: innerHTML( 可以加html ) ; inneText( 只能写文本 )

　　2.添加元素节点的CSS样式

　3.　改变元素节点的样式 ( 符合W3C标准的熟悉 )

　　 <img src="imges/1.jpg" id='pic' >

    <script type="text/javascript">
        document.getElementById('pic').src = 'imges/2.jpg'
    </script>

　4. 改变不符合W3C的属性

　　　　setAttribute( )设置和 getAttribute( ) 读取

    <div id="box"></div>

    <script>
        var box = document.getElementById('box');
        box.setAttribute('data-n', 10);
        
        var n = box.getAttribute('data-n');
        alert(n);
    </script>

　5. 元素节点的创建 document.createElement( )

　　　　document.createElement( 'div' ) 这样创建出来的是' 空虚节点 ' , 并没有挂着到DOM树上;

　　　　所以 : 要继续使用 appendChild( )[追加,就是在追后] 或 insertBefore( ) 方法[在...元素之前] 将孤儿节点插入到DOM树上

　　　　父节点.appendChild( 空虚节点 ) : 空虚节点就成为父节点的最后一个子节点

　　　　父节点.appendChild( 空虚节点 , 标杆节点) : 空虚节点就成为标杆节点之前的节点

    <div id="box">
        <p>我是原本的段落0</p>
        <p>我是原本的段落1</p>
        <p>我是原本的段落2</p>
    </div>
    <script>
        var oBox = document.getElementById('box');
        
        // 创建孤儿节点
        var oP = document.createElement('p');
        // 设置内部文字
        oP.innerText = '我是新来的';
        
        // 上树
        oBox.appendChild(oP);
        
    </script>

　6. 删除子节点　　removeChild( ) 从DOM中删除一个子节点

　　注意 : 节点不能主动删除自己 , 必须由父节点删除它

　　父节点.removeChild( 删除子节点 )

　7.克隆节点　　　cloneNode( ) 可以克隆节点,克隆的节点是孤儿节点

　　var 孤儿节点 = 老节点.cloneNode( );

　　var 孤儿节点 = 老节点.cloneNode( true );

　　参数是布尔值,表示是否采用深度克隆

　　　　true : 该节点的所有后代节点也都要被克隆

　　　　false: 只克隆该节点本身

posted @ 2022-01-11 14:31 杨建鑫阅读(309) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端_蜡笔小新欢迎您