How to remove a DOM element?
tctco opened this issue · 6 comments
tctco commented
Hi! 请问我该如何删除一个符合要求的节点？以及如何增加节点？
let mut img_list = document.find("img[src]");
img_list.for_each(|_index, ele| {
// 如何删除符合要求的节点？
// How should I remove the element
});
let svg = Vis::load("<svg></svg>").unwrap();
// 如何把节点添加到document中？
// How should I append this svg to the document?fefit commented
@tctco 操作元素的方式和jq里操作DOM元素的方式类似，比如像下面这样：
let html = r#"
<div>
<img src="a.png" />
<img src="b.jpg" />
<img src="c.webp" />
</div>
"#;
let fragement = Vis::load(html)?;
let mut root_div = fragement.children("div");
let mut img_list = root_div.find("img");
img_list.for_each(|_, ele| {
// 这里ele实现了IElementTrait，支持类似DOM里的element元素的一些操作
let attr_src = ele.get_attribute("src").unwrap().to_string();
if attr_src.ends_with(".png") {
// 使用Vis::dom将element对象转换为一个类似jq的Elements集合对象
// Elements对象上包含了append/insert/empty
Vis::dom(ele).remove();
}
true
});
println!("{}", root_div.outer_html());
let mut svg = Vis::load("<svg></svg>")?;
root_div.append(&mut svg);
println!("{}", root_div.outer_html());可以参看节点操作的wiki，另外注意引入包的时候，feature必须开启insertion(删除的话还需要开启destory)，才能引入以上节点操作部分的代码。
tctco commented
谢谢！
还有一个问题，如果我想替换一个元素应该怎样做呢？
img_list.for_each(|_, ele| {
let attr_src = ele.get_attribute("src").unwrap().to_string();
if attr_src.ends_with(".png") {
let mut new_ele = Vis::load("<svg></svg>").unwrap();
Vis::dom(ele).insert_after(&mut new_ele).remove(); // panic!
}
true
});我既不熟悉jq也不熟悉rust :(
fefit commented
@tctco 的确可以用insert_before和remove两个方法来进行replace的操作，使用的方式大概类似
if attr_src.ends_with(".png") {
let mut img = Vis::dom(ele);
let mut svg = Vis::load("<svg></svg>").unwrap();
svg.insert_before(&mut img);
img.remove();
}不过这个方法针对 img 元素失效了，这是个bug，我晚点来排查修复一下。另外这种替换的需求可能还是提供类似jq的replace_with API操作比较好，只需要一次操作就好，到时使用的方式大概类似：
if attr_src.ends_with(".png") {
let mut img = Vis::dom(ele);
let mut svg = Vis::load("<svg></svg>").unwrap();
img.replace_with(&mut img);
}需要到晚点发版才能一并提供了。
tctco commented
Cool! 期待.jpg
再次感谢！！！