• 关于

    DOM创建节点

    的搜索结果

问题

DOM 操作——怎样添加、移除、移动、复制、创建和查找节点?

剑曼红尘 2020-04-04 10:32:07 1 浏览量 回答数 1

问题

前端面试经典题目合集-DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

小柯卡力多 2019-12-01 22:04:43 6 浏览量 回答数 1

回答

认真看了一遍题目。。。才发现我理解错了,你说的生html结果。html默认会生成、、这三个标签,如果要在三个标签内加元素,就可以像下面那样操作var fragment = document.createDocumentFragment();//创建dom内容文段(不知道术语是不是这样的。。。) var div= document.createElement("div");//创建div节点 var p = document.createElement("p");//创建p节点 div.className = "xc";//添加类名,其它属性同理 p.innerText = "innerText"; div.appendChild(p);//将p放进div里面,变成子元素 fragment.appendChild(div);//div加入dom内容文段 document.body.appendChild(fragment);//显示到boy中

爵霸 2019-12-02 02:52:38 0 浏览量 回答数 0

万券齐发助力企业上云,爆款产品低至2.2折起!

限量神券最高减1000,抢完即止!云服务器ECS新用户首购低至0.95折!

回答

1)创建新节点 createDocumentFragment() //创建一个 DOM 片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 2)添加、移除、替换、插入 appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 3)查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的 Name 属性的值 getElementById() //通过元素 Id,唯一性

茶什i 2019-12-02 03:18:13 0 浏览量 回答数 0

回答

DOM解析器将整个XML加载到内存中,以创建基于树的DOM模型。这有助于它快速定位节点并更改 XML 结构。SAX 解析器是基于事件的解析器,不会将整个 XML 加载到内存中。 因此,DOM 比 SAX 更快,但它需要更多的内存,并且不适合解析大型 XML 文件。

YDYK 2020-04-26 15:11:46 0 浏览量 回答数 0

问题

JavaScript DOM 的 createElement( "div" ) 在 jQuery 用哪个命令?

a123456678 2019-12-01 20:15:11 904 浏览量 回答数 1

回答

document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。

小旋风柴进 2019-12-02 02:10:26 0 浏览量 回答数 0

回答

varimgnew=document.getElementById("img1"); 这个地方不对,img还没有被添加到dom里面,是get不到的 回复 @小鱼吹泡泡:需要用代码放入dom,例如jq的insert和append之类的函数怎么才能得到呢,应该把这个获取对象的语句放在哪个位置?     varimg=newImage();//创建一个image对象    img.src="path.png";//指定img的src属性    img.id="id";//指定img的id    //以上三步创建了一个Image对象,但此对象并没有放到dom结构里    //它是独立存在的    window.onload=function(){        //将创建的Image对象添加到html的dom树里        document.body.appendChild(img);        //document.getElementById是从dom结构中查找指定id的节点        //但如果对象没有放置到dom树,显然是查找不到的        varmyImg=document.getElementById("id");        //如果上一步查找指定的id对象,而该对象不在dom结构里,则myImg为null        //下一步的alert中,由于myImg为null,对null采取属性获取,会报错        //但由于第一步已经将img放到了dom里,现在不会错了        alert(myImg.src);    }谢谢哈! 用代码来创建newimage好复杂啊!可不可以有第三方插件什么的来帮助 createnewimage ?跪求好的建议!谢谢!

爱吃鱼的程序员 2020-06-22 22:52:49 0 浏览量 回答数 0

回答

通过不创建额外的DOM节点,片段会更快一些,并占用更少的内存。这仅对非常大和较深的树有真正的好处。 一些CSS机制(例如Flexbox和CSS Grid)具有特殊的父子关系,并且在中间添加div使得难以保持所需的布局。 DOM Inspector不太混乱。

你的答案 2020-05-07 17:17:06 0 浏览量 回答数 0

问题

如何给多个节点添加父节点?

杨冬芳 2019-12-01 20:06:53 1034 浏览量 回答数 1

问题

js里大量的DOM操作,性能会大量损失吗?

小旋风柴进 2019-12-01 19:38:05 833 浏览量 回答数 1

回答

