关于函数的意见（递归遍历DOM树） [英] Opinions on function (recursive traversing DOM-tree)
问题描述
大家好，
我通常不会使用javascript，但对于一个非常大的形式，我是
尝试以下：
我有任意深度嵌套的无序列表，每个< li3
复选框都有。这是为了授予用户某些权利，并且权利是向下继承（或未设置）
。
直接说明某些更改将对用户，我想
选中/取消选中特定的复选框。我现在已经开始工作了，但它好像需要更长的时间才需要更长的时间。有谁知道如何更有效地完成以下
？ （并且至少在MSIE，FF，Opera&
Netscape中工作）：
在线小例子： http://www.rwasmus.nl/test.html
- --- HTML --------
< ul>
< li>
< input type =" ;复选框" class =" small add"
onClick =" changedown（this.className，this.parentNode，this.checked）;" />
< input type ="复选框" class =" small edit"
onClick =" changedown（this.className，this.parentNode，this.checked）;" />
< input type ="复选框" class =" small del"
onClick =" changedown（this.className，this.parentNode，this.checked）;" />
< ul>
< li>< input type ="复选框" class =" small add"
onClick =" changedown（this.className，this.parentNode，this.checked）;" />
< input type ="复选框" class =" small edit"
onClick =" changedown（this.className，this.parentNode，this.checked）;" />
< input type ="复选框" class =" small del"
onClick =" changedown（this.className，this.parentNode，this.checked）;" />
< / li>
< / ul>
< / li>
< / ul>
--js函数-----
函数changeown（rtype，elid，rvalue）{
var el = elid;
var i;
for（i = 0; i< el.childNodes.length; i ++）{
var node = el.childNodes [i];
if（node.nodeName ==''ul''|| node.nodeName ==''UL''|| node.nodeName = =''li''||
node.nodeName ==''LI''）{
changeown（rtype，node，rvalue）;
}
if（（node.nodeName ==''input''|| node.nodeName ==''INPUT''）&&
node.className == rtype）{
node.checked = rvalue;
}
}
}
TIA，
-
Rik Wasmus
Hi all,
I usually don''t really use javascript, but for a pretty big form, I''m
trying the following:
I''ve got arbitrarily deep nested unorderd list, with in every <li3
checkboxes. It''s for granting users certain rights, and rights are
inherited (or unset) downwards.
To directly illustrate what certain changes will do for the user, I want to
check/uncheck the particular checkboxes. I''ve got it working now, but it
seems to take longer then needed. Has anybody an idea how the following
could be done more effectively? (And working in at least MSIE, FF, Opera &
Netscape):
Online small example: http://www.rwasmus.nl/test.html
----HTML--------
<ul>
<li>
<input type="checkbox" class="small add"
onClick="changedown(this.className,this.parentNode ,this.checked);" />
<input type="checkbox" class="small edit"
onClick="changedown(this.className,this.parentNode ,this.checked);" />
<input type="checkbox" class="small del"
onClick="changedown(this.className,this.parentNode ,this.checked);" />
<ul>
<li><input type="checkbox" class="small add"
onClick="changedown(this.className,this.parentNode ,this.checked);" />
<input type="checkbox" class="small edit"
onClick="changedown(this.className,this.parentNode ,this.checked);" />
<input type="checkbox" class="small del"
onClick="changedown(this.className,this.parentNode ,this.checked);" />
</li>
</ul>
</li>
</ul>
--js function-----
function changedown(rtype,elid,rvalue){
var el = elid;
var i;
for(i=0; i < el.childNodes.length;i++){
var node = el.childNodes[i];
if(node.nodeName==''ul'' || node.nodeName==''UL'' || node.nodeName==''li'' ||
node.nodeName==''LI''){
changedown(rtype,node,rvalue);
}
if((node.nodeName==''input'' || node.nodeName==''INPUT'' ) &&
node.className==rtype){
node.checked = rvalue;
}
}
}
TIA,
--
Rik Wasmus
推荐答案
Rik写道：
Rik wrote:
有谁知道如何以下
可能是做得更有效？ （并且至少在MSIE，FF，Opera&
Netscape中工作）：
Has anybody an idea how the following
could be done more effectively? (And working in at least MSIE, FF, Opera &
Netscape):
< ul>
< li>
< input type ="复选框" class =" small add"
onClick =" changedown（this.className，this.parentNode，this.checked）;" />
<ul>
<li>
<input type="checkbox" class="small add"
onClick="changedown(this.className,this.parentNode ,this.checked);" />
一般评论，并不是为了让你的功能更有效：如果你使用/ b $ b，那么你似乎在编码XHTML。
XHTML中的元素和属性名称都是小写的，所以你应该使用onclick而不是onClick。
课程只有当您使用XML或
XHTML MIME类型（如application / xml或application / xhtml + xml）提供文档时才有意义
浏览器使用XML解析器解析。
General comment, not meant to make your function more effective: if you
use /then you seem to be coding XHTML. Element and attribute names in
XHTML are all lower case so you should use onclick and not onClick. Of
course that does only matter if you serve the document with an XML or
XHTML MIME type like application/xml or application/xhtml+xml so that
the browser parses with an XML parser.
函数已更改（rtype，elid，rvalue）{
var el = elid ;
function changedown(rtype,elid,rvalue){
var el = elid;
这似乎不需要额外的变量所以简单地做
函数changeown（rtype，el，rvalue）{
如果你正在寻找有效的编码，
就足够了。
That extra variable does not seem to be needed so simply doing
function changedown (rtype, el, rvalue) {
should suffice if you are looking for effective coding.
var i;
for（i = 0; i< el.childNodes.length; i ++）{
var i;
for(i=0; i < el.childNodes.length;i++){
var i，childNodes = el.childNodes，l = childNodes.length;
for（ i = 0; i< l; i ++）{
var i, childNodes = el.childNodes, l = childNodes.length;
for (i = 0; i < l; i++) {
var node = el.childNodes [i];
var node = el.childNodes[i];
var node = childNodes [i];
if（node.nodeType === 1）{
var tagName = node.tagName.toLowerCase（）;
var node = childNodes[i];
if (node.nodeType === 1) {
var tagName = node.tagName.toLowerCase();
if（node.nodeName ==''ul''|| node.nodeName ==''UL ''|| node.nodeName ==''li''||
node.nodeName ==''LI''）{
if(node.nodeName==''ul'' || node.nodeName==''UL'' || node.nodeName==''li'' ||
node.nodeName==''LI''){
if（tagName ===''ul''|| tagName ===''li''）{
changedown（rtype，node，rvalue）;
}
if (tagName === ''ul'' || tagName === ''li'') {
changedown(rtype,node,rvalue);
}
changeown（rtype，node，rvalue）;
}
if（（node.nodeName ==''输入''|| node.nodeName ==''INPUT''）&&
node.className == rtype）{
节点。 checked = rvalue;
}
changedown(rtype,node,rvalue);
}
if((node.nodeName==''input'' || node.nodeName==''INPUT'' ) &&
node.className==rtype){
node.checked = rvalue;
}
else if（tagName ===''input''&& node.className == = rtype）{
node.checked = true;
}
}
}
但也可以更容易简单使用
getElementsByTagName（''input''）例如
函数已更改（className，element，checked）{
var inputs = element.getElementsByTagName（''input''），l = inputs.length;
for（var i = 0;我<升; i ++）{
var input = inputs [i];
if（input.type.toLowerCase（）===''checkbox''&& input。 className
=== className）{
input.checked = checked;
}
}
}
如果您知道className比较已足够，那么您不需要
需要输入.type到''复选框''比较。
-
Martin Honnen
http://JavaScript.FAQTs.com/
Martin Honnen写道：
Martin Honnen wrote:
Rik写道：
Rik wrote:
>有人知道如何更有效地完成以下工作吗？ （至少在MSIE，FF，
Opera和Netscape中工作）：
>Has anybody an idea how the following
could be done more effectively? (And working in at least MSIE, FF,
Opera & Netscape):
>< ul>
< li>
< input type ="复选框" class =" small add"
onClick =" changedown（this.className，this.parentNod e，this.checked）;" />
><ul>
<li>
<input type="checkbox" class="small add"
onClick="changedown(this.className,this.parentNod e,this.checked);" />
一般评论，并不是为了让你的功能更有效：如果
你
使用/然后你似乎在编写XHTML。元素和属性名称
XHTML中的
都是小写的，所以你应该使用onclick而不是on / b
onClick。
General comment, not meant to make your function more effective: if
you
use /then you seem to be coding XHTML. Element and attribute names
in XHTML are all lower case so you should use onclick and not
onClick.
你是正确的。通常我使用XHTML，但是为了测试目的，将HTML
文档放在一起。在调试时，我考虑过更改
onclick to onClick，因为有些东西不起作用。造成了一点点混乱
确实。
You''re offcourse right. Normally I use XHTML, but flung together a HTML
document here for test-purposes. And on debugging I thought about changing
onclick to onClick because something didn''t work. Created a bit of a mess
indeed.
当然只有你提供文件才有意义
使用XML或
XHTML MIME类型，如application / xml或application / xhtml + xml，以便浏览器使用XML解析器解析。
Of course that does only matter if you serve the document
with an XML or
XHTML MIME type like application/xml or application/xhtml+xml so that
the browser parses with an XML parser.
我通常做的事情（如果浏览器为XHTML发送正确的HTTP_ACCEPT）。
Which I usually do (if the browser sends a correct HTTP_ACCEPT for XHTML).
>函数已更改（rtype，elid，rvalue）{
var el = elid;
>function changedown(rtype,elid,rvalue){
var el = elid;
这似乎不需要额外的变量，所以简单地做了
函数更改（rtype，el，rvalue）{
如果您正在寻找有效的编码，
应该足够了。
That extra variable does not seem to be needed so simply doing
function changedown (rtype, el, rvalue) {
should suffice if you are looking for effective coding.
是的，从另一个问题继承：我有一个范围问题，结果是
在我身上。
Yup, inheritance from another issue: I had an issue with scope, turned out
to be in the i though.
> var i;
for（i = 0; i< el.childNodes.length; i ++）{
> var i;
for(i=0; i < el.childNodes.length;i++){
var i，childNodes = el.childNodes， l = childNodes.length;
var i, childNodes = el.childNodes, l = childNodes.length;
为什么不：
l = el.childNodes.length？
如果是这样，为什么不直接在for循环？保存一个无用的
变量。
Why not:
l = el.childNodes.length?
And if so, why not directly in the for loop? saves an otherwise useless
variable.
for（i = 0; i< l; i ++）{
for (i = 0; i < l; i++) {
> var node = el.childNodes [i];
> var node = el.childNodes[i];
var node = childNodes [i];
if（node.nodeType === 1）{
var tagName = node.tagName.toLowerCase（）;
var node = childNodes[i];
if (node.nodeType === 1) {
var tagName = node.tagName.toLowerCase();
好主意。
Good idea.
> if（node.nodeName ==''ul''|| node.nodeName ==''UL''||
node.nodeName ==''li''|| node.nodeName ==''LI ''）{
> if(node.nodeName==''ul'' || node.nodeName==''UL'' ||
node.nodeName==''li'' || node.nodeName==''LI''){
if（tagName ===''ul''|| tagName ===''li''）{
changeown（rtype，node，rvalue）;
}
if (tagName === ''ul'' || tagName === ''li'') {
changedown(rtype,node,rvalue);
}
> changeown（rtype，node，rvalue）;
}
if（（node.nodeName ==''input''|| node.nodeName ==''INPUT''）&&
node.className == rtype）{
node.checked = rvalue;
}
> changedown(rtype,node,rvalue);
}
if((node.nodeName==''input'' || node.nodeName==''INPUT'' ) &&
node.className==rtype){
node.checked = rvalue;
}
else if（tagName ===''输入''&& node.className === rtype）{
node.checked = true;
else if (tagName === ''input'' && node.className === rtype) {
node.checked = true;
让我们不要这样做，不会在取消选中时取消选中它:-)。
Let''s not do that, that will not uncheck it on an uncheck higher up :-).
}
}
}
但也可以更简单地使用
getElementsByTagName（''input''）例如
函数changeown（className，element，checked）{
var inputs = element.getElementsByTagName（''输入''），l =
inputs.length; for（var i = 0; i< l; i ++）{
var input = inputs [i];
if（input.type.toLowerCase（）== =''复选框''&& input.className
=== className）{
input.checked = checked;
}
}
}
}
}
}
But alternatively it might be easier to simply use
getElementsByTagName(''input'') e.g.
function changedown (className, element, checked) {
var inputs = element.getElementsByTagName(''input''), l =
inputs.length; for (var i = 0; i < l; i++) {
var input = inputs[i];
if (input.type.toLowerCase() === ''checkbox'' && input.className
=== className) {
input.checked = checked;
}
}
}
遗憾的是不是这种情况，因为列表中的嗨？ br />
很重要。除非你知道一个快速的方法来解决所有输入
元素直接后代的特定< li> ;.
Which is unfortunately not the case, because the hi?rarchie in the listing
matters a great deal. Unless you know a quick way to adress all input
elements directly descendant of a specific <li>.
如果你知道className比较就足够了，你不需要
需要输入.type到''复选框''比较。
If you know that the className comparison is sufficient then you don''t
need the input.type to ''checkbox'' comparison.
通常情况如此，但由于这是动态形式，因此不是完全可靠的。
但是感谢你指出了一些邋code的代码:-)
Grtz，
-
Rik Wasmus
Which would normally be so, but as this is a dynamic form it is not totally
reliable.
But thanks for pointing out some sloppy code indeed :-)
Grtz,
--
Rik Wasmus
Rik写道：
Rik wrote:
Martin Honnen写道：
Martin Honnen wrote:
>>但也可以更简单地使用
getElementsByTagName（'''输入''）例如
函数changeown（className，element，checked）{
var inputs = element.getElementsByTagName（''input''），l =
inputs.length ; for（var i = 0; i< l; i ++）{
var input = inputs [i];
if（input.type.toLowerCase（）===''checkbox''& & input.className
=== className）{
input.checked = checked;
}
}
}
>>But alternatively it might be easier to simply use
getElementsByTagName(''input'') e.g.
function changedown (className, element, checked) {
var inputs = element.getElementsByTagName(''input''), l =
inputs.length; for (var i = 0; i < l; i++) {
var input = inputs[i];
if (input.type.toLowerCase() === ''checkbox'' && input.className
=== className) {
input.checked = checked;
}
}
}
遗憾的是不是这种情况，因为列表中的hi？rarchie
非常重要。除非你知道一个快速的方法来解决所有输入
元素直接后代的特定< li>。
Which is unfortunately not the case, because the hi?rarchie in the listing
matters a great deal. Unless you know a quick way to adress all input
elements directly descendant of a specific <li>.
我不明白你的评论，你传入一个元素节点作为该函数的第二个参数
然后我的建议调用
element.getElementsByTagName（''input''）它完全符合你的要求
要求，即快速直接地输入所有输入元素
后代传入的元素。
-
Martin Honnen
http://JavaScript.FAQTs.com/
这篇关于关于函数的意见（递归遍历DOM树）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
