GVKun编程网logo

PHP HTML DomDocument getElementById问题（php simple html dom）

10

本文将分享PHPHTMLDomDocumentgetElementById问题的详细内容，并且还将对phpsimplehtmldom进行详尽解释，此外，我们还将为大家带来关于$("#id")与docu

本文将分享PHP HTML DomDocument getElementById问题的详细内容，并且还将对php simple html dom进行详尽解释，此外，我们还将为大家带来关于$("#id") 与 document.getElementById ("id") 的区别以及相互转化、document.all与document.getElementById、document.all与getElementById、getElementsByName、getElementsByTagName用法区别、document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧的相关知识，希望对你有所帮助。

本文目录一览：

PHP HTML DomDocument getElementById问题（php simple html dom）

PHP HTML DomDocument getElementById问题（php simple html dom）

这里的PHP解析有点新，但是我似乎无法让PHP的DomDocument返回显然是可识别的节点。加载的HTML将来自“
.net”，因此不一定能保证XML的合规性，但我尝试以下操作：

<?phpheader("Content-Type: text/plain");$html = ''<html><body>Hello <b id="bid">World</b>.</body></html>'';$dom = new DomDocument;$dom->preserveWhiteSpace = false;$dom->validateOnParse = true;/*** load the html into the object ***/$dom->loadHTML($html);var_dump($dom);$belement = $dom->getElementById("bid");var_dump($belement);?>

尽管我没有收到任何错误，但我仅收到以下内容作为输出：

object(DOMDocument)#1 (0) {}NULL

我应该无法查找<b>标签，因为它确实具有ID吗？

答案1

小编典典

该手册解释了为什么：

为了使此功能起作用，您将需要使用DOMElement->setIdAttribute（）设置一些ID属性，或者将DTD定义为ID类型的属性。在后一种情况下，在使用此功能之前，您需要使用DOMDocument->validate（）或DOMDocument-> validateOnParse来验证文档。

一定要使用有效的HTML并提供DTD。

快速修复：

  1. 致电$dom->validate();并忍受错误（或修复错误），之后您可以使用$dom->getElementById()，无论出于何种原因出现错误。
  2. 如果您不想验证，请使用XPath： $x = new DOMXPath($dom); $el = $x->query("//*[@id=''bid'']")->item(0);
  3. 想一想：如果 在* 加载HTML 之前 只是将其设置validateOnParse为true ，那么也可以使用; P *

。

$dom = new DOMDocument();$html =''<html><body>Hello <b id="bid">World</b>.</body></html>'';$dom->validateOnParse = true; //<!-- this first$dom->loadHTML($html);        //''cause ''load'' == ''parse$dom->preserveWhiteSpace = false;$belement = $dom->getElementById("bid");echo $belement->nodeValue;

在此处输出“世界”。

$(

$("#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 中的方法。 

document.all与document.getElementById

document.all与document.getElementById

当你应该使用document.all与document.getElementById？

document.all与getElementById、getElementsByName、getElementsByTagName用法区别

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(&#39;document.all.length=&#39;+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[&#39;huang&#39;]; 
for(i = 0;i < huang.length;i++){ 
if(huang[i].type == "checkbox") 
{ 
huang[i].checked = true; 
} 
} 
} 
function centerall(){ 
var huang = document.all[&#39;huang&#39;]; 
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[&#39;huang&#39;]; 
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.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧

document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧

不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
不过要注意的是使用getElementById时对不同的浏览器执行的结果可能是不同的，以下有相关说明

复制代码 代码如下:

text1：



text2：





我在IE中测试了上面的代码，在第一个文本框中输入1，在第二个文本框中输入2，然后点下面的两个按钮，猜一下结果是什么？
我本意是按钮1返回第一个文本框的值，按钮2返回个文本框的值。
结果是两个按钮都返回了第一个文本框的值。
说明ie执行document.getElementById(elementName)的时候，返回的是第一个name或者id等于elementName的对象，并不是按照ID来查找的。
在fireFox中不存在这样的问题，fireFox执行document.getElementById(elementName)的时候只查找id等于elementName的对象，如果不存在则返回null。
可能IE是考虑的兼容性的问题才这么做的。

以下是我测试所用的代码：

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这个时候我在两个text中输入的值分别为：eee, www
IE中测试结果为：eee , eee
再看当我把中的id去除时，也即上面代码使用注释中的内容时
我同样输入eee, www
IE中测试结果为：www ,eee
仔细分析上面两个测试的结果：得出结论是：每执行getElementById一次，会将web页面中的所有表单按顺序遍历一次，同时查找id,name两个值，如果存在所要找的id则不再继续查找，如果没有相应的id与之对应则看name值是否与之对应,如果有相应的name与之对应,则不再继续查找。也就是说：
ie执行document.getElementById(elementName)的时候，返回的是第一个name或者id等于elementName的对象，并不是仅按照ID来查找的。
而同样的两个测试在firefox下第一个结果为eee,www,而第二个结果因为没有找到id="ccc"所以返回null
对于这个结果还可参见
http://www.jb51.net/article/16852.htm
他还对getElementById与getElementByName进行了分析，值得一看。

今天的关于PHP HTML DomDocument getElementById问题和php simple html dom的分享已经结束，谢谢您的关注，如果想了解更多关于$("#id") 与 document.getElementById ("id") 的区别以及相互转化、document.all与document.getElementById、document.all与getElementById、getElementsByName、getElementsByTagName用法区别、document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById_javascript技巧的相关知识，请在本站进行查询。

本文标签：

上一篇Codeforces Round #434 (Div. 2, )-字典树&好题&板子-Polycarp's phone book（字典树详解）

下一篇线程“ main”中的异常java.lang.NoSuchMethodError：org.slf4j.impl.StaticLoggerBinder.getSingleton（）Lorg / slf4j / impl / StaticLoggerBinder

相关文章