浏览器渲染机制 浏览器采用流式布局模型(Flow Based Layout)浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(Render Tree)。有了RenderTree,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。由于浏览器使用流式布局,对Render Tree的计算通常只需要遍历一次就可以完成,但table及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用table布局的原因之一。 重绘 由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的,称为重绘,例如outline, visibility, color、background-color等,重绘的代价是高昂的,因为浏览器必须验证DOM树上其他节点元素的可见性。 回流 回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素,因为其变化涉及到部分页面(或是整个页面)的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。 <body> <div class="error"> <h4>我的组件</h4> <p><strong>错误:</strong>错误的描述…</p> <h5>错误纠正</h5> <ol> <li>第一步</li> <li>第二步</li> </ol> </div> </body> 在上面的HTML片段中,对该段落(p标签)回流将会引发强烈的回流,因为它是一个子节点。这也导致了祖先的回流(div.error和body – 视浏览器而定)。此外,h5和ol也会有简单的回流,因为其在DOM中在回流元素之后。大部分的回流将导致页面的重新渲染。 回流必定会发生重绘,重绘不一定会引发回流。 浏览器优化 现代浏览器大多都是通过队列机制来批量更新布局,浏览器会把修改操作放在队列中,至少一个浏览器刷新(即16.6ms)才会清空队列,但当你获取布局信息的时候,队列中可能有会影响这些属性或方法返回值的操作,即使没有,浏览器也会强制清空队列,触发回流与重绘来确保返回正确的值。 主要包括以下属性或方法: - offsetTop、offsetLeft、offsetWidth、offsetHeight - scrollTop、scrollLeft、scrollWidth、scrollHeight - clientTop、clientLeft、clientWidth、clientHeight - width、height - getComputedStyle() - getBoundingClientRect() 所以,我们应该避免频繁的使用上述的属性,他们都会强制渲染刷新队列。 减少重绘与回流 CSS 使用 transform 替代 top使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局)避免使用table布局,可能很小的一个小改动会造成整个 table 的重新布局。尽可能在DOM树的最末端改变class,回流是不可避免的,但可以减少其影响。尽可能在DOM树的最末端改变class,可以限制了回流的范围,使其影响尽可能少的节点。 避免设置多层内联样式,CSS 选择符从右往左匹配查找,避免节点层级过多。 <div> <a> <span></span> </a> 对于第一种设置样式的方式来说,浏览器只需要找到页面中所有的 span 标签然后设置颜色,但是对于第二种设置样式的方式来说,浏览器首先需要找到所有的 span 标签,然后找到 span 标签上的 a 标签,最后再去找到 div 标签,然后给符合这种条件的 span 标签设置颜色,这样的递归过程就很复杂。所以我们应该尽可能的避免写过于具体的 CSS 选择器,然后对于 HTML 来说也尽量少的添加无意义标签,保证层级扁平。 - 将动画效果应用到position属性为absolute或fixed的元素上,避免影响其他元素的布局,这样只是一个重绘,而不是回流,同时,控制动画速度可以选择 requestAnimationFrame,详见探讨 requestAnimationFrame。 - 避免使用CSS表达式,可能会引发回流。 - 将频繁重绘或者回流的节点设置为图层,图层能够阻止该节点的渲染行为影响别的节点,例如will-change、video、iframe等标签,浏览器会自动将该节点变为图层。 - CSS3 硬件加速(GPU加速),使用css3硬件加速,可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性,比如background-color这些,还是会引起回流重绘的,不过它还是可以提升这些动画的性能。 2. Javascript - 避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性。 - 避免频繁操作DOM,创建一个documentFragment,在它上面应用所有DOM操作,最后再把它添加到文档中。 - 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。 - 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。

九旬 2020-05-24 11:22:47 0 浏览量 回答数 0

回答

php对xml文件中节点的删除编辑 使用getElementsByTagName_r()方法删除编辑XML节点三个文件: 1.root.xml 2.remove.php —— 删除节点 3.replace.php —— 替换节点 root.xml <root> <child1>child1 content</child1> <child2>child2 content</child2> <child3>child3 content</child3> </root> remove.php <?php $xml_str = file_get_contents("root.xml"); //将root.xml文件中的内容读入一个字符串 $doc = DOMDocument::loadXML($xml_str); //载入这个字符串 //取得元素$child2 $root = $doc->documentElement; $child2 = $root->getElementsByTagName_r("child2")->item(0); //删除$child2对象 $root->removeChild($child2); //保存文件 $doc->formatOutput = true; $doc->saveXML(); $doc->save("root.xml"); ?> replace.php <?php $xml_str = file_get_contents("root.xml"); //将root.xml文件中的内容读入一个字符串 $doc = DOMDocument::loadXML($xml_str); //载入这个字符串 //取得元素$child3 $root = $doc->documentElement; $child3 = $root->getElementsByTagName_r("child3")->item(0); //创建一个newchild元素来替代child3 $root->replaceChild(new DOMElement("newchild", "new content"), $child3); //保存文件 $doc->formatOutput = true; $doc->saveXML(); $doc->save("root.xml"); ?> 使用使用XPath删除\修改节点 1.xml.xml 2.re.php —— 替换\删除节点 3.replace.xml —— 替换节点后的XML文件 4.remove.xml —— 删除节点后的XML文件 xml.xml <?xml version="1.0"?> <books> <book> <author>Jack Herrington</author> <title>PHP Hacks</title> <publisher>O'Reilly</publisher> </book> <book> <author>Jack Herrington</author> <title>Podcasting Hacks</title> <publisher>O'Reilly</publisher> </book> </books> re.php <?php $dom = new DomDocument(); $dom ->load("xml.xml"); $xpath = new domxpath($dom); //修改节点 $oldtitle = $xpath->query("/books/book/title")->item(0); $newtitle = $dom->createElement_x("title"); $newtitle->appendChild(new DOMText("NEW")); $oldtitle->parentNode->replaceChild($newtitle, $oldtitle); $dom->save("replace.xml"); //删除节点 $oldtitle = $xpath->query("/books/book/title")->item(1); $oldtitle->parentNode->removeChild($oldtitle); $dom->save("remove.xml"); ?> replace.xml <?xml version="1.0"?> <books> <book> <author>Jack Herrington</author> <title>NEW</title> <publisher>O'Reilly</publisher> </book> <book> <author>Jack Herrington</author> <title>Podcasting Hacks</title> <publisher>O'Reilly</publisher> </book> </books> remove.php <?xml version="1.0"?> <books> <book> <author>Jack Herrington</author> <title>NEW</title> <publisher>O'Reilly</publisher> </book> <book> <author>Jack Herrington</author> <publisher>O'Reilly</publisher> </book> </books>

