js中DOM有关,children(),appendChild()实现的排序_appendchild 顺序方法 js-CSDN博客

本文链接：https://blog.csdn.net/ilikejj0/article/details/79547047

1、childNodes和nodeType
childNodes获取子节点，但是会把中一个标签与另一个标签的空格当做文本节点来计算。nodeType判断一个节点是什么类型的节点。只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
2、children获取子节点，它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
3、offsetParent获取该节点有定位的父元素节点。
4、firstChild()和firstElementChild()，有兼容问题，使用if来处理兼容问题。其余lastchild等的也是和这个相类似。
5、使用dom来获取元素属性，使用setAttribute(‘要设置的属性’，‘设置属性的值’),removeAttribute(名称)，getAttribute（名称），基本不常用。但也有必须用的情况。
6、使用className来选择元素，可以封装一个简单的方法，现在这个是低版本的，没有bug，但是有很强的局限性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>     
    </head>
    <body>
        <div id="div1">
            <ul>
                <li class="box"></li>
                <li></li>
                <li></li>
                <li class="box"></li>
                <li class="box"></li>
                <li></li>
                <li></li>
                <li class="box"></li>
            </ul>
        </div>
    </body>
    <script>
        function getByClass(oParent,sClass){
            //*号代表通配符
            var aResult=[];
            var aEle = oParent.getElementsByTagName('*');
            for(var i=0;i<aEle.length;i++){
                if(aEle[i].className==sClass){
                    aResult.push(aEle[i]);
                }               
            }
            return aResult;
        }
        var div1 = document.getElementById('div1');
        var aBox = getByClass(div1,'box');
        for(var i=0;i<aBox.length;i++){
            aBox[i].style.backgroundColor='red';
        }
    </script>
</html>

7、创建节点比如论坛功能
一定要把创建好的节点加入到他的父元素下面
creatElement（）创建节点
appendChild()两种功能：（1）将创建好的节点添加到他的父元素之前（2）将别处的节点加入到一个地方，实现原理是，将该节点从别处删除，然后再添加到要添加的位置
insertBefore()在某个节点之前插入
removeChild()删除某个节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>创建节点</title>
        <script>
            window.onload=function(){
                var oUl = document.getElementById('oUl');
                var oBtn = document.getElementById('btn');
                var input1 = document.getElementById('input1');
                var aLi = document.getElementsByTagName('li');
                oBtn.onclick=function(){
                    var oLi = document.createElement('li');                 
                    oLi.innerHTML=input1.value;
                    if(aLi.length>0){
                        oUl.insertBefore(oLi,aLi[0]);
                    }else{
                        oUl.appendChild(oLi);
                    }
                }
            }
        </script>
    </head>
    <body>
        <div>
            <input id="input1" type="text" />
            <input id='btn' type="button" value="创建" />
            <ul id='oUl'>
            </ul>
        </div>
    </body>
</html>

8、appendChild()根据他的，先将节点从别处删除，在进行添加的原理，实现的排序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>排序</title>
        <style>
            li{background-color: antiquewhite;width: 500px;margin-top: 5px;}
        </style>
        <script>
            window.onload=function(){
                var oUl = document.getElementById('oUl');
                var oLi = document.getElementsByTagName('li');
                var btn = document.getElementById('btn');
                btn.onclick = function(){
                    oUl.appendChild(oLi[0]);
                }
            }
        </script>
    </head>
    <body>
        <input id='btn' type="button" value="排序" />
        <div>
            <ul id='oUl'>
                <li>11111</li>
                <li>22222</li>
                <li>33333</li>
                <li>44444</li>
                <li>55555</li>
            </ul>
        </div>
    </body>
</html>