获取元素中指定类型元素的属性

在自动化中经常会遇到在表单提交时，提示表单项的数据错误，需要对错误数据进行修改。

html 结构：

      如 车主的数据错误：

                  1、页面表现为：input标签框会红色显示，下端会显示错误信息；

                  2、html结构(如下):

                                    车主信息：id="ownerName"的class会自动添加formatError样式，

                                    错误信息：车主信息的兄弟元素span，错误数据style="display: inline;"或者无属性style。

 1  <div class="col-lg-2 col-md-2 col-xs-2" style="margin-left: -4%; width: 34%;" id="vhlOwnerName">
 2           <div class="form-group">
 3             <label class="col-lg-3 col-md-3 col-xs-3 control-label" style="width:60px;">
 4                 <font class="col-require">*</font>车主
 5                 <!-- 车主名称 -->
 6             </label>
 7               <div class="col-lg-8 col-md-8 col-xs-8">
 8                 <input id="ownerName" name="nbzItemMotorVoList[0].carOwner" value="" class="carOwner form-control input-sm quoteRequired formatError" type="text" copy-to-insured="insuredName">
 9                 <span id="ownerNameCheck" class="ownerNameCheck">
10                   <font color="red">不能含！@#￥%……&amp;*~：；+=等特殊符号！</font> 
11                 </span>
12                 <span id="ownerNameCheckT" class="ownerNameCheckT" style="display: inline;">
13                   <font color="red">不能为8位及8位以上的连续且重复的数字！</font> 
14                 </span>
15                 <span id="ownerNameCheckD" class="ownerNameCheckD" style="display: none;">
16                   <font color="red">需录入两位以上字符,且不能是纯数字。</font> 
17                 </span>
18               </div>
19           </div>
20      </div>

解决思路：

        根据class="formatError"获取错误数据的表单项，根据表单项获取父元素，再次获取父元素下的所有子元素并判断子元素类型和属性，最后返回满足条件的子元素id/name/class=错误信息字典。

function siblings (css = "formatError") {
    var siblings = new Array();
    var erreles = document.getElementsByClassName(css);
    for (var len = 0; len < erreles.length; len++){
        /*获得父节点的所有孩子节点*/
        var childs = erreles[len].parentNode.children;
        for(var i = 0; i < childs.length;i++){
            /* 判断类型是不是span */
            if(childs[i].tagName.toUpperCase() == "SPAN"){
                /* span的style="display: inline“;*/
                if(childs[i].style["display"] != "none"){
                    /* 获取该标签下的font文本*/
                    var key;
                    if(erreles[len].id != null){
                        key = "id:" + erreles[len].id;
                    }else{
                        if(erreles[len].name != null){
                            key = "name:" + erreles[len].name;
                        }else{
                            key = "class:" + erreles[len].class;
                        }
                    } 
                    siblings[key] = childs[i].children[0].innerText;
                }
            }
        }
    }
    return siblings;
}

 

测试情况：

 

posted on 2021-07-16 11:16  Old-Kang  阅读(75)  评论(0)    收藏  举报