小旋风柴进 2019-12-02 02:01:38 0 浏览量 回答数 0

回答

script本身也是一个DOM标签,正常创建一个script节点然后添加到这个div下面就好了。你列举的两个API刚好都不能做这个。 $('<script>').text("your js").appendTo(parentDiv)

zid 2019-12-02 03:10:56 0 浏览量 回答数 0

回答

生命周期就是vue从开始创建到销毁的过程,分为四大步(创建,挂载,更新,销毁),每一步又分为两小步,如beforeCreate,created。beforeCreate前,也就是new Vue的时候会初始化事件和生命周期;beforeCreate和created之间会挂载Data,绑定事件;接下来会根据el挂载页面元素,如果没有设置el则生命周期结束,直到手动挂载;el挂载结束后,根据templete/outerHTML(el)渲染页面;在beforeMount前虚拟DOM已经创建完成;之后在mounted前,将vm.$el替换掉页面元素el;mounted将虚拟dom挂载到真实页面(此时页面已经全部渲染完成);之后发生数据变化时触发beforeUpdate和updated进行一些操作;最后主动调用销毁函数或者组件自动销毁时beforeDestroy,手动撤销监听事件,计时器等;destroyed时仅存在Dom节点,其他所有东西已自动销毁 问题来源于GitHub,查看更多答案,请查看https://github.com/haizlin/fe-interview/issues/229

游客7iokfgo4yexey 2020-05-24 12:14:07 0 浏览量 回答数 0

回答

