想了解如何使用document.getElementById在iframe中选择元素的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于document.getelementbyid的相关问题，
想了解如何使用document.getElementById在iframe中选择元素的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于document. getelementbyid的相关问题，此外，我们还将为您介绍关于$("#id") 与 document.getElementById ("id") 的区别以及相互转化、angular.element vs document.getElementById或jQuery选择器与spin(忙)控制、document.all与document.getElementById、document.all与getElementById、getElementsByName、getElementsByTagName用法区别的新知识。
本文目录一览：- 如何使用document.getElementById在iframe中选择元素（document. getelementbyid）
- $("#id") 与 document.getElementById ("id") 的区别以及相互转化
- angular.element vs document.getElementById或jQuery选择器与spin(忙)控制
- document.all与document.getElementById
- document.all与getElementById、getElementsByName、getElementsByTagName用法区别
如何使用document.getElementById在iframe中选择元素（document. getelementbyid）
我有iframe这样的
<iframe name="myframe1" id="myframe1" width="100%" height="100%" src="a.html"><html> <head></head> <frameset name="myframe2" cols="0%, 100%" border="0" frameBorder="0" frameSpacing="0"> <frame name="page1" src="c.html" scrolling="no"></frame> <frame name="page2" src="d.html" > <html> <head></head> <body id="top"> <div id="div1"> <div id="div2"> <div id="div3"> <ul id="x"> <li>a</li> <li>b</li> </ul> </div> </div> </div> </body> </html> </frame> </frameset></html></iframe>我想引用元素“ x”。我尝试了几种方法，但找不到解决方案。
答案1
小编典典document.getElementById(‘myframe1’).contentWindow.document.getElementById(‘x’)
contentWindow
所有浏览器（包括较旧版本的IE）都支持该功能。
请注意，如果iframe的src是从另一个域，您将无法访问其内容，由于同源策略。
$("#id") 与 document.getElementById ("id") 的区别以及相互转化
$("#id") 与 document.getElementById ("id") 区别：
1. $("#id") 获取到的是 jQuery 对象，即通过 jQuery 包装 DOM 对象后产生的对象，jQuery 独有；
2. document.getElementById ("id") 获取到的是 DOM 对象；
3. jQuery 无法使用 DOM 对象的任何方法，同理 DOM 对象也不能使用 jQuery 里的方法。
区别如下图：
jQuery 对象转成 DOM 对象：[index] 或者 get (index)
1. jQuery 对象是一个数据对象，可以通过 [index] 的方法，来得到相应的 DOM 对象。 如：
var jq_v = $("#chart"); //jQuery对象
var v = jq_v[0]; //DOM对象
alert(v.checked); //检测这个checkbox是否被选中 2. jQuery 本身提供，通过.get (index) 方法，得到相应的 DOM 对象 。如：
var jq_v = $("#chart"); //jQuery对象
var v = jq_v.get(0); //DOM对象
alert(v.checked); //检测这个checkbox是否被选中 使用：
由于 jQuery 对象本身是一个集合。所以如果 jQuery 对象要转换为 Dom 对象则必须取出其中的某一项，一般可通过索引取出。
如： $("#msg")[0]，$("div").eq (1)[0]，$("div").get ()[1]，$("td")[5]
这些都是 Dom 对象，可以使用 Dom 中的方法，但不能再使用 jQuery 的方法。
以下几种写法都是正确的：
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
DOM 对象转成 jQuery 对象：
只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了，即：$(DOM 对象) 。
如：
var v = document.getElementById("chart"); //DOM对象
var jq_v = $(v); //jQuery对象 转换后，就可以任意使用 jQuery 的方法了。
需要强调注意的是：DOM 对象才能使用 DOM 中的方法，jQuery 对象是不可以用 DOM 中的方法。
angular.element vs document.getElementById或jQuery选择器与spin(忙)控制
我不喜欢显示的解决方案的一个事情是在服务中使用jQuery有效地将旋转控件附加到DOM元素。我更喜欢使用角度构造来访问元素。我也想避免“硬编码”旋转器需要附加到服务内的元素的id，而是使用在服务(单例)中设置id的指令，以便服务的其他用户或服务本身不需要知道。
我正在努力与angular.element给我们什么document.getElementById在同一个元素id给我们。
例如。这工作：
var target = document.getElementById('appBusyIndicator');
这些都不：
var target = angular.element('#appBusyIndicator');
var target = angular.element('appBusyIndicator');
我显然做了一些应该是相当明显的错误！任何人可以帮助？
假设我可以得到上面的工作，我有一个类似的问题，试图替换jQuery访问的元素：
例如$(target).fadeIn(‘fast’);作品
angular.element(‘#appBusyIndicator’)。fadeIn(‘fast’)or angular.element(‘appBusyIndicator’)。fadeIn(‘fast’)does not
有人可以指点一个很好的例子，说明一个Angular“元素”与DOM元素的使用？ Angular显然用自己的属性，方法等“包装”元素，但通常很难得到原始值。例如，如果我有一个< input type ='number'>字段，并且我想访问在用户键入“ – ”(没有引号)时在ui中可见的原始内容我没有什么，可能是因为“type = number”意味着Angular拒绝输入，即使它是可见的在UI中，我想看到它，所以我可以测试它，并清除它下来。
任何指针/答案赞赏。
谢谢。
var myElement = angular.element( document.querySelector( '#some-id' ) );
你将Document.querySelector() native Javascript调用包装到angular.element()调用中。所以你总是获得一个jqLite或jQuery对象中的元素，取决于jQuery是否可用/加载。
Official documentation for angular.element:
If jQuery is available,
angular.elementis an alias for thejQueryfunction. If jQuery is not available,angular.elementdelegates to Angulars built-in subset ofjQuery,that called “jQuery lite” or jqLite.All element references in
Angularare always wrapped with jQuery orjqLite(such as the element argument in a directives compile or link function). They are never rawDOMreferences.
如果你想知道为什么要使用document.querySelector()，请阅读this answer。
document.all与document.getElementById
当你应该使用document.all与document.getElementById？
答案1
小编典典document.all 是W3C标准的专有Microsoft扩展。
getElementById() 是标准的-使用它。
但是，请考虑使用像jQuery这样的js库是否会派上用场。例如，$("#id")相当于的jQuerygetElementById()。另外，您不仅可以使用CSS3选择器。
document.all与getElementById、getElementsByName、getElementsByTagName用法区别
理解这句话可看以下：
例1（这个可以让你理解文档中哪些是对象）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document.All Example</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<h1>Example Heading</h1>
<hr />
<p>This is a <em>paragraph</em>. It is only a <em>paragraph.</em></p>
<p>Yet another <em>paragraph.</em></p>
<p>This final <em>paragraph</em> has <em id="special">special emphasis.</em></p>
<hr />
<script type="text/javascript">
<!--
var i,origLength;
origLength = document.all.length;
document.write('document.all.length='+origLength+"[br /]");
for (i = 0; i < origLength; i++)
{
document.write("document.all["+i+"]="+document.all[i].tagName+"[br /]");
}
//-->
</script>
</body>
</html>输出结果
Example Heading This is a paragraph. It is only a paragraph. Yet another paragraph. This final paragraph has special emphasis. document.all.length=18 document.all[0]=! document.all[1]=HTML document.all[2]=HEAD document.all[3]=TITLE document.all[4]=META document.all[5]=BODY document.all[6]=H1 document.all[7]=HR document.all[8]=P document.all[9]=EM document.all[10]=EM document.all[11]=P document.all[12]=EM document.all[13]=P document.all[14]=EM document.all[15]=EM document.all[16]=HR document.all[17]=SCRIPT
可以通过ID，NAME或INDEX属性访问某个具体的元素
例2（访问一个特定元素）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
<title>单击DIV变色</title>
<style
type="text/css">
<!--
#docid{
height:400px;
width:400px;
background-color:#999;}
-->
</style>
</head>
<body><p id="docid"
name="docname" onClick="bgcolor()"></p>
</body>
</html>
<script language="javascript"
type="text/javascript">
<!--
function bgcolor(){
document.all[7].style.backgroundColor="#000"
}
-->
</script>
上面的这个例子让你了解怎么访问文档中的一个特定元素，比如文档中有一个DIV
<p
id="docid" name="docname"></p>，你可以通过这个DIV的ID，NAME或INDEX属性访问这个DIV：
document.all["docid"]
document.all["docname"]
document.all.item("docid")
document.all.item("docname")
document.all[7]
document.all.tags("p")则返回文档中所有DIV数组，本例中只有一个DIV，所以用document.all.tags("p")[0]就可以访问了。可以用document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等
<script language="JavaScript">
function cardClick(cardID){
var
obj;
for (var i=1;i<7;i++){
obj=document.all("card"+i);
obj.style.backgroundColor="#3A6EA5";
obj.style.color="#FFFFFF";
}
obj=document.all("card"+cardID);
obj.style.backgroundColor="#FFFFFF";
obj.style.color="#3A6EA5";
for (var i=1;i<7;i++){
obj=document.all("content"+i);
obj.style.display="none";
}
obj=document.all("content"+cardID);
obj.style.display="";
}
</script>document.all可以判断浏览器是否是IE
if(document.all){
alert("is IE!");
}
使用document.all注意的地方
代码1:
<input name=aaa value=aaa> <input id=bbb value=bbb> <script language=Jscript> alert(document.all.aaa.value) //根据name取value alert(document.all.bbb.value) //根据id取 value </script>
代码2：
但是常常name可以相同(如:用checkbox取用户的多项爱好的情况)
<input name=aaa value=a1> <input name=aaa value=a2> <input id=bbb value=bbb> <script language=Jscript> alert(document.all.aaa(0).value) //显示a1 alert(document.all.aaa(1).value) //显示a2 alert(document.all.bbb(0).value) //这行代码会失败 </script>
代码3：理论上一个页面中的id是互不相同的，如果出现不同tags有相同的id
document.all.id 就会失败,就象这样： <input id=aaa value=a1> <input id=aaa value=a2> <script language=Jscript> alert(document.all.aaa.value) //显示 undefined 而不是 a1或者a2 </script>
代码4:
对于一个复杂的页面（代码很长，或者id是由程序自动产生),或着一个
javascript初学者写的程序，很有可能出现两个tags有相同id的情况。
为了编程的时候不出错，我推荐这样的写法：
<input id=aaa value=aaa1>
<input id=aaa value=aaa2>
<input name=bbb value=bbb>
<input name=bbb value=bbb2>
<input id=ccc value=ccc>
<input name=ddd value=ddd>
<script language=Jscript>
alert(document.all("aaa",0).value)
alert(document.all("aaa",1).value)
alert(document.all("bbb",0).value)
alert(document.all("bbb",1).value)
alert(document.all("ccc",0).value)
alert(document.all("ddd",0).value)
</script>这样最安全.
以下是我自己的测试：
<html>
<head>
<title>
document.all test
</title>
<script language="javascript">
function view()
{
/*
//通过name两种访问格式
alert(document.all.aaa.value);
alert(document.all["aaa"].value);
//通过id的两种访问格式
alert(document.all.ccc.value);
alert(document.all["ccc"].value);
*/
//当一页中存在两个name相同的input时不能使用上面的访问方法，因为将返回undefine,请使用下面方式访问
alert(document.all.aaa(0).value);
alert(document.all.aaa(1).value);
//安全的写法
alert(document.all("aaa",0).value);
alert(document.all("aaa",1).value);
}
</script>
</head>
<body>
<form name="form1" id="f1">
<input type="text" name="aaa" >
<input type="text" name="aaa" id="ccc">
<input type="button" name="bbb" value="click" onclick="view();">
</form>
</body>
</html>从上面可以看到我们在使用document.all的时候可能会返回一个值或多个值的情况，所以使用之前一定要判断长度，要不然会出现错误。
如下面的问题：两个函数对多个checkbox进行处理，分别执行全部选中和取消全选功能如果按下面使用会出现什么问题呢？
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkall(){
var huang = document.all['huang'];
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}
function centerall(){
var huang = document.all['huang'];
for(i = 0;i < huang.length;i++){
huang[i].checked = false;
}
}
//-->
</SCRIPT>
<BODY>
<input type="checkbox" name="huang" value="OFF">
<input type="checkbox" name="huang" value="OFF">
<input type="checkbox" name="huang" value="OFF">
<br>
<input type="button" value = "checkall" onclick = "checkall();">
<input type="button" value = "centerall" onclick = "centerall();">
</BODY>
</HTML>看上面的代码，当表单中有多个checkbox的时候是没有问题的，但当其中只有一个checkbox的时候就会有问题，即点全选的时候不起作用，因为当其中只有一个checkbox的时候不再用document.all["huang"][0].checked来访问，而是直接用document.all["huang"].checked来访问了
看当只有一个checkbox的时候应改成下面代码
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function
checkall(){
var huang = document.all['huang'];
if(huang.length){
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}else{
huang.checked =
true;
}
}
function centerall(){
if(huang.length){
for(i =
0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = false;
}
}
}else{
huang.checked = false;
}
}
//-->
</SCRIPT>
<BODY>
<input
type="checkbox" name="huang" value="OFF">
[br]
<input
type="button" value = "checkall" onclick = "checkall();">
<input
type="button" value = "centerall" onclick = "centerall();">
</BODY>
</HTML>或者使用另一种形式，使用getElementsByTagName，如下：
<HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function
checkall()
{
var huang = document.getElementsByTagName("input");
for(i = 0;i < huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = true;
}
}
}
function centerall()
{
var huang = document.getElementsByTagName("input");
for(i = 0;i
< huang.length;i++){
if(huang[i].type == "checkbox")
{
huang[i].checked = false;
}
}
}
//-->
</SCRIPT>
<BODY>
<input type="checkbox" name="huang" value="OFF">
[br]
<input type="button" value = "checkall" onclick =
"checkall();">
<input type="button" value = "centerall" onclick =
"centerall();">
</BODY>
</HTML>今天关于如何使用document.getElementById在iframe中选择元素和document. getelementbyid的分享就到这里，希望大家有所收获，若想了解更多关于$("#id") 与 document.getElementById ("id") 的区别以及相互转化、angular.element vs document.getElementById或jQuery选择器与spin(忙)控制、document.all与document.getElementById、document.all与getElementById、getElementsByName、getElementsByTagName用法区别等相关知识，可以在本站进行查询。
本文标签：
