Jmingzi / m.js

原生dom库，链式调用，缓存查找

Mdom.js

原生操作dom的库，兼容ie8+，对于dom的查找是缓存的

使用

<script src="mDom.js"></script>     
// 或
<script>
import Mdom from './mDom.js'
</script>  

api列表

• select

• next

• prev

• filterBy

• el

• css

• attr

• mount

• html

• text

---

API：查找dom

示例dom

<div class="div" data-id="div"></div>
<p>hello world!</p>

select

@params selector 选择器，可接受class或id或tagName(.class，#id，tagName)默认tagName。

mDom.select('.div')
mDom.select('#div')
mDom.select('div')

@params option 筛选条件，一般为attributes

mDom.select('div', {
  class: 'div',
  'data-id': 'div'
})

@return

`null`或`dom`或`[dom1, dom2, ..., domN]`

next

@params target // 目标节点的下一个节点

mDom.next(mDom.select('.div'))
// p

prev 同上

filterBy 精确查找

mDom.filterBy(mDom.select('.div'), {
  'data-id': 'div'
})

@params dom 被选择的节点

@params option 操作条件，一般为attributes

---

API：创建dom

el

创建dom对象

@params tagName 创建标签名称，为空的时候创建文本节点

@params attributes dom属性

@return 返回一个函数，接受一个参数childs，为该节点的子节点

mDom.el('h1', {
    class: 'h1-class',
    style: {
        color:'red',
        'font-size': '14px'
    }
})(mDom.el('ppppp')())

// <h1 class="h1-class" style="color: red; font-size: 14px;">ppppp</h1>

css

设置dom的css

mDom.css(box)({color: 'red', 'font-size': '16px'})

html

@params dom 目标dom

@params html 为空时，表示获取该dom的html；否则设置innerHTML到该对象上

mDom.html(box)
// box.innerHTML

mDom.html(box, '<p>hello world</p>')

text 同上

mount 将创建的dom添加到目标对象中

@params target 目标对象

@params dom 创建的dom

@return 返回一个函数，接受：

• @params method 插入方式，默认为append，可选prepend
• @params beforeMount 插入前回调 可选

mDom.mount(document.body, h1)('prepend', ()=> console.log('before'))