原生XML扩展 我更喜欢使用其中一个原生XML扩展,因为它们与PHP捆绑在一起,通常比所有第三方库更快,并且在标记上给我所需的所有控制权。 DOM DOM扩展允许您使用PHP 5通过DOM API操作XML文档。它是W3C的文档对象模型核心级别3的实现,这是一个平台和语言中立的接口,允许程序和脚本动态访问和更新文件的内容,结构和风格。 DOM能够解析和修改现实世界(破碎)的HTML,并且可以执行XPath查询。它基于libxml。 使用DOM需要一些时间才能提高效率,但这个时间非常值得IMO。由于DOM是一个与语言无关的接口,因此您可以找到多种语言的实现,因此如果您需要更改编程语言,那么您很可能已经知道如何使用该语言的DOM API。 一个基本的用法示例可以在抓取A元素的href属性中找到,一般的概念概述可以在php的DOMDocument中找到 StackOverflow上已经广泛介绍了如何使用DOM扩展,因此如果您选择使用它,您可以确定您遇到的大多数问题都可以通过搜索/浏览Stack Overflow来解决。 XMLReader的 XMLReader扩展是一个XML pull解析器。读取器在文档流上作为光标前进,并在途中停在每个节点上。 与DOM一样,XMLReader基于libxml。我不知道如何触发HTML解析器模块,因此使用XMLReader解析损坏的HTML的可能性可能不如使用DOM,因为您可以明确告诉它使用libxml的HTML解析器模块。 使用php从h1标签获取所有值时,可以找到一个基本用法示例 XML解析器 此扩展允许您创建XML解析器,然后为不同的XML事件定义处理程序。每个XML解析器还有一些您可以调整的参数。 XML Parser库也基于libxml,并实现了SAX样式的XML推送解析器。它可能是比DOM或SimpleXML更好的内存管理选择,但是比XMLReader实现的pull解析器更难以使用。 SimpleXML的 SimpleXML扩展提供了一个非常简单且易于使用的工具集,用于将XML转换为可以使用普通属性选择器和数组迭代器处理的对象。 当您知道HTML是有效的XHTML时,SimpleXML是一个选项。如果你需要解析破碎的HTML,甚至不要考虑SimpleXml,因为它会窒息。 一个基本的用法示例可以在一个简单的CRUD节点程序和xml文件的节点值中找到,PHP手册中还有很多其他的例子。 第三方库(基于libxml) 如果您更喜欢使用第三方库,我建议使用实际上使用DOM / libxml而不是字符串解析的库。 FluentDom - 回购 FluentDOM为PHP中的DOMDocument提供了类似jQuery的流畅XML接口。选择器是用XPath或CSS编写的(使用CSS到XPath转换器)。当前版本扩展了DOM实现标准接口并添加了DOM Living Standard的功能。FluentDOM可以加载JSON,CSV,JsonML,RabbitFish等格式。可以通过Composer安装。 HtmlPageDom Wa72 \ HtmlPageDom`是一个用于轻松操作HTML文档的PHP库。它需要来自Symfony2组件的DomCrawler来遍历DOM树,并通过添加操作HTML文档的DOM树的方法来扩展它。 phpQuery(多年未更新) phpQuery是一个服务器端,可链接,CSS3选择器驱动的文档对象模型(DOM)API,基于用PHP5编写的jQuery JavaScript库,并提供额外的命令行界面(CLI)。 另见:https://github.com/electrolinux/phpquery Zend_Dom Zend_Dom提供了处理DOM文档和结构的工具。目前,我们提供Zend_Dom_Query,它提供了一个统一的界面,可以使用XPath和CSS选择器查询DOM文档。 的QueryPath QueryPath是一个用于操作XML和HTML的PHP​​库。它不仅适用于本地文件,还适用于Web服务和数据库资源。它实现了许多jQuery接口(包括CSS样式的选择器),但它在服务器端使用时经过了大量调整。可以通过Composer安装。 fDOMDocument fDOMDocument扩展了标准DOM,以便在所有错误情况下使用异常,而不是PHP警告或通知。为方便起见,他们还添加了各种自定义方法和快捷方式,并简化了DOM的使用。 军刀/ XML saber / xml是一个包装和扩展XMLReader和XMLWriter类的库,用于创建一个简单的“xml到对象/数组”映射系统和设计模式。编写和读取XML是单遍的,因此可以快速并且需要大型xml文件的低内存。 FluidXML FluidXML是一个用于使用简洁流畅的API来操作XML的PHP​​库。它利用XPath和流畅的编程模式,既有趣又有效。 第三方(不是基于libxml的) 构建DOM / libxml的好处是,您可以获得良好的开箱即用性能,因为您基于本机扩展。但是,并非所有第三方库都沿着这条路线行进。其中一些列在下面 PHP简单的HTML DOM解析器 用PHP5 +编写的HTML DOM解析器允许您以非常简单的方式操作HTML! 需要PHP 5+。 支持无效的HTML。 使用选择器在HTML页面上查找标签,就像jQuery一样。 从一行中提取HTML中的内容。 我一般不推荐这个解析器。代码库很糟糕,解析器本身很慢而且内存很耗。并非所有jQuery选择器(例如子选择器)都是可能的。任何基于libxml的库都应该比这更容易。 PHP Html解析器 PHPHtmlParser是一个简单,灵活的html解析器,允许您使用任何css选择器(如jQuery)选择标签。目标是帮助开发需要快速,简单的方法来废弃html的工具,无论它是否有效!这个项目最初是由sunra / php-simple-html-dom-parser支持的,但支持似乎已经停止,所以这个项目是我对他以前工作的改编。 同样,我不推荐这个解析器。CPU使用率很高,速度相当慢。还没有清除已创建DOM对象的内存的功能。这些问题尤其适用于嵌套循环。文档本身不准确且拼写错误,自4月14日以来没有回复修复。 加农 通用标记器和HTML / XML / RSS DOM解析器 能够操纵元素及其属性 支持无效的HTML和UTF8 可以对元素执行类似CSS3的高级查询(比如jQuery - 支持的命名空间) HTML美化器(如HTML Tidy) 缩小CSS和Javascript 排序属性,更改字符大小写,更正缩进等。 扩展 使用基于当前字符/标记的回调解析文档 操作以较小的功能分隔,以便轻松覆盖 快速而简单 从未使用过它。不知道它是否有用。 HTML 5 您可以使用上面的方法来解析HTML5,但由于HTML5允许的标记,可能会有怪癖。因此,对于HTML5,您要考虑使用专用解析器,例如 html5lib 基于WHATWG HTML5规范的HTML解析器的Python和PHP实现,可与主要桌面Web浏览器实现最大兼容性。 HTML5最终确定后,我们可能会看到更多专用解析器。还有一个W3的博客文章,名为How-To for html 5 parsing,值得一试。 网页服务 如果您不想编写PHP,您也可以使用Web服务。一般来说,我发现这些实用程序很少,但那只是我和我的用例。 ScraperWiki。 ScraperWiki的外部界面允许您以您希望在Web或您自己的应用程序中使用的形式提取数据。您还可以提取有关任何刮刀状态的信息。 常用表达 最后也是最不推荐的,您可以使用正则表达式从HTML中提取数据。通常,不鼓励在HTML上使用正则表达式。 您可以在网上找到与标记相匹配的大多数片段都很脆弱。在大多数情况下,它们只适用于非常特殊的HTML。微小的标记更改,例如在某处添加空格,或添加或更改标记中的属性,可以使RegEx在未正确编写时失败。在HTML上使用RegEx之前,您应该知道自己在做什么。 HTML解析器已经知道HTML的语法规则。必须为您编写的每个新RegEx讲授正则表达式。RegEx在某些情况下很好,但它实际上取决于您的用例。 您可以编写更可靠的解析器,但是使用正则表达式编写完整可靠的自定义解析器是浪费时间,因为上述库已经存在并且在此方面做得更好。

游客gsy3rkgcdl27k 2019-12-02 02:09:37 0 浏览量 回答数 0

回答

优势比用DOM API创建来得简单缺点好多:阅读性太差,可再编辑性差,而且容易出错(内容太长单引号、双引号太多容易出错);建议每个节点名称变量,加上注释,再进行拼接,这样既不容易出错,后期修改也方便,阅读性好代码整洁号,还根据不同的业务逻辑组装不同的html。如下图:

小旋风柴进 2019-12-02 02:10:21 0 浏览量 回答数 0

回答

窗口化是一种在任何给定时间仅呈现一小部分行的技术,并且可以大大减少重新呈现组件所需的时间以及所创建的DOM节点的数量。如果您的应用程序呈现一长串数据,则建议使用此技术。react-window和react-virtualized都是流行的窗口库,它提供了几个可重用的组件来显示列表,网格和表格数据。

你的答案 2020-05-08 11:45:42 0 浏览量 回答数 0

回答

的确 angular.element 不支持 wrapAll 方法,以下是我在网上找到的 angular.element 的支持方法,可供参考。addClass() - 为每个匹配的元素添加指定的样式类名after() - 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append() - 在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone() - 创建一个匹配的元素集合的深度拷贝副本contents() - 获得匹配元素集合中每个元素的子元素,包括文字和注释节点css() - 获取匹配元素集合中的第一个元素的样式属性的值data() - 在匹配元素上存储任意相关数据detach() - 从DOM中去掉所有匹配的元素empty() - 从DOM中移除集合中匹配元素的所有子节点eq() - 减少匹配元素的集合为指定的索引的哪一个元素find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代hasClass() - 确定任何一个匹配元素是否有被分配给定的(样式)类html() - 获取集合中第一个匹配元素的HTML内容next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素on() - 在选定的元素上绑定一个或多个事件处理函数off() - 移除一个事件处理函数one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器prepend() - 将参数内容插入到每个匹配元素的前面(元素内部)prop() - 获取匹配的元素集中第一个元素的属性(property)值ready() - 当DOM准备就绪时,指定一个函数来执行remove() - 将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)removeAttr() - 为匹配的元素集合中的每个元素中移除一个属性(attribute)removeClass() - 移除集合中每个匹配元素上一个,多个或全部样式removeData() - 在元素上移除绑定的数据replaceWith() -`用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合text() - 得到匹配元素集合中每个元素的合并文本,包括他们的后代toggleClass() - 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类triggerHandler() - 为一个事件执行附加到元素的所有处理程序unbind() - 从元素上删除一个以前附加事件处理程序val() - 获取匹配的元素集合中第一个元素的当前值wrap() - 在每个匹配的元素外层包上一个html元素

