Javascript :MS Edge中的作用域伪选择器
每当我在Microsoft Edge中将querySelectorAll与:scope伪选择器一起使用时,控制台中就会出现此错误 SCRIPT5022:SCRIPT5022:SyntaxError 我想知道是否有一种替代querySelectorAll的方法,在这里我使用这个参数::scope>*>表。我不想为此使用jQuery。谢谢 编辑: 我还想补充一点,querySelector可以自己工作 好的,下面是代码示例:Javascript :MS Edge中的作用域伪选择器,javascript,microsoft-edge,selectors-api,Javascript,Microsoft Edge,Selectors Api,每当我在Microsoft Edge中将querySelectorAll与:scope伪选择器一起使用时,控制台中就会出现此错误 SCRIPT5022:SCRIPT5022:SyntaxError 我想知道是否有一种替代querySelectorAll的方法,在这里我使用这个参数::scope>*>表。我不想为此使用jQuery。谢谢 编辑: 我还想补充一点,querySelector可以自己工作 好的,下面是代码示例: function pJSON(panel) {
function pJSON(panel) {
var json = {tables: [], images: [], text: ""};
var tables = Array.from(panel.querySelectorAll(":scope > * > table"));
var images = Array.from(panel.querySelectorAll(":scope > * > img"));
var text = panel.querySelector(":scope > textarea");
tables.forEach(table => {
json["tables"].push(tJSON(table));
});
images.forEach(image => {
json["images"].push(image.outerHTML);
});
if (text) {
json["text"] = text.value;
}
return json;
}
我再次注意到,除了IE之外,所有的浏览器都可以使用它
哦,还有一个可以动态添加的HTML示例,这是我调用此方法时的代码:
<div>
<input type="file" multiple=""><br>
<button>Add Table</button><br>
<div>
<table style="display: inline-table;">
<tbody>
<tr>
<td>
<input type="file" multiple=""><br>
<button>Add Table</button><br>
<textarea placeholder="Write some text"></textarea>
</td>
<td>
<input type="file" multiple=""><br>
<button>Add Table</button><br>
<textarea placeholder="Write some text"></textarea>
</td>
<td>
<button style="margin-left: 100px;">x</button>
</td>
</tr>
<tr>
<td>
<input type="file" multiple=""><br>
<button>Add Table</button><br>
<textarea placeholder="Write some text"></textarea>
</td>
<td>
<input type="file" multiple=""><br>
<button>Add Table</button><br>
<textarea placeholder="Write some text"></textarea>
</td>
<td>
<button style="margin-left: 100px;">x</button>
</td>
</tr>
</tbody>
</table>
<button style="margin-left: 100px;">x</button>
</div>
</div>
所以你想要的实际上是:范围的多边形填充 有一个在 其工作原理基本上是首先在要匹配的元素上定义一个足够唯一的选择器,并将其前置到传递给querySelector的选择器 const li=document.getElementById'target'; console.log'no:scope',li.querySelector'li>a'//链接 //变通办法 const UUID=Date.now+; li.setAttribute'data-scope-uuid',uuid; console.log'workedaround',li.querySelector'[data scope uuid='+uuid+']li>a'; 移除属性'data-scope-UUID'; //支持的地方 console.log':scope',li.querySelector':scope li>a'; 链接 子链接
所以你想要的实际上是:范围的多边形填充 有一个在 其工作原理基本上是首先在要匹配的元素上定义一个足够唯一的选择器,并将其前置到传递给querySelector的选择器 const li=document.getElementById'target'; console.log'no:scope',li.querySelector'li>a'//链接 //变通办法 const UUID=Date.now+; li.setAttribute'data-scope-uuid',uuid; console.log'workedaround',li.querySelector'[data scope uuid='+uuid+']li>a'; 移除属性'data-scope-UUID'; //支持的地方 console.log':scope',li.querySelector':scope li>a'; 链接 子链接
你能分享HTML来理解这个选择器吗?也许,我们可以提供另一种方法。@Ele我的代码是这样的:var tables=Array.frompanel.queryselectoral:scope>*>table;请分享HTML。@Ele请看一下我的编辑:3My friend,我要的是HTML,不是JS代码。你能分享HTML来理解这个选择器吗?也许,我们可以提供另一种方法。@Ele我的代码是这样的:var tables=Array.frompanel.queryselectoral:scope>*>table;请分享HTML。@Ele请看一下我的编辑:我的朋友,我要的是HTML,不是JS代码。太棒了!谢谢!谢谢