如何循环遍历document.querySelectorAll方法返回的结果_框架

使用JavaScript的forEach方法，我们可以轻松的循环一个数组，但如果你认为documentquerySelectorAll()方法返回的应该是个数组，而使用forEach循环它：

/ Will Not Work /

documentquerySelectorAll('module')forEach(function() {

});

执行上面的代码，你将会得到执行错误的异常信息。这是因为，documentquerySelectorAll()返回的不是一个数组，而是一个NodeList。

对于一个NodeList，我们可以用下面的技巧来循环遍历它：

var divs = documentquerySelectorAll('div');

[]forEachcall(divs, function(div) {

// do whatever

divstylecolor = "red";

});

当然，我们也可以用最传统的方法遍历它：

var divs = documentquerySelectorAll('div'), i;

for (i = 0; i < divslength; ++i) {

divs[i]stylecolor = "green";

}

还有一种更好的方法，就是自己写一个：

// forEach method, could be shipped as part of an Object Literal/Module

var forEach = function (array, callback, scope) {

for (var i = 0; i < arraylength; i++) {

callbackcall(scope, i, array[i]); // passes back stuff we need

}

};

// 用法:

// optionally change the scope as final parameter too, like ECMA5

var myNodeList = documentquerySelectorAll('li');

forEach(myNodeList, function (index, value) {

consolelog(index, value); // passes index + value back!

});

还有一种语法：forof 循环，但似乎只有Firefox支持：

/ Be warned, this only works in Firefox /

var divs = documentquerySelectorAll('div );

for (var div of divs) {

divstylecolor = "blue";

}

最后是一种不推荐的方法：给NodeList扩展一个forEach方法：

NodeListprototypeforEach = ArrayprototypeforEach;

var divs = documentquerySelectorAll('div')forEach(function(el) {

elstylecolor = "orange";

})

var gname=documentgetElementById("gname")text;

这句不对。应该是

var gname = documentgetElementById("gname")value;

不过这样，你拿到的只是选中的id，所以这下很麻烦，你用原生的JS还需要

var gnameOptions = documentgetElementById("gname")getElementsByTagName('option');

然后遍历一遍，找出符合的id

for (var i = 0; i < gnameOptionslength; i += 1) {

if (gnameOptions[i]value === gname) {

gname = gnameOptions[i]innerHTML;

break;

}

在HTML页面中，获取当前select元素中所选中的那个值和显示值。

<tr>

</select>

</td>

</tr>

function on_idmbzd_change(){

var sel_obj = documentgetElementByIdx("idMbzd ")；

var index = sel_objselectedIndex;

alert(sel_objoptions[index]value);

alert(sel_objoptions[index]text);

}

</script>

设置select元素的选中项：

通过<select>的属性来设置选中项，此方法可以在动态语言如php在后台根据需要控制输出结果。

< select id = "sel" >

< option value = "1" >1</ option >

< option value = "2" selected = "selected" >2</ option >

< option value = "3" >3</ option >

</ select >

扩展资料

超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。

HTML标签的大小写无关的，例如“主体”<body>跟<BODY>表示的意思是一样的，推荐使用小写。

参考资料来源：百度百科-HTML

一：JavaScript原生的方法

1:拿到select对象： var myselect=documentgetElementById(“test”);

2：拿到选中项的索引：var index=myselectselectedIndex ; // selectedIndex代表的是你所选中项的index

3:拿到选中项options的value： myselectoptions[index]value;

4:拿到选中项options的text： myselectoptions[index]text;

二：jQuery方法（前提是已经加载了jquery库）

1:var options=$(“#test option:selected”); //获取选中的项

2:alert(optionsval()); //拿到选中项的值

3:alert(optionstext()); //拿到选中项的文本

1、首先输入下方中的代码：

var obj = documentgetElementByIdx_x(”testSelect”); //定位id

var index = objselectedIndex; // 选中索引

2、然后继续输入下方中的代码：

var text = objoptions[index]text; // 选中文本

var value = objoptions[index]value; // 选中值

3、最后运行了就可以获取到select的option值了，效果图：

jsp界面上这里用的是<%%>你可以用jstl，不知道你存的数据是什么格式，暂且用list举例吧

List list = (List)sessiongetAttribute("集合名称");

for(int i=0;i<listsize();i++){

//？？？？这里加取值代码：如果是直接存的数据，就直接取；如果是对象的话，还要转换一下对象

<option value="固定值或者list中得到的值">固定值或者list中得到的值</option>

}

</select>

应该是想返回当前登录学生所选的课程吧

可以把sql改成select cou from Course cou where exist (select 1 from SelectCourse scou where Stuid='" + Session["UserName"]ToString() + "' and couCourseID=scouCourseID)

或者

select cou

from Course cou

Inner join SelectCourse scou on couCourseID=scouCourseID

where scouStuid='" + Session["UserName"]ToString() + "'

返回的就是该生所选的课程了

再用datasource,databind把它绑定到gridview

以上就是关于如何循环遍历document.querySelectorAll方法返回的结果全部的内容，包括:如何循环遍历document.querySelectorAll方法返回的结果、JS如何获取动态select值（我写的是点击添加）、如何获取和设置HTML文档中select元素的选中项等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9717297.html

如何循环遍历document.querySelectorAll方法返回的结果

发表评论

评论列表（0条）