a123456678 2019-12-02 02:06:31 0 浏览量 回答数 0

回答

CoInitialize(NULL); // 初始化COM接口MSXML2::IXMLDOMDocumentPtr pDoc;HRESULT hr;hr = pDoc.CreateInstance(__uuidof(MSXML2::DOMDocument40));if (FAILED(hr)){MessageBox("无法创建DOM对象,检查是否安装了MS XML Parser运行库!");return ;}//加载xml文档pDoc->load("F:Records.xml");//得到根节点MSXML2::IXMLDOMElementPtr pRoot = pDoc->GetdocumentElement(); MSXML2::IXMLDOMNodeListPtr pNodeList = pRoot->GetchildNodes();MSXML2::IXMLDOMNodeListPtr pThirdNodeList = pDoc->selectNodes("//Records/Record/XSinfo");

a123456678 2019-12-02 01:58:50 0 浏览量 回答数 0

问题

Java 处理 XML 的三种主流技术及介绍:报错

kun坤 2020-06-09 23:26:43 0 浏览量 回答数 1

回答

一个元素是描述你要在DOM节点或其他部件方面出现在屏幕上什么平原对象。元素可以在其道具中包含其他元素。创建一个React元素很便宜。创建元素后,就永远不会对其进行突变。 React Element的对象表示如下: const element = React.createElement( 'div', {id: 'login-btn'}, 'Login' ) 上面的React.createElement()函数返回一个对象: { type: 'div', props: { children: 'Login', id: 'login-btn' } } 最后,它使用ReactDOM.render()以下代码呈现给DOM : < div id = ' login-btn ' >登录</ div > 而一个组件可以以多种不同的方式来声明。它可以是带有render()方法的类。或者,在简单情况下,可以将其定义为函数。无论哪种情况,它都将props作为输入,并返回JSX树作为输出: const Button =({onLogin})=> < div id = { ' login-btn ' } onClick = {onLogin} >登录< / div > 然后,JSX被编译为React.createElement()功能树: const Button = ({ onLogin }) => React.createElement( 'div', { id: 'login-btn', onClick: onLogin }, 'Login' )

你的答案 2020-05-07 15:31:58 0 浏览量 回答数 0

回答

