javascript Dom 问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript Dom 问题相关的知识，希望对你有一定的参考价值。

各位大侠帮我看看下面的代码：
var obj= document.getElementById("mainMenu").getElementsByTagName("li");
for( var i=0; i<obj.length;i++)

if(obj[i].childNodes.length>0)

obj[i].onmousemove=showmanu;
obj[i].onmouseout=hiddemanu;



function showmanu()


var ul= this.getElementsByTagName("ul")[0];
ul.style.display="block";
this.style.zIndex="100";
this.style.backgroundColor="#fff";


function hiddemanu()

var ul=this.getElementsByTagName("ul")[0];
ul.style.display="none";
this.style.zIndex="";
this.style.backgroundColor="";

错误：ul is undefined ，但是代码效果还是能正常显示，可就是会报这个错误。望各位大侠帮帮忙？跪谢！！！！
谢谢各位的回答：可能是我没有说清楚，我是在li标签中加入ul标签来创造子菜单，但并不是所有的li标签都有子菜单，所以我的要用this.getElementsByTagName("ul")[0]来判断li标签中是否有子菜单，即ul标签（我的子菜单是放在ul标签中的），所有说我的语法是没错的，并非一楼那位兄弟说的那样。除了报两错之外，效果还照样出来。我就不知道为什么了，望高手指点一二！！！！！

if(obj[i].childNodes.length>0)
这里应该是判断是否在li里有ul，因为之后把showmenu和hidemenu作为元素的事件侦听器
但是这样写了即使条件是true，也不能肯定li里一定有ul的，文本节点也是li的子节点
应该改成下面这样才能更好的判断。
if(obj[i].getElementsByTagName('url').length>0)
但是这个表达式依然不完美，因为getElementsByTagName查找的是后代元素，而不是子元素
最完美的方案：
先定义一个函数
function hasChild(elem,tagname)
for (var i=0,l=elem.childNodes.length;i<l;i++)
if (elem.childNodes[i].nodeName.toLowerCase()==tagname.toLowerCase())
return true;


return false;

然后改条件
if(hasChild(obj[i],'ul'))
这个函数不仅能通过标签名检查是否含有元素，也能用"#comment"检查是否含有注释，"#text"检查是否含有文本 参考技术A 你是在关键字 this上使用出错了的，
当你在第一个循环中取得各个 li 对象，并且给它们加上两个事件showmanu，hiddemanu；
注意了:此时这两个事件中的this表示的 li 对象，所以你用this.getElementsByTagName("ul")[0]是永远取不到 ul 对象的。
这样取ul对象：document.getElementsByTagName("ul")[0];
----------------------------------------------------------
呵呵 那这样更简单了的，你只需要在判断li 中的ul是否存在，即可：函数showmanu()改为
function showmanu()
var ul= this.getElementsByTagName("ul")[0];
if(ul!=null)
ul.style.display="block";
this.style.zIndex="100";
this.style.backgroundColor="#fff";


函数hiddemanu()也如上面这样修改就不会报错了。

加载所有javascript后如何输出DOM？

【中文标题】加载所有javascript后如何输出DOM？【英文标题】：How to output DOM after all javascript loaded? 【发布时间】：2012-05-31 14:17:07 【问题描述】：

作为标题，我的问题是如何输出页面上的所有 DOM 内容（比如说在服务器计算机上保存为文本文件或将结果传递给其他一些 php 函数）？

我做了一些功课，我试过 curl 可以使用 "curl http://google.ca > dom.txt" 输出所有 DOM 内容 但是，这种方法不会保存 Javascript 生成的内容，也就是说，javascript 代码不会运行。 另一种方法是在页面中嵌入一些javascript代码，让页面加载我们要输出的网站，然后在加载完所有内容后使用javascript代码保存所有DOM文件。

我不确定phantom.js是否可以做这样的工作，如果可以，那怎么做？

任何机构都可以就如何实现这一目标给出详细的答案？

我对任何解决方案持开放态度，该程序将在我的服务器上运行以提供服务。

提前谢谢你。

【问题讨论】：

你为什么不认为phantom.js可以？我认为这正是它的用途。 @iambriansreed：是的，但你真的认为“jQuery”能够胜任这项任务吗？ @Explosion Pills：我只在命令行中尝试了 phantom 来导出 har 文件。你能给我一些详细的指导来实现这一点吗？非常感谢！ 【参考方案1】：

您可以使用document.documentElement.innerHTML 获取 HTML 元素的内容（包括头部和主体）。如果您需要所有内容，可以将document.doctype 与document.documentElement.outerHTML 连接起来。

请注意，outerHTML 不是跨浏览器（它适用于 IE 和 Chrome，但不适用于 Firefox） - 有关为 Firefox 模拟 outerHTML 的方法，请参阅此问题：How do I do OuterHTML in firefox?

【讨论】：

感谢您的回答。那么如何输出这个内部的 javascript 对象呢？ 可能只是使用 jQuery 帖子，就像 iambriansreed 建议的那样。我的回答是替换 $("html").html() - 特别是如果您需要 doctype 和 &lt;html&gt; 标签。 我对 phantom.js 不熟悉，但是在搜索了它的文档之后，您也许可以通过 WebPage.content 属性完成同样的事情。【参考方案2】：

为什么不：

jQuery(document).ready(function($) 
    $.post(
        '/your_filename.php',
        'html='+$("html").html(),
        function(response)
            alert(response);
        
    );
);

【讨论】：

酷，刚刚测试过。如果我们不使用 phantom.js，这将是一个很好的解决方案。【参考方案3】：

Javascript 是一种客户端语言，因此在服务器上运行它需要专门的技术。 PHP 实际上有能力处理 DOM 的东西，因为它可以在传输到客户端之前构建和修改 dom 元素，阅读更多关于 here.

我不确定您这样做是为了完成什么，但听起来您太努力了：您正在向客户端发送代码，以便客户端可以转身并将代码发送回服务器以便服务器可以将其保存为文件？虽然如果这是您需要做的，请按照 Brilliand 和 iambriansreed 的建议使用 Javascript/jQuery 收集 dom 元素。

【讨论】：

感谢您的回答。一切实际上都是在服务器上完成的，甚至向“客户端”发送代码，这个客户端可能只是一个浏览器，在 X 会话中运行代码。 （phantom.js 被设计用于“无头”或“在服务器上”运行） @pst 我知道在服务器上运行 javascript 是可能的（通过阅读一个名为“Dart”的编程语言项目 --dartlang.org），但从来没有真正看到使用它的意义，因为那里已经有不少强大的服务器端语言了，所以我从来没有真正研究过。

以上是关于javascript Dom 问题的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript中DOM操作元素及节点操作

DOM

jquery操作DOM

Dom与Bom

JavaScript基础-DAY1

初学react