day34—JavaScript实现DOM操作

转行学开发，代码100天——2018-04-19

1.通过JavaScript元素属性的操作

三种：

window.onload =function(){
var oTxt = document.getElementById("txt");
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){

// oTxt.value = "asdgas";  //第一种
// oTxt["value"] = "adafd"; //第二种
oTxt.setAttribute('value','agfas');  //第三种
};
};

2.获取DOM元素的方式

三种：id tagName className

document.getElementById("id")  //返回元素对象

document.getElementsByTagName("tag") ; //返回一个数组

DOM方法（className）

如：

<ul id="ull">
        <li class="box"></li>
        <li class="box"></li>
        <li></li>
        <li class="box"></li>
        <li></li>
        <li></li>
    </ul>

通过查找className=‘box’对li元素进行筛选

   //通过className方式获取元素
           var oUl = document.getElementById("ull");
           for (var i = 0; i < oUl.children.length; i++) {
             if (oUl.children[i].className == 'box') {
                 oUl.children[i].style.background = 'red';
             }
           }

通过分步获取ul，获取li，再注意判断每个li的className属性是否为‘box’即可

或将通过className的方法封装成一个基本函数，通过直接调用该函数进行代码简化。

        function getByClass(oparent,ochild){
            var oResult = [];
            var oEle = oparent.getElementsByTagName('*');//通配符
            for (var i = 0; i < oEle.length; i++) {
                if(oEle[i].className== ochild)
                    oResult.push(oEle[i]);
            }
            return oResult;
        }

      var oUl = document.getElementById("ull");
          // var oli = oUl.getElementsByTagName("li");

          // for (var i = 0; i < oli.length; i++) {
          //     if(oli[i].className=='box')
          //         oli[i].style.background="red";
          // }
          var aResult = getByClass(oUl,'box');
          for (var i = 0; i < aResult.length; i++) {
              aResult[i].style.background ='red';
          }