主要就是xmlNewNode创建节点,xmlAddChild增加子节点,xmlUnlinkNode和xmlFreeNode删除节点. 下面是解决这个问题的完整代码: /** * section: Tree * synopsis: Navigates a tree to print element names * purpose: Parse a file to a tree, use xmlDocGetRootElement() to * get the root element, then walk the document and print * all the element name in document order. * usage: tree1 filename_or_URL * test: tree1 test2.xml > tree1.tmp && diff tree1.tmp $(srcdir)/tree1.res * author: Dodji Seketeli * copy: see Copyright for the status of this software. */ #include <stdio.h> #include <string.h> #include <libxml/parser.h> #include <libxml/tree.h> /* *To compile this file using gcc you can type * gcc `xml2-config --cflags --libs` -o tree1 tree1.c *Run this program * ./tree1 test.xml */ static const char* LEVELS[] = {"", " ", " ", " ", " ", " ", " ", " " }; static void printTree(xmlNode * a_node, int level); /** * print_element_names: * @a_node: the initial xml node to consider. * * 打印所有兄弟节点和子节点的名字. */ static void print_element_names(xmlNode * a_node, const char* msg); // 根据标签名称获取节点(可以实现更加复杂的逻辑,获取指定节点) static xmlNode *getNode(xmlNode *rootNode, const char* tag, xmlNode **parentNode); // 删除当前节点,但是保留子节点 static void removeNode(xmlNode *parentNode, xmlNode *nodeToDelete); // 用一个父节点包装子节点 static void wrapWithNode(xmlNode *parentNode, xmlNode *node, xmlNode *newNode); // 增加一个新节点 static void appendNewChildNode(xmlNode *parentNode, xmlNode *newNode); /** * print_element_names: * @a_node: the initial xml node to consider. * * Prints the names of the all the xml elements * that are siblings or children of a given xml node. */ static int test_removeNode(const char* filepath); /** * print_element_names: * @a_node: the initial xml node to consider. * * Prints the names of the all the xml elements * that are siblings or children of a given xml node. */ static int test_wrapWithNode(const char* filepath); int main(int argc, char **argv) { if (argc != 2) { printf("error: invalid arguments"); return -1; } /* * this initialize the library and check potential ABI mismatches * between the version it was compiled for and the actual shared * library used. */ LIBXML_TEST_VERSION printf("test: removeNode:\n"); test_removeNode(argv[1]); printf("\n\ntest: wrapWithNode\n"); test_wrapWithNode(argv[1]); /* *Free the global variables that may *have been allocated by the parser. */ xmlCleanupParser(); return 0; } void print_element_names(xmlNode * a_node, const char* msg) { xmlNode *cur_node = NULL; if (msg != NULL && strlen(msg) > 0) { printf("print: %s\n", msg); } for (cur_node = a_node; cur_node; cur_node = cur_node->next) { if (cur_node->type == XML_ELEMENT_NODE) { printf("node type: Element, name: %s\n", cur_node->name); } print_element_names(cur_node->children, ""); } } void printTree(xmlNode * a_node, int level) { xmlNode *cur_node = NULL; //printf("%s", LEVELS[level]); for (cur_node = a_node; cur_node; cur_node = cur_node->next) { if (cur_node->type == XML_ELEMENT_NODE) { printf("%s%s <%d>\n", LEVELS[level], cur_node->name, cur_node->type); printTree(cur_node->children, level + 1); } else { printf("%s#%s <%d>\n", LEVELS[level], cur_node->name, cur_node->type); } } } xmlNode *getNode(xmlNode *rootNode, const char* tag, xmlNode **parentNode) { xmlNode *cur = rootNode; if ((cur->type == XML_ELEMENT_NODE) && (!xmlStrcmp(cur->name, (const xmlChar *)tag))){ *parentNode = NULL; return cur; } *parentNode = cur; cur = cur->xmlChildrenNode; while (cur != NULL) { if ((cur->type == XML_ELEMENT_NODE) && (!xmlStrcmp(cur->name, (const xmlChar *)tag))){ return cur; } if (cur->type == XML_ELEMENT_NODE) { *parentNode = cur; } cur = cur->next; } return NULL; } // 删除当前节点,但是保留子节点 void removeNode(xmlNode *parentNode, xmlNode *nodeToDelete) { if (nodeToDelete == NULL) { printf("error: nodeToDelete is null"); return; } xmlNodePtr siblingNode = nodeToDelete->next; while (siblingNode != NULL) { if (siblingNode->type == XML_ELEMENT_NODE) { printf("debug: found sibling: %s\n", siblingNode->name); break; } siblingNode = siblingNode->next; } printf("debug: parentNode: %s, nodeToDelete: %s\n", parentNode->name, nodeToDelete->name); printTree(parentNode, 0); xmlNode *childrenNode = nodeToDelete->children; if (childrenNode == NULL) { printf("warn: childrenNode is null\n"); } //xmlUnlinkNode(nodeToDelete->children); xmlNodePtr nextChildNode = NULL; while (childrenNode != NULL) { printf("debug: childrenNode: %s\n", childrenNode->name); nextChildNode = childrenNode->next; xmlUnlinkNode(childrenNode); if (siblingNode != NULL) { printf("debug: addPreSibling: %s, sibling is %s\n", childrenNode->name, siblingNode->name); xmlAddPrevSibling(siblingNode, nextChildNode); } else { printf("debug: addChild: %s, parent is %s\n", childrenNode->name, parentNode->name); printTree(childrenNode, 0); xmlAddChild(parentNode, childrenNode); } childrenNode = nextChildNode; } xmlUnlinkNode(nodeToDelete); xmlFreeNode(nodeToDelete); } // 用一个父节点包装子节点 void wrapWithNode(xmlNode *parentNode, xmlNode *node, xmlNode *newNode) { xmlUnlinkNode(node); xmlAddChild(newNode, node); xmlAddChild(parentNode, newNode); } // 增加一个新节点 void appendNewChildNode(xmlNode *parentNode, xmlNode *newNode) { xmlAddChild(parentNode, newNode); } int test_removeNode(const char* filepath) { xmlDoc *doc = NULL; xmlNode *root_element = NULL; xmlNode *parentNode = NULL; xmlNode *curNode = NULL; /*parse the file and get the DOM */ doc = xmlReadFile(filepath, NULL, 0); if (doc == NULL) { printf("error: could not parse file %s\n", filepath); } /*Get the root element node */ root_element = xmlDocGetRootElement(doc); // 删除节点,但是保留子节点 curNode = getNode(root_element, "p", &parentNode); if (curNode == NULL) { printf("error: p node is not found"); return -1; } if (parentNode == NULL) { // 根节点只能有一个子节点,这里就不处理了 printf("error: This is root node, should treat specially. root node should have only one node"); return -1; } removeNode(parentNode, curNode); // 重新获取跟节点,应该是main了 root_element = xmlDocGetRootElement(doc); print_element_names(root_element, "after delete"); /*free the document */ xmlFreeDoc(doc); return 0; } int test_wrapWithNode(const char* filepath) { xmlDoc *doc = NULL; xmlNode *root_element = NULL; xmlNode *newNode = NULL; /*parse the file and get the DOM */ doc = xmlReadFile(filepath, NULL, 0); if (doc == NULL) { printf("error: could not parse file %s\n", filepath); } /*Get the root element node */ root_element = xmlDocGetRootElement(doc); // 增加一个父节点,根节点需要特殊处理 xmlUnlinkNode(root_element); newNode = xmlNewNode(NULL, BAD_CAST "main"); xmlAddChild(newNode, root_element); xmlDocSetRootElement(doc, newNode); // 重新获取跟节点,应该是main了 root_element = xmlDocGetRootElement(doc); print_element_names(root_element, "after wrap"); /*free the document */ xmlFreeDoc(doc); return 0; } 我测试的结果: 全选复制放进笔记print: after delete **删除节点p后的节点树** node type: Element, name: parent node type: Element, name: a1 node type: Element, name: one node type: Element, name: two node type: Element, name: three node type: Element, name: a2 node type: Element, name: one node type: Element, name: two node type: Element, name: three test: wrapWithNode **增加一个main节点后的节点树** print: after wrap node type: Element, name: main node type: Element, name: parent node type: Element, name: p node type: Element, name: a1 node type: Element, name: one node type: Element, name: two node type: Element, name: three node type: Element, name: a2 node type: Element, name: one node type: Element, name: two node type: Element, name: three

