关于javascript：2种类型的textarea值

2 types of textarea values

本问题已经有最佳答案，请猛点这里访问。

html </wyn>元素同时包含2个"值"字段；在查看元素的html源代码时，只能看到其中一个字段。(如下面的示例所示)。</P><P>有人能解释为什么会这样吗？这里存储的"type2"值在哪里？</P><P>理论：HTML中的属性和属性有什么区别？</P><P></p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br />2<br />3<br />4<br />5<br />6<br />7<br /></div></td><td><div class="javascript codecolorer"><span class="kw1">var</span> dummy <span class="sy0">=</span> document.<span class="me1">createElement</span><span class="br0">(</span><span class="st0">"textarea"</span><span class="br0">)</span><span class="sy0">;</span><br /> document.<span class="me1">body</span>.<span class="me1">appendChild</span><span class="br0">(</span>dummy<span class="br0">)</span><span class="sy0">;</span><br /> dummy.<span class="me1">setAttribute</span><span class="br0">(</span><span class="st0">'value'</span><span class="sy0">,</span><span class="st0">"Type1"</span><span class="br0">)</span><span class="sy0">;</span><br /> dummy.<span class="me1">value</span> <span class="sy0">=</span><span class="st0">"Type2"</span><span class="sy0">;</span><br /> <br /> console.<span class="me1">log</span><span class="br0">(</span><span class="st0">"attributeValue is"</span> <span class="sy0">+</span> dummy.<span class="me1">getAttribute</span><span class="br0">(</span><span class="st0">'value'</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span><br /> console.<span class="me1">log</span><span class="br0">(</span><span class="st0">".value is"</span> <span class="sy0">+</span> dummy.<span class="me1">value</span><span class="br0">)</span><span class="sy0">;</span></div></td></tr></tbody></table></div> <p></P></p> <div class="suo-content"><div style="text-align: right;"> <div class="xControl"><i class="fa fa-caret-right"></i> <span class="xTitle"></span> <a href="javascript:void(0)" class="collapseButton xButton">相关讨论</a> <div style="clear: both;"></div> </div> <div class="xContent" style="display: none;"></p> <ul> <li>它存储在dom元素的<wyn>value</wyn>属性中</li> <li>文本区域没有/需要值属性。不过，您仍然可以添加它</li> </ul> <p></div> </div></p></div> <hr><P>您的<wyn>setAttribute()</wyn>调用将<wyn>value</wyn>属性应用于dom中的<wyn>textarea</wyn>元素。这在技术上是不正确的，因为<wyn>textarea</wyn>元素没有<wyn>value</wyn>属性。</P><P>然后设置元素的<wyn>value</wyn>属性。这是正确的用法，也是设置元素中可见文本的方法。</P><P>这个逻辑的结果是这个HTML：</P></p> <div class="codecolorer-container javascript dawn" style="overflow:auto;white-space:nowrap;width:100%;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br /></div></td><td><div class="javascript codecolorer"><span class="sy0"><</span>textarea value<span class="sy0">=</span><span class="st0">"Type1"</span><span class="sy0">></span>Type2<span class="sy0"></</span>textarea<span class="sy0">></span></div></td></tr></tbody></table></div> <p><P>使用<wyn>getAttribute()</wyn>时，从返回<wyn>Type1</wyn>的元素中读取(非标准)<wyn>value</wyn>属性。</P><P>当您读取<wyn>value</wyn>属性时，您正在(正确地)读取字段的用户可编辑内容中包含的值，该内容返回<wyn>Type2</wyn>。</P><P>简而言之，您的困惑是因为您使用了名为<wyn>value</wyn>的属性和名为<wyn>value</wyn>的属性，并且它们在应用于<wyn>textarea</wyn>时并不相同。</P></p> <hr></div> <p><center> <script src="/c1.js"></script></center></p> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/6003819/" target="_blank">关于javascript：HTML中的properties and attributes有什么区别？</a></li> <li><a href="/70579/" target="_blank">HTML中id属性的有效值是什么？</a></li> <li><a href="/134845/" target="_blank">关于html:javascript链接应该使用哪个"href"值 “#” or “javascript:void(0)”?</a></li> <li><a href="/469059/" target="_blank">关于html：＆lt; button＆gt;</a></li> <li><a href="/894860/" target="_blank">为javascript函数设置默认参数值</a></li> <li><a href="/901115/" target="_blank">关于url：如何在javascript中获取查询字符串值？</a></li> <li><a href="/1129216/" target="_blank">关于javascript：按字符串属性值对对象数组排序</a></li> <li><a href="/5235142/" target="_blank">关于html：如何禁用textarea的可调整大小的属性？</a></li> <li><a href="/7486085/" target="_blank">关于javascript：按值复制数组</a></li> </ul> </div> </div> <script src="/ce.js"></script> <div class="clear"></div> <div class="social-main"> <div class="clear"></div> </div> <div class="clear"></div> </div> </article> <div class="ad-pc ad-site"> </div> </main> </div> <div id="sidebar" class="widget-area"> <div class="sidebar-roll"></div> <aside id="text-3" class="widget widget_text"> <div class="textwidget"><p><script src="/ce.js"></script></p> </div> <div class="clear"></div></aside> <div class="sidebar-roll"> <aside id="text-2" class="widget widget_text"> <div class="textwidget"><p><script src="/auto.js"></script></p> </div> <div class="clear"></div></aside> </div> </div> </div> <div class="clear"></div> </div> <div id="footer" alog-group="log-footer"> <div class="foot"> <div class="ps"> <div class="p p2"> <div class="clear"></div> <div class="site-info"> Copyright © 码农家园联系：ddyu2x@gmail.com </div> </div> </div> </div> </div> <div class="tools"> <a class="tools_top" title="返回顶部"></a> </div> <script type="text/javascript" src="https://www.codenong.com/wp-content/themes/Nana/js/superfish.js"></script> <script type='text/javascript' src='https://www.codenong.com/wp-includes/js/wp-embed.min.js?ver=4.9.15'></script> </body></html>