-
Notifications
You must be signed in to change notification settings - Fork 6
中文API文档
轩子 edited this page Jan 26, 2021
·
21 revisions
Cargo.toml
[depedencies]
visdom = {git = "https://github.com/fefit/visdom", tag = "v0.0.6", version = "0.0.6"}
main.rs
use visdom::Vis;
use ntree::selector::interface::KindError
fn main()-> Result<(), KindError>{
let html = r##"
<Doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<nav id="header">
<ul>
<li>Hello,</li>
<li>Vis</li>
<li>Dom</li>
</ul>
</nav>
</body>
</html>
"##;
// load html
let nodes = Vis::load(html)?;
let lis = nodes.find("#header li")?;
println!("{}", lis.text());
// 将输出 "Hello,VisDom"
}
静态方法:load(html: &str)
加载html文档为document文档节点
静态方法:dom(ele: &BoxDynNode)
将一个ele元素转换为NodeList节点,主要用于在以上带回调方法参数的方法中
示例:
// 接以上示例
let texts = lis.map(|_index, ele|{
let ele = Vis::dom(ele);
return String::from(ele.text());
});
// 则texts为Vec<String>, ["Hello,", "Vis", "Dom"]
// 没有被包装的ele元素具备的方法可以查看ntree接口方法
以下 API 接口由 ntree 接口库实现,xxx_by,for_each,map
方法等的回调参数中BoxDynNode具备的方法可以从库中查看。
选择器方法 | 说明 | 备注 |
---|---|---|
find (selector: &str) |
查找匹配选择器的子孙元素 | 多选择器情况下可能需要 sort 方法 |
filter (selector: &str) |
筛选出匹配选择器的元素 | |
filter_by (|index: usize, ele: &BoxDynNode| -> bool) |
根据闭包方法返回的值,true则包含,false将被排除 | 对应filter方法参数为函数的形式 |
filter_in (node_list: &NodeList) |
在node_list中的元素将被包含,否则被排除 | 对应filter方法参数为集合的形式 |
not (selector: &str) |
排除匹配选择器的元素 | |
not_by (|index: usize, ele: &BoxDynNode| -> bool) |
根据闭包方法返回的值,true则被排除,false则包含 | 对应not方法参数为函数的形式 |
not_in (node_list: &NodeList) |
在node_list中的元素将被排除,否则包含 | 对应not方法参数为集合的形式 |
is (selector: &str) |
判断是否有一个元素匹配选择器 | |
is_by (|index: usize, ele: &BoxDynNode| -> bool) |
根据闭包方法返回的值,有任意一个为true则返回true | 对应is方法参数为函数的形式 |
is_in (node_list: &NodeList) |
有任意一个元素包含在node_list中,则返回true | 对应is方法参数为集合的形式 |
is_all (selector: &str) |
判断是否所有元素都匹配选择器 | 库额外提供方法 |
is_all_by (|index: usize, ele: &BoxDynNode| -> bool) |
根据闭包方法返回的值,全部为true则返回true,否则false | is_all方法参数为函数的形式 |
is_all_in (node_list: &NodeList) |
所有元素都包含在node_list中,则返回true,否则为false | is_all方法参数为集合的形式 |
has (selector: &str) |
筛选出子级元素中包含匹配选择器的元素 | |
has_in (node_list: &NodeList) |
筛选出有子级元素包含在node_list中的元素 | |
children (selector: &str) |
从子元素开始,查找匹配选择器的元素 | |
parent (selector: &str) |
从父元素开始,查找匹配选择器的元素 | |
parents (selector: &str) |
从父元素及祖先元素开始,查找匹配选择器的元素 | |
siblings (selector: &str) |
从兄弟元素开始,查找匹配选择器的元素 | |
next (selector: &str) |
从后一个紧挨兄弟元素开始,查找匹配选择器的元素 | |
next_all (selector: &str) |
从后面所有兄弟元素开始,查找匹配选择器的元素 | |
prev (selector: &str) |
从前一个紧挨兄弟元素开始,查找匹配选择器的元素 | |
prev_all (selector: &str) |
从前面所有兄弟元素开始,查找匹配选择器的元素 | |
eq (index: usize) |
获取元素列表中第 index 个 | |
slice (range: Range) |
获取某段范围内元素 | 如:slice(0..=2),表示前三个元素 |
辅助方法 | 说明 | 备注 |
---|---|---|
length () |
元素集合长度 | |
is_empty () |
元素集合是否为空 | |
for_each (|index: usize, ele: &mut BoxDynNode| -> bool) |
对每个元素进行遍历,当返回值为false时停止遍历 | 如果你喜欢简短写法,使用 each 也是一样的 |
map <T>(|index: usize, ele: &BoxDynNode| -> Vec<T>) |
对每个元素进行遍历,返回回调方法返回值的集合 | |
sort () |
对所有元素按照文档出现顺序进行排序 | 在使用find(".a,.b") 的多选择器情况,如果.a和.b分别查到的元素在文档中不是顺序出现的,而你又需要保持文档顺序的话,可以使用该方法排序,排序操作比较消耗性能,应该只在的确需要的情况下使用。 |
选择器 | 说明 | 备注 |
---|---|---|
* |
所有元素 | 元素选择器可参见 MDN css 选择器文档 |
#id |
id 选择器 | |
.class |
类选择器 | |
p |
标签名选择器 | |
[attr] |
含有{attr}的元素 | |
[attr=value] |
{attr}值为{value}的元素 | |
[attr*=value] |
{attr}包含{value}值的元素 | |
[attr|=value] |
{attr}包含{value}值或者{value}-的元素 | |
[attr~=value] |
{attr}包含{value}值,且值是以空格作为分隔的元素 | |
[attr^=value] |
{attr}以{value}值开头的元素 | |
[attr$=value] |
{attr}以{value}值结尾的元素 | |
[attr!=value] |
包含{attr},且值不为{value}的元素 | |
span > a |
子元素选择器 | 匹配父元素为 span 的 a 元素 |
span a |
子孙元素选择器 | 匹配 span 元素下的所有子孙 a 元素 |
span + a |
相邻元素选择器 | 匹配 span 后面紧邻的兄弟 a 元素 |
span ~ a |
后面兄弟元素选择器 | 匹配 span 后面所有的兄弟 a 元素 |
span.a |
多条件筛选选择器 | 匹配 span 且 class 名包含 a 的元素 |
:empty |
没有子元素的元素 | 以下都为伪类选择器 |
:first-child |
第一个子元素 | |
:last-child |
最后一个子元素 | |
:only-child |
唯一子元素 | |
:nth-child(nth) |
nth 表示为 a'n + b',a'和 b'为整数<零及正负>,n 从 0 开始计数,和为 1 则表示第一个子元素,最终将获取所有符合该数列值的子元素 | nth 形式的选择器都支持 odd 和 even 关键字 |
:nth-last-child(nth) |
同上,但从最后一个子元素开始计数算作第一个子元素 | |
:first-of-type |
子元素中第一个出现的标签元素<按标签名> | |
:last-of-type |
子元素中最后一个出现的标签元素<按标签名> | |
:only-of-type |
子元素中只出现一次的标签元素<按标签名> | |
:nth-of-type(nth) |
子元素中标签<按标签名>出现顺序符合数列值的元素 | |
:nth-last-of-type(nth) |
同上,但出现顺序从最后一个元素往前数 | |
:not(selector) |
匹配不符合 selector 选择器的元素 | |
:header |
所有标题元素,h1,h2,h3,h4,h5,h6 的别名 | |
:input |
所有表单元素,input,select,textarea,button 的别名 | |
:submit |
表单提交按钮,input[type="submit"],button[type="submit"] 的别名 |
属性方法 | 说明 | 备注 |
---|---|---|
attr (attr_name: &str) -> Option<IAttrValue> |
获取属性 | 值为 Option<IAttrValue > 枚举类型,IAttrValue 自身具备is_true() ,is_str(&str) 及to_list() 等方法 |
set_attr (attr_name: &str, value: Option<&str>) |
设置属性值,当 value 为 None 时,表示设置布尔 true,没有字符串属性值 | |
remove_attr (attr_name: &str) |
删除属性 | |
has_class (class_name: &str) |
判断元素中是否至少有一个元素包含 class 类名,多个 class 用空格隔开 | |
add_class (class_name: &str) |
增加 class 类名,多个 class 用空格隔开 | |
remove_class (class_name: &str) |
删除 class 类名 | |
toggle_class (class_name: &str) |
切换 class 类名,存在则删除,不存在则添加 |
文本方法 | 说明 | 备注 |
---|---|---|
text () |
获取所有元素的文本内容,实体将会自动 decode | |
set_text (content: &str) |
设置元素的内容为 content 文本<自动 encode 实体> | |
html () |
获取第一个元素的 html 文档内容 | |
set_html (content: &str) |
设置元素的子节点为 content 解析后的子节点 | |
outer_html () |
获取第一个元素的 html 文档内容,包含节点本身 |
dom 节点操作方法 | 说明 | 备注 |
---|---|---|
append (nodes: &NodeList) |
将所有节点插入节点子元素最后 | |
append_to (nodes: &mut NodeList) |
同上,但交换参数与调用者 | |
prepend (nodes: &mut NodeList) |
将所有节点插入节点子元素开始 | |
prepend_to (nodes: &mut NodeList) |
同上,但交换参数与调用者 | |
insert_after (nodes: &NodeList) |
将所有节点插入该元素之后 | |
after (nodes: &mut NodeList) |
同上,但交换参数与调用者 | |
insert_before (nodes: &NodeList) |
将所有节点插入该元素之前 | |
before (nodes: &mut NodeList) |
同上,但交换参数与调用者 | |
remove () |
删除节点,删除后持有的变量将不能再使用 | |
empty () |
清空节点内所有子元素 |
let html = r##"
<div id="container">
<div class="first-child"></div>
<div class="second-child"></div>
</div>
"##;
let root = Vis::load(html)?;
let child = root.find(".child")?;
let mut container = root.find("#container")?;
// 将child元素插入到container子元素最后
container.append(&child);
// 代码将变成
/*
<div id="container">
<div class="first-child"></div>
<div class="second-child"></div>
</div>
*/
let third_child = Vis::load(r##"<div class="third-child"></div>"##)?;
container.append(&third_child);
// 代码将变成
/*
<div id="container">
<div class="first-child"></div>
<div class="second-child"></div>
<div class="third-child"></div>
</div>
*/