a123456678 2019-12-02 02:37:18 0 浏览量 回答数 0

问题

使用nodejs抓取时,出现转码问题

小旋风柴进 2019-12-01 19:28:09 976 浏览量 回答数 1

问题

求助使用nodejs抓取时,出现问题怎么解决?

吴孟桥 2019-12-01 19:36:00 1174 浏览量 回答数 1

回答

beforeCreate:在 new 一个 vue 实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。 created:data和methods都已经被初始化好了。(如果要调用methods中的方法,或者操作data中的数据,最早可以在这个阶段中操作) beforeMount:在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的。 mounted:Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段(如果我们想要通过插件操作页面上的DOM 节点,最早可以在和这个阶段中进行) beforeUpdate:页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步。 updated:页面显示的数据和data中的数据已经保持同步了,都是最新的。 beforeDestroy:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的data和methods,指令,过滤器……都是处于可用状态。还没有真正被销毁。 destroyed:这个时候上所有的 data 和 methods,指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。 问题来源于GitHub,查看更多答案,请查看https://github.com/haizlin/fe-interview/issues/310

游客7iokfgo4yexey 2020-05-24 22:32:34 0 浏览量 回答数 0

问题

backbone中的使用问题

a123456678 2019-12-01 20:22:07 862 浏览量 回答数 1

回答

