JS遍历和修改html元素文字


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS遍历和修改html元素文字</title>

<button onclick="func();">点击这里</button><hr>
<button>师不必贤于弟子</button><hr>
<input value="师不必贤于弟子" type="button" /><hr>
<input type="text" value="师不必贤于弟子" /><hr>
<select>
<option>师不必贤于弟子</option>
</select><hr>
<a href="#">师不必贤于弟子</a><hr>
师不必贤于弟子<hr>
<textarea>师不必贤于弟子</textarea><hr>

<script>
function func(){//alert(666);
    var bodyx=document.getElementsByTagName('BODY')[0];
    //alert(bodyx.innerHTML);
    var allx=document.all;
    var len=allx.length;
    for(var i=0;i<len;i++){
        if(allowTags(i,allx)){
            bodyx.innerHTML=bodyx.innerHTML.replace('弟子','1500km.com');
        }
    }
}


function allowTags(i,allx){
    var tag=allx.item(i).tagName;
    if('BUTTON'==tag
        ||'INPUT'==tag
        ||'TEXTAREA'==tag
        ||'SPAN'==tag
        ||'DIV'==tag
        ||'A'==tag
        ||'LI'==tag
        ||'BODY'==tag
        ||'OPTION'==tag
        ||'TD'==tag
    ){
        return true;
    }
    return false;
}

console.log(document.all);
</script>

<table border="1">
  <tr>
    <td>师不必贤于弟子</td>
  </tr>
  <tr>
    <td>师不必贤于弟子</td>
  </tr>
</table>
<p>
<li>师不必贤于弟子</li>
<li>师不必贤于弟子</li>
</p>
<br>

程序运行结果如下,点击这里亲自运行看看