js怎么取得DOM里的元素,DOM如下

Question

<div id='chat_1'>
  <div id='chat' style='border:1px solid grey;padding:1px;width:300px;height:400px;overflow-y:scroll;'></div>
  <form>
    <div style='border:1px solid #f7f7f7;'>
      <textarea id='message' style='width:220px;height:50px;vertical-align:bottom;'/></textarea>
      <input type='button' value='发送' style='width:60px;height:60px;' onClick='sendMessage()'/>
    </div>
    <input type='text' id='to' value='1' size='20' />
    <input type='button' value='获取' onClick='getMessage()'/>
    <input type='button' value='关闭' onClick='clearInterval(timer1);'/>
  </form>
</div>
<div id='chat_2'>
  <div id='chat' style='border:1px solid grey;padding:1px;width:300px;height:400px;overflow-y:scroll;'></div>
  <form>
    <div style='border:1px solid #f7f7f7;'>
      <textarea id='message' style='width:220px;height:50px;vertical-align:bottom;'/></textarea>
      <input type='button' value='发送' style='width:60px;height:60px;' onClick='sendMessage()'/>
    </div>
    <input type='text' id='to' value='1' size='20' />
    <input type='button' value='获取' onClick='getMessage()'/>
    <input type='button' value='关闭' onClick='clearInterval(timer1);'/>
  </form>
</div>
<div id='chat_3'>  
  <div id='chat' style='border:1px solid grey;padding:1px;width:300px;height:400px;overflow-y:scroll;'></div>
  <form>
    <div style='border:1px solid #f7f7f7;'>
      <textarea id='message' style='width:220px;height:50px;vertical-align:bottom;'/></textarea>
      <input type='button' value='发送' style='width:60px;height:60px;' onClick='sendMessage()'/>
    </div>
    <input type='text' id='to' value='1' size='20' />
    <input type='button' value='获取' onClick='getMessage()'/>
    <input type='button' value='关闭' onClick='clearInterval(timer1);'/>
  </form>
</div>
<div id='chat_4'>  
  <div id='chat' style='border:1px solid grey;padding:1px;width:300px;height:400px;overflow-y:scroll;'></div>
  <form>
    <div style='border:1px solid #f7f7f7;'>
      <textarea id='message' style='width:220px;height:50px;vertical-align:bottom;'/></textarea>
      <input type='button' value='发送' style='width:60px;height:60px;' onClick='sendMessage()'/>
    </div>
    <input type='text' id='to' value='1' size='20' />
    <input type='button' value='获取' onClick='getMessage()'/>
    <input type='button' value='关闭' onClick='clearInterval(timer1);'/>
  </form>
</div>如上所示,4个div中都是同样的内容.
问:怎么样取得<div id=chat_3>中的<input type='text' id='to' value='1' size='20' />的value值?
问:怎么把把<div id=chat_3>中的<div id='chat'>的innerHTML设为某个值.
如果你有别的好方法,也可以改动DOM.
我其实想做个聊天室,一个人可以同时打开多个窗口聊天,每个聊天窗口div有自己的id属性

Answer 1

问:怎么样取得<div id=chat_3>中的<input type='text' id='to' value='1' size='20' />的value值?
答：
1：按你现在的DOM：document.getElementById("chat_3").getElementsByTagName("input")[1].value
2：优化：我看你div的命名规则chat_1~chat_4这应该是动态生成的，那么：页面中不要存在相同ID的元素，所以，你那个统一命名id="to"的文本框，也按div的命名规则：to_1~to4；然后使用document.getElementById("to_3").value即可获取它的值问:怎么把把<div id=chat_3>中的<div id='chat'>的innerHTML设为某个值.
答：
1：按你现在的DOM：document.getElementById("chat_3").getElementsByTagName("div")[0].innerHTML='我是chat_3中的id=chat的div'
2：优化：和上面一样，命名规则需要进行处理。可以考虑将你现在统一id=chat的这个div的ID命名规则变更为：chat1~chat4；然后使用document.getElementById("chat3").innerHTML='我是chat_3中的id=chat3的div'

Answer 2

也就是说最好是把DOM改下,统一改成id的方式获取喽?

Answer 3

是的。比如将id=to改成：id=to1~to4,将id=chat改成：id=chat1~chat4。就是和上面的chat_1~chat_4进行同步这样，即符合规范，又可以简化DOM的查找当然，你目前的DOM不更改，按我上面的写法，也可以操作的。只是一来不符合规范，二来也使得DOM查找变得复杂了。所以。建议你更改元素的命名规则

Answer 4

function sendMessage(){
var ob=document.getElementById("chat_3");
var oc=ob.childNodes;
  for(var i=0;i<oc.length;i++){
    if(oc[i].tagName="form"){

             var b=oc[i].getElementsByTagName("input")[1];
var od=b.nodeValue;
 
}
  }

}
哪错了

Answer 5

错误肯定是有的
1：if(oc[i].tagName && oc[i].tagName=="FORM"){
你是要判断属性值，应该是使用"=="，你直接=号变成给属性赋值了，操作不了2：
var b=oc[i].getElementsByTagName("input")[1];
var od=b.nodeValue;//这里是取value，不是nodeValue
改成
var b=oc[i].getElementsByTagName("input")[1].value;

Answer 6

function sendMessage(){
var ob=document.getElementById("chat_3");
var oc=ob.childNodes;
  for(var i=0;i<oc.length;i++){
    if(oc[i].tagName && oc[i].tagName=="form"){
             var b=oc[i].getElementsByTagName("input")[1].value;

 alert(b);
}
  }

}
还是无法获取value

Answer 7

你应该是执行：sendMessage()顺序出了问题
<script>
function sendMessage(){
……
}
sendMessage();//这样的顺序，执行的时候会找不到对象。你要么将script整个的移到div的下方去。要么改成
window.onload=sendMessage;//如果页面中已经存在window.onload事件，那就将sendMessage()加进去
</script>
<div id='chat_3'>
  <div id='chat' style='border:1px solid grey;padding:1px;width:300px;height:400px;overflow-y:scroll;'></div>
  <form>
  <div style='border:1px solid #f7f7f7;'>
  <textarea id='message' style='width:220px;height:50px;vertical-align:bottom;'/></textarea>
  <input type='button' value='发送' style='width:60px;height:60px;' onClick='sendMessage()'/>
  </div>
  <input type='text' id='to' value='1' size='20' />
  <input type='button' value='获取' onClick='getMessage()'/>
  <input type='button' value='关闭' onClick='clearInterval(timer1);'/>
  </form>
</div>

Answer 8

而且
if(oc[i].tagName && oc[i].tagName=="FORM"){
这里面的="FORM"是大写，你别又马虎的改成小写呀

Answer 9

PS:你那么做除了让你练习了一下for循环和childNodes以外，没有多大意义明明可以一行就写出来的东西，你就不要纠结着写那么多嘛