要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: 代码如下 复制代码 // 代码节选至seajsfunction styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent('onload', callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // this situation, Opera does nothing, so fallback to timeout. // 2. "onerror" doesn't fire in any browsers! } } 很遗憾,这次在其他的浏览器中,想判断CSS是否加载完成就不是那么方便了,FF,webkit可以通过node.sheet.cssRules属性是否存在来判断是否加载完毕。而且需要使用setTimeout间隔事件轮询: 代码如下 复制代码 // 代码节选至seajs function poll(node, callback) { if (callback.isCalled) { return; } var isLoaded = false; if (/webkit/i.test(navigator.userAgent)) {//webkit if (node['sheet']) { isLoaded = true; } } // for Firefox else if (node['sheet']) { try { if (node['sheet'].cssRules) { isLoaded = true; } } catch (ex) { // NS_ERROR_DOM_SECURITY_ERR if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { // give time to render. setTimeout(function() { callback(); }, 1); } else { setTimeout(function() { poll(node, callback); }, 1); } } setTimeout(function() { poll(node, callback); }, 0); SeaJS给出的完整的处理是这样的: 代码如下 复制代码 function styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.attachEvent('onload', callback); // NOTICE: // 1. "onload" will be fired in IE6-9 when the file is 404, but in // this situation, Opera does nothing, so fallback to timeout. // 2. "onerror" doesn't fire in any browsers! } // polling for Firefox, Chrome, Safari else { setTimeout(function() { poll(node, callback); }, 0); // for cache } } function poll(node, callback) { if (callback.isCalled) { return; } var isLoaded = false; if (/webkit/i.test(navigator.userAgent)) {//webkit if (node['sheet']) { isLoaded = true; } } // for Firefox else if (node['sheet']) { try { if (node['sheet'].cssRules) { isLoaded = true; } } catch (ex) { // NS_ERROR_DOM_SECURITY_ERR if (ex.code === 1000) { isLoaded = true; } } } if (isLoaded) { // give time to render. setTimeout(function() { callback(); }, 1); } else { setTimeout(function() { poll(node, callback); }, 1); } } // 我的动态创建LINK函数function createLink(cssURL,lnkId,charset,media){ var head = document.getElementsByTagName('head')[0], linkTag = null; if(!cssURL){ return false; } linkTag = document.createElement('link'); linkTag.setAttribute('id',(lnkId || 'dynamic-style')); linkTag.setAttribute('rel','stylesheet'); linkTag.setAttribute('charset',(charset || 'utf-8')); linkTag.setAttribute('media',(media||'all')); linkTag.setAttribute('type','text/css'); linkTag.href = cssURL; head.appendChild(linkTag); } function loadcss(){ var styleNode = createLink('/wp-content/themes/BlueNight/style.css'); styleOnload(styleNode,function(){ alert("loaded"); }); } 在看到seajs的代码的时候,我立刻想起了我看到Diego Perini的另一个解决方案: 代码如下 复制代码 /* Copyright (C) 2010 Diego Perini All rights reserved.* cssready.js - CSS loaded/ready state notification* Author: Diego Perini Version: 0.1 Created: 20100616 Release: 20101104* License: http://www.111cn.net * Download: http://javascript.nwbox.com/cssready/cssready.js*/ function cssReady(fn, link) { var d = document, t = d.createStyleSheet, r = t ? 'rules' : 'cssRules', s = t ? 'styleSheet' : 'sheet', l = d.getElementsByTagName('link'); // passed link or last link node link || (link = l[l.length - 1]); function check() { try { return link && link[s] && link[s][r] && link[s][r][0]; } catch(e) { return false; } } (function poll() { check() && setTimeout(fn, 0) || setTimeout(poll, 100); })(); } 其实,如果你读过jQuery的domready事件的判断的代码,原理也类似。也是通过setTimeout轮询的方式来判断DOM节点是否加载完毕。 还有,Fackbook则是通过在动态创建的CSS样式中包含一个固定的样式,例如#loadcssdom,loadcssdom就是一个高度为1px样式。然后动态创建一个DOM对象,添加这个loadcssdom样式。然后也是setTimeout轮询loadcssdo是否已经有1px的高度了。这个处理方式的解决方案,大家可以下《CSSP: Loading CSS with Javascript – and getting an onload callback.》 而《JavaScript Patterns》的作者Stoyan则在他的博客里,比较详细的说明了《When is a stylesheet really loaded?》。 看完了这些,你可能会感叹:汗,判断CSS是否加载完毕,目前还真不是那么容易!其实我这里算是一个抛砖引玉,因为开发中,除了动态加载CSS,我们还要动态加载JavaScript,动态加载HTML的操作,有空我也会写关于动态加载JavaScript的相关内容,不过在那之前,我建议你看看这些: 《ensure – Ensure JavaScripts/HTML/CSS are loaded on-demand when needed》,这个库是专门处理动态加载HTML,CSS,JavaScript的。就像作者介绍的那样: ensure is a tiny JavaScript library that provides a handy function ensure which allows you to load JavaScript, HTML, CSS on-demand, and then execute your code. ensure www.111cn.net ensures that the relevant JavaScript and HTML snippets are already in the browser DOM before executing your code that uses them. 《Tell CSS that JavaScript is available ASAP》 看完这个后,你可能就不会纠结:When you’re styling parts of a web page that will look and work differently depending on whether JavaScript is available or not。 好了,这次就说这么多了,希望对对大家的开发和学习有帮助!来源网络

元芳啊 2019-12-02 00:54:41 0 浏览量 回答数 0

回答

HTML5 确实允许 a 包裹任何 div、p 之类到水平 block 标签了。前提是包裹到内容里不能包含任何交互的元素,比如其它链接或按钮。 从开发和可用性角度 在 XHTML 的时代,如果你要创建大块的点击区域,代码可能是这样: <div class="story"> <h3><a href="story1.html">Big Brother is Watching You</a></h3> <p><a href="story1.html"><img src="v.jpg" alt="full story. " />People should not be afraid of their governments. Governments should be afraid of their people.</a></p> <p><a href="story1.html">Read more</a></p> </div> 到了 HTML5,你可以写成这样: <article> <a href="story1.html"> <h3>Big Brother is Watching You</h3> <p><img src="v.jpg" alt="V for Vendetta">People should not be afraid of their governments. Governments should be afraid of their people.</p> <p>Read more</p> </a> </article> 从代码结构上看,减少了重复的链接,对前后台代码维护来说都很方便,而且也更语义化(单纯的Read more没有任何意义)。看img标签的alt属性,前者是个链接,所以alt描述链接目标,后者是正文的一张补充图片,因此直接描述图片本身。 从用户使用角度,键盘用户选择链接也可以少按几次 tab。但也同样带来了困扰,比如不好复制链接里的部分内容。 所以,当需要创建大区域点击时(比如文本广告),且对文字复制无要求时,使用后者更好。当链接单一时,两者差别不是很大,比如只有: Link Title)。从 SEO 角度 如果单纯从 SEO 角度看,你的两段代码在 DOM 的树状结构是这样的: - h1 - a - a - h1 搜索引擎机器人在爬行的时候先宽遍历再深遍历,放在相同的页面,仅看第一级节点,显然 h1 的权重比 a 高。所以,针对你的代码,前者对 SEO 更有利。

杨冬芳 2019-12-02 02:46:15 0 浏览量 回答数 0

问题

UI自动化体系建设的创新实践

云效平台 2019-12-01 20:57:08 2984 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 阿里云双十一主会场 阿里云双十一新人会场 1024程序员加油包 阿里云双十一拼团会场 场景化解决方案 阿里云双十一直播大厅