JavaScript遍历页面寻找节点的一些技巧

1.寻找兄弟节点(上一个节点/下一个节点) --为日期控件的input节点设置字体样式

var imgArr=document.getElementsByTagName("img");
for( var i=0;i<imgArr.length;i++){
if(imgArr[i].src=="http://localhost:8090/web/product/taskform/report/My97DatePicker/skin/datePicker.gif"){
//获取上一个节点
var inputs=imgArr[i].previousSibling; //nextSibling临近的下一个节点
if(inputs!=null){
inputs.style.fontSize="7pt";
inputs.style.fontBlob=true;
inputs.style.fontWeight="normal";
}
}
}

2.寻找父节点 --控制复选框的父节点td元素，添加onclick事件控制复选框

var getCK=document.getElementsByTagName('input');
for(var i=0;i<getCK.length;i++){
var whichObj=getCK[i];
//判断是否为复选框,如果是则获取父节点
if(whichObj.type=="checkbox"){
var parent_Node=whichObj.parentNode;
if (parent_Node != null) {
parent_Node.onclick=function(){
var chkchild=this.firstChild;
if(chkchild.checked){
chkchild.checked=false;
}
else{
chkchild.checked=true;
}
}
}
}
}

3.按钮的onclick事件触发validate方法，检查页面未填写项，并且标记上颜色

//检查填写项方法
function validate(){
var textareas=document.getElementsByTagName('textarea');
var selects=document.getElementsByTagName('select');
var texts=document.getElementsByTagName('input');
ergodicTextArea(textareas);
ergodicSelect(selects);
ergodicText(texts);
}

//验证文本域textarea
function ergodicTextArea(obj){
for(var i=0;i<obj.length;i++){
var whichObj=obj[i];
//有值
if(whichObj.value.replace(/\s+/g,"")!=""){
}
//有空值,则添加样式
else{
whichObj.style.border="2px solid red";
}
whichObj.onblur=function(){
if(this.value.replace(/\s+/g,"")!=""){
this.style.border="1px solid black";
}
else{
}
}
}
}

//验证下拉框select
function ergodicSelect(obj){
for(var i=0;i<obj.length;i++){
var whichObj=obj[i];

if(whichObj.value!=""){
}
else{
whichObj.style.backgroundColor="red";
}
whichObj.onblur=function(){
if(this.value!=""){
this.style.backgroundColor="#fff";
}
else{
}
}
}
}

//验证文本框text
function ergodicText(obj){
for(var i=0;i<obj.length;i++){
var whichObj=obj[i];
if(whichObj.type=="text"){
//是否有值如果没值添加样式
if(whichObj.value.replace(/\s+/g,"")!=""){
}
//有空值,则添加样式
else{
whichObj.style.border="2px solid red";
}
}
whichObj.onblur=function(){
if(this.value.replace(/\s+/g,"")!=""){
this.style.border="1px solid black";
}
else{
}
}
}
}

JS获取select文本值方法:

document.getElementById('type').options[document.getElementById('type').selectedIndex].text;