DOM基础关键词：DOM节点、childNodes、文本节点及元素节点、nodeType、children、parent

关键词：DOM节点、childNodes、文本节点及元素节点、nodeType、children、parentNode、offsetParent、firstChild、lastChild、setAttribute、className

节点：和css中的标签、js中的元素是一个意思； childNodes：子节点集合，包括文本节点及元素节点（在IE8下不包括空白的文本节点）文本节点及元素节点：前者不包括在标签中，后者包含在标签中； nodeType：节点类型；nodeType为3时为文本节点，nodeType为1时为元素节点； children：子节点集合，不包括文本节点，只包含元素节点； parentNode：元素父节点； offsetParent：表示用于定位的父级； firstChild：第一个子节点（包括文本子节点）。firstElementChild则不包括文本子节点，只包括元素子节点，但是低版本IE不兼容，因此要用if语气来兼容； setAttribute：用DOM方式操纵元素，语法为setAttribute(name, value)，与此类似的还有getAttribute，语法为getAttribute(name)，以及removeAttribute，语法为removeAttribute(name)； className：类别名，可以获取相同类名的节点，因为经常使用下面就做一个简单的封装，方便复用

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
</head>
<body>
        <ul id='ull'>
                <li class='box'></li>
                <li class='box'></li>
                <li></li>
                <li></li>
                <li class='box'></li>
        </ul>
</body>

<script>

        //封装函数
        function getByClass(oParent,sClass){

                var result = [];
                var ele = oParent.getElementsByTagName('*');
                for(var i = 0; i<ele.length;i++){
                        if(ele[i].className == sClass){
                          result.push(ele[i]);
                        }
                }

                return result;
        }
        
        var ul = document.getElementById('ull');


        var boxs = getByClass(ul,'box');

        for(var i = 0; i<boxs.length;i++){
       
              boxs[i].style.background = 'yellow'    
                
        }

下面的这一段d代码是未封装前的：

       // var lis = ul.getElementsByTagName('li');
        // for(var i= 0; i < lis.length;i++){
        //         if(lis[i].className == 'box'){
        //                 lis[i].style.background = 'red'
        //         }
        // }

</script>
</html>