websect的使用教程

websect

下载

npm i websect

概念说明

• 内部原理实际上就是html字符串的解析，但是 websect 会找到指定的dom并进行解析，这里的dom实际上并不是浏览器里面的真实dom，而是类似于js对象的虚拟dom

find() 函数的使用

var $ = require("websect")
var s = `<h1>hello world</h1>`
var dm = $(s).find("h1").dom()
console.log(dm)

• 可以看见输出结果是一个数组，并且是解析之后的dom，实际上一旦调用 find() 这个函数就会把指定的dom进行解析，调用 dom() 这个函数会把解析完之后的dom的js对象返回，看看这个例子：

var $ = require("websect")
var s = `<h1>hello world</h1><h2>我是h2标签</h2><h1>哈喽，世界</h1>`
var dm = $(s).find("h1").dom()
console.log(dm)

• 可以看见所有的h1标签都被解析了，但是h2标签没有被解析，如果你想解析h2，只需要把find里边的h1改成h2就可以了
• 因此，find() 函数的作用就是找到指定的dom并进行解析

each() 函数的使用

var $ = require("websect")
var s = `<h1>hello world</h1><h2>我是h2标签</h2><h1>哈喽，世界</h1>`
$(s).find("h1").each(el=>{
	// 看看 el 到底是什么
    console.log(el)
})

• 可以看见 el 实际上就是解析之后的dom

attr() 函数的使用

var $ = require("websect")
var s = `<div>
            <h1 class="title"hello world</h1>
            <p class="desc">this is a discription...</p>
            <img class="img" src="http://local.com/demo.png" />
        </div>`
console.log($(s).find("img").attr("src"))

• 可以看见，attr() 函数实际上就是获取指定的属性的

text() 获取文本

var $ = require("websect")
var s = `<div>
            <h1 class="title"hello world</h1>
            <p class="desc">this is a discription...</p>
            <img class="img" src="http://local.com/demo.png" />
        </div>`
console.log($(s).find("p").text())

• 基本上这几个函数的使用已经足够了，还有一些别的函数，之后再详细讲解