sha1、childNodes

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <script type="text/javascript">
  window.οnlοad=function(){
   var ou=document.getElementById('ul1')
   // console.log(ou.childNodes.length)
   // childNodes包括文本节点、元素节点
   // alert(ou.childNodes.length)
   // alert(ou.children.length)  --- 常用   
    
   for (var i = ou.childNodes.length - 1; i >= 0; i--) {
    // nodeType==3 ->  文本节点
    // nodeType==1 ->  元素节点
    // alert(ou.childNodes[i].nodeType) 
    if(ou.childNodes[i].nodeType==1){
     ou.childNodes[i].style.background='red'
    }
   }
  }
 </script>
 <body>
  <!-- dom基础 -->
  <ul id="ul1">
   <li>我是元素节点</li>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
  </ul>
  我是文本节点
 </body>
</html>

2、DOM操作元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.οnlοad=function(){
            var ot=document.getElementById('t1')
            var ob=document.getElementById('b1')

            ob.οnclick=function(){
                // ot.value='元素操作第一种方法：style'
                // ot['value']='元素操作第二种方法'
                ot.setAttribute('value','元素操作第三种方法：DOM')
            }
        }
    </script>
</head>
<body>
    <input type="text" name="" id="t1">
    <input type="button" value="按钮" id="b1">
</body>
</html>

3、className操作元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <link rel="stylesheet" href="">
        <script type="text/javascript">
            //getByClass()：通过class选取元素
            function getByClass(oParent,sClass){
                var aResult=[]
                var aElement=oParent.getElementsByTagName('*')
                for (var i = aElement.length - 1; i >= 0; i--) {
                    if(aElement[i].className=sClass){
                        aResult.push(aElement[i])
                    }
                }
                return aResult
            }
            window.οnlοad=function(){
                var oul1=document.getElementById('ul1')
                // var ali=oul1.getElementsByTagName('li')
                // for (var i = oul1.length - 1; i >= 0; i--) {
                //     if(ali[i].className=="box"){
                //         ali[i].style.background='red'
                //     }
                // }

                var aBox=getByClass(oul1,'box')

                for (var i = aBox.length - 1; i >= 0; i--) {
                    aBox[i].style.background='red'
                }

            }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li class="box"></li>
            <li class="box"></li>
            <li></li>
            <li class="box"></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

4、DOM创建元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.οnlοad=function () {
            // body...
            var ob=document.getElementById('b1')
            var oul=document.getElementById('ul1')
            var ot=document.getElementById('t1')

            ob.οnclick=function(){
                var oli=document.createElement('li')

                oli.innerHTML=ot.value
                oul.appendChild(oli)
                // 父级ou1上调用子节点oli
            }
        }
    </script>
</head>
<body>

    <input id="t1" type="text" name="" value="" >
    <input id="b1" type="button" value="createLi">

    <ul id="ul1">
        
    </ul>
</body>
</html>

5、DOM插入元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.οnlοad=function () {
            // body...
            var ob=document.getElementById('b1')
            var oul=document.getElementById('ul1')
            var ot=document.getElementById('t1')

            //ali:获取ul的所有li元素
            var ali=oul.getElementsByTagName('li')

            ob.οnclick=function(){
                var oli=document.createElement('li')
                oli.innerHTML=ot.value
                if(ali.length>0){
                    oul.insertBefore(oli,ali[0])                    
                }else{
                    oul.appendChild(oli)
                }
            
            }
        }
    </script>
</head>
<body>

    <input id="t1" type="text" name="" value="" >
    <input id="b1" type="button" value="createLi">

    <ul id="ul1">
        
    </ul>
</body>
</html>

6、DOM删除元素

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.οnlοad=function(){
            var oul=document.getElementById('ul1')
            var aA=oul.getElementsByTagName('a')

            for (var i = aA.length - 1; i >= 0; i--) {
                aA[i].οnclick=function () {
                    oul.removeChild(this.parentNode)
                    // body...
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>1<a href="javascript:;">删除</a></li>
        <li>22<a href="javascript:;">删除</a></li>
        <li>333<a href="javascript:;">删除</a></li>
        <li>4444<a href="javascript:;">删除</a></li>
        <li>55555<a href="javascript:;">删除</a></li>
        <li>666666<a href="javascript:;">删除</a></li>
    </ul>
</body>
</html>

7、文档碎片，使用较少

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.οnlοad=function(){
            var oul=document.getElementById('ul1')
            // var aA=oul.getElementsByTagName('a')
            var ofrag=document.createDocumentFragment()

            for (var i = 100 - 1; i >= 0; i--) {
                var oli=document.createElement('li')
                ofrag.appendChild(oli)
            }
            oul.appendChild(ofrag)
        }
    </script>
</head>
<body>
    <ul id="ul1">
        
    </ul>
</body>
</html>