天道酬勤,学无止境

dom

除怪癖模式外,IE 中的 InnerHTML/outerHTML 不反映复选框状态(InnerHTML/outerHTML in IE doesn't reflect checkbox state except in quirks mode)

问题 我目前正在与 IE JavaScript/DOM 错误作斗争(多么有趣),它真的让我难住了。 有问题的代码将一些复选框复制到表单中,并需要保持其选中状态。 问题是,IE(特别是 IE8,虽然我猜其他人也是如此)不想这样做。 我已经将错误本身缩小到一个非常小的测试用例。 基本上,在页面上没有 DOCTYPE 的情况下,事情可以正常工作,但是当存在 DOCTYPE 时,它们就会被破坏。 我本来期望相反的,但谁知道 IE。 以下是最简单的测试用例。 对于它们中的每一个:在 IE 中打开页面,切换复选框,然后单击“测试”。 不产生错误: <input type="checkbox" id="broken"> <button id="break">TEST</button> <script> document.getElementById('break').onclick = function() { alert(document.getElementById('broken').outerHTML); }; </script> 关联 产生错误: <!DOCTYPE html> <input type="checkbox" id="broken"> <button id="break">TEST</button> <script> document.getElementById(

2021-09-21 17:16:40    分类:技术分享    javascript   jquery   internet-explorer   dom   doctype

如何使用 PHP DOM 从网页中提取关键字(How do I extract keyword from webpage using PHP DOM)

问题 这是我从网页中提取的相同代码... <div class="user-details-narrow"> <div class="profileheadtitle"> <span class=" headline txtBlue size15"> Profession </span> </div> <div class="profileheadcontent-narrow"> <span class="txtGrey size15"> administration </span> </div> </div> 当显示在网页上时,它显示为“专业管理”。 我想做的是提取专业,在这种情况下是“管理”。 然而,这并不像看起来那么简单,因为这段代码针对各种其他问题重复了很多次,例如 <div class="user-details-narrow"> <div class="profileheadtitle"> <span class=" headline txtBlue size15"> Industry </span> </div> <div class="profileheadcontent-narrow"> <span class="txtGrey size15"> banking </span> </div> </div> 关于一个好的解决方案的任何想法? 回答1

2021-09-21 16:51:04    分类:技术分享    php   dom   curl   domdocument

如何使用 PHP DOM 从网页中提取关键字(How do I extract keyword from webpage using PHP DOM)

问题 这是我从网页中提取的相同代码... <div class="user-details-narrow"> <div class="profileheadtitle"> <span class=" headline txtBlue size15"> Profession </span> </div> <div class="profileheadcontent-narrow"> <span class="txtGrey size15"> administration </span> </div> </div> 当显示在网页上时,它显示为“专业管理”。 我想做的是提取专业,在这种情况下是“管理”。 然而,这并不像看起来那么简单,因为这段代码针对各种其他问题重复了很多次,例如 <div class="user-details-narrow"> <div class="profileheadtitle"> <span class=" headline txtBlue size15"> Industry </span> </div> <div class="profileheadcontent-narrow"> <span class="txtGrey size15"> banking </span> </div> </div> 关于一个好的解决方案的任何想法? 回答1

2021-09-21 16:50:00    分类:技术分享    php   dom   curl   domdocument

PHP DOM:更改现有 DOMDocument 的文档类型(PHP DOM: change doctype of existing DOMDocument)

问题 当使用 DOMImplementation::createDocument() 创建 DOMDocument 时,您可以指定一个 doctype 作为构造函数中的第三个参数。 然后这个 doctype 被“绑定”到文档,你可以稍后用$document->doctype检索它。 但是,这是一个只读属性(与编码和版本不同!)。 有没有办法更改现有 DOMDocument 对象的 doctype 属性? 我能想到的唯一解决方法是使用新的文档类型创建一个新的 DOMDocument,然后导入然后复制旧文档中的内容。 回答1 事实证明,在 PHP 中(因此,我猜,在 libxml 中)您可以像使用$document->insertBefore()和$document->removeChild()等方法的常规节点一样向现有文档添加和删除 DOMDocumentType 对象. 似乎工作正常 - 更改它会更改 $document->doctype 值和所有内容。 但是,它完全没有记录,并且与 W3 DOM 标准相矛盾,该标准表示它不应该是可能的(至少在 DOM Level 2 中)。 但知道您可以在 PHP 中做到这一点很方便。 一个缺点是 saveHTML() 不会“看到”新的文档类型,即使 saveXML() 可以。 回答2 即使文档已经填充,似乎也可以再次调用 $document-

2021-09-21 15:38:44    分类:技术分享    php   dom   doctype   domdocument

在 DOM 元素上调用自定义方法(Invoke a custom method on a DOM element)

问题 我想在 DOM 元素上调用自定义方法 像这样 : <div id="MyObject"> <!-- some elements --> </div> <script> function doSomething() { // do something with input DOM element } $("MyObject").doSomething(); </script> 我怎样才能发展这个问题? 是否有必要使用jQuery? 回答1 您不需要使用 jQuery。 您可以使用document.getElementById('MyObject')来获取对 DOM 节点的引用。 要在其上运行doSomething函数,您需要向其添加一个节点参数,如下所示: function doSomething(input) { // do something with input DOM element } doSomething(document.getElementById('MyObject')); 要将它链接起来,您需要添加到所有 DOM 节点实现的Element接口(重读,我的意思是从继承)。 如果你这样做,你可以这样做: Element.prototype.doSomething = function() { alert(this); } document

2021-09-21 15:37:38    分类:技术分享    javascript   jquery   dom   methods   invoke

通过改变底层数组动态更新dom-repeat模板(Dynamic update of dom-repeat templates by changing the underlying array)

问题 是否有 Polymer dom api 方法或其他方法来自动更新具有附加元素的重复模板,底层数组是否应该更新? 我有一个动态数组,它通过 ajax 调用反复更新。 这个数组不断改变它的长度(元素根据 ajax 响应被增量添加或删除)。 该数组通过<template is="dom-repeat">反映在文档中。 有没有办法在底层数组更新时自动更新 dom? 目前,我能看到的唯一方法是 识别增量更新并手动追加或删除节点。 删除整个重复模板容器并重新标记新模板。 我也不知道无论如何要动态标记新模板。 这可能吗? 我能想到的一种方法是使用另一个自定义元素来重复模板标记,每当有数组更新时,删除当前元素,通过将更新的数组传递给元素来附加新元素。 通过使用 2,我将无法在视图中使用列表自动更新的过渡效果。 我希望能够使用这些效果。 回答1 如果您使用this.push('myarray', {item});更新数组this.push('myarray', {item}); 那么这将触发 Polymer 的绑定观察者。 更多信息在 https://www.polymer-project.org/1.0/docs/devguide/properties#array-mutation 的文档中

2021-09-21 12:49:48    分类:技术分享    javascript   dom   polymer   polymer-1.0

检测指令是否已从 DOM 中删除(Detect if directive was removed from DOM)

问题 我有一个 AngularJS 指令,如果指令的元素从 DOM 中删除(从 AngularJS 调用内部或通过任何其他方法,如 jQuery),我需要执行某些操作。 那可能吗? 回答1 在指令中,当一个元素从 DOM 中移除时,会发出 $destroy 事件。 在指令的链接函数中,您可以执行以下操作:- element.on('$destroy', function() { // do stuff }); 有关更多信息和完整示例,请参阅此处的文档 编辑:查看此 plunker 以查看 $destroy 的运行情况。 在这里,我在 2 秒后删除元素,并在控制台中销毁日志记录。 回答2 当您的指令从 DOM 中移除时,会触发$destroy事件。 请参阅此处 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$destroy 在这个问题中(提供范围的 $destroy 事件示例?)我找到了以下示例: ctrl.directive('handleDestroy', function() { return function(scope, tElement, attributes) { scope.$on('$destroy', function() { alert("In destroy of:" + scope.todo

2021-09-21 12:30:04    分类:技术分享    javascript   angularjs   dom   angularjs-directive

如何在YUI3中获得计算的元素宽度和高度?(How to get calculated element width and height in YUI3?)

问题 jQuery 有方便的 .height() 和 .width() 实用程序来计算 DOM 元素的显示大小。 它还有 .position() 来获取坐标。 在 YUI3 节点中,我看到有 .getX()、.getY() 和 .getXY() 实用程序来获取位置,但我没有看到任何大小(或看不到)。 在 YUI3 中获取元素高度和宽度的好方法是什么? 回答1 获取计算样式 .getComputedStyle("width") .getComputedStyle("height")

2021-09-21 02:57:28    分类:技术分享    jquery   dom   yui

NodeList 是如何实现的?(How is the NodeList implemented?)

问题 DOM NodeList(例如由 element.getElementsByTagName 返回)是一个有趣的对象,因为它不是快照,而是反映在您创建 NodeList 之后对文档所做的更改。 我想知道如何实现这样一个集合:完全懒惰的评估肯定会非常慢,但是保持缓存版本的一致性需要在内部进行大量的簿记。 我尝试在 google 上搜索有关该主题的博客文章,并尝试找到 Mozilla 的相关源代码文件,但无法立即找到任何内容(当我无法立即找到某些内容时,我就来到这里......)。 那么 Firefox、Safari、Internet Explorer(以及其他非浏览器 DOM 实现)如何处理 NodeLists? 回答1 对于 .NET 的 XML 库,XmlNodeList 有 3 个具有不同策略的内部子类。 XmlChildNodes 集合,对于 XmlNode.ChildNodes 属性,使用基于对其包含元素的引用的简单惰性求值。 XmlElementList 在 DOM 更改时使用事件侦听器。 第三个,XPathNodelList,用于 XPath 查询(例如,XmlNode.SelectNodes()),并在每次访问 XPath 的索引、读取其 Count 属性或迭代时评估 XPath。

2021-09-20 19:38:03    分类:技术分享    dom   data-structures   nodelist

NodeList 是如何实现的?(How is the NodeList implemented?)

问题 DOM NodeList(例如由 element.getElementsByTagName 返回)是一个有趣的对象,因为它不是快照,而是反映在您创建 NodeList 之后对文档所做的更改。 我想知道如何实现这样一个集合:完全懒惰的评估肯定会非常慢,但是保持缓存版本的一致性需要在内部进行大量的簿记。 我尝试在 google 上搜索有关该主题的博客文章,并尝试找到 Mozilla 的相关源代码文件,但无法立即找到任何内容(当我无法立即找到某些内容时,我就来到这里......)。 那么 Firefox、Safari、Internet Explorer(以及其他非浏览器 DOM 实现)如何处理 NodeLists? 回答1 对于 .NET 的 XML 库,XmlNodeList 有 3 个具有不同策略的内部子类。 XmlChildNodes 集合,对于 XmlNode.ChildNodes 属性,使用基于对其包含元素的引用的简单惰性求值。 XmlElementList 在 DOM 更改时使用事件侦听器。 第三个,XPathNodelList,用于 XPath 查询(例如,XmlNode.SelectNodes()),并在每次访问 XPath 的索引、读取其 Count 属性或迭代时评估 XPath。

2021-09-20 19:36:04    分类:技术分享    dom   data-structures   nodelist