我有一个包含处理指令的HTML文档,应该使用CSS进行样式化。我没有找到任何方法来引用CSS中的处理指令。这可能吗?
<div> Hello World <?pi1 ?> Test <?pi2 ?> </div>
s2j5cfk01#
不可以。浏览器会把它们当作虚假的注解,所以在DOM中它们是 comment 节点。CSS选择器匹配 element 节点,所以处理指令是不可引用的。
dy1byipe2#
other answer正确地指出解析HTML永远不会生成处理指令节点。(截至2023年4月)由HTML LS §13.2.5.6。然而,这样的节点仍然可以在运行时动态地构造并插入到DOM树中。使用createProcessingInstruction和appendChild或insertBefore。它们甚至会出现在父节点的.innerHTML中,即使它们不会通过HTML解析无损地往返。它们在XML DOM中仍然完全支持。也就是说,处理指令节点,如注解节点,即使动态插入也不会参与样式化。因此,即使在querySelectorAll中也没有CSS选择器可以选择它们。处理指令节点可以通过XPath表达式来选择,但是,evaluate和createExpression支持:
createProcessingInstruction
appendChild
insertBefore
.innerHTML
querySelectorAll
evaluate
createExpression
const xpath = function* (expr, node = document) { const result = document.evaluate(expr, node); for (;;) { const item = result.iterateNext(); if (item === null) break; yield item; } }; document.body.appendChild( document.createProcessingInstruction('foo', '123')); document.body.appendChild( document.createProcessingInstruction('bar', '456')); document.body.appendChild( document.createProcessingInstruction('quux', '789')); document.body.appendChild( document.createProcessingInstruction('bar', '31337')); for (const piNode of xpath('.//processing-instruction("bar")')) { console.log(`PI node: target=${piNode.target} data=${piNode.data}`); }
2条答案
按热度按时间s2j5cfk01#
不可以。浏览器会把它们当作虚假的注解,所以在DOM中它们是 comment 节点。CSS选择器匹配 element 节点,所以处理指令是不可引用的。
dy1byipe2#
other answer正确地指出解析HTML永远不会生成处理指令节点。(截至2023年4月)由HTML LS §13.2.5.6。然而,这样的节点仍然可以在运行时动态地构造并插入到DOM树中。使用
createProcessingInstruction
和appendChild
或insertBefore
。它们甚至会出现在父节点的.innerHTML
中,即使它们不会通过HTML解析无损地往返。它们在XML DOM中仍然完全支持。也就是说,处理指令节点,如注解节点,即使动态插入也不会参与样式化。因此,即使在
querySelectorAll
中也没有CSS选择器可以选择它们。处理指令节点可以通过XPath表达式来选择,但是,evaluate
和createExpression
支持: