NodeOperation 节点操作
简介
原生JavaScript基于HTML节点操作是常见的操作,那么对于选择节点、创造新节点、删除节点、替换节点内容等操作是必须的了。
axAddElem
该函数可创建一个新HTML节点。
完整写法:axAddElem(nodeName, options, content) ,可简写为:axAddElem(nodeName),参数说明如下:
- nodeName:必填项,节点名称,比如div,span,a等。
- options:选填项,给新增节点增加属性,比如{width:'100px',style:'color:red'}。
- content:选填项,给新增节点增加内容,该参数支持三种格式:
- 字符串:将向新增节点添加文本字符串。
- 节点对象:将向新增节点追加子节点
- 数组:将依次向新增节点追加子节点或文本字符串:
给新节点添加字符串:axAddElem('div', {style:'color:red'}, '我爱中国!') ,该例子将创建一个节点:<div style="color:red">我爱中国!</div>。
嵌套追加节点:axAddElem('ul', '', axAddElem('li', '', '新子节点'))
依次追加多个子节点:axAddElem('ul', '', [axAddElem('li', '', '新子节点01'),axAddElem('li', '', '新子节点02')])
axRangeReplace
该函数可在范围内替换文本内容,返回被替换后的新文本。
完整写法:axRangeReplace(originText, replaceText, indexStart, indexStop,n),可简写:axRangeReplace(originText, replaceText),参数说明如下:
- originText:必填,初始文本。
- replaceText:必填,将要替换的文本。
- indexStart:选填,替换文本开始位置。
- indexStop:选填,替换文本结束位置。
- n:选填,取几个字,在indexStart和indexStop都有值时无效。
如果indexStart和indexStop均为空,那么将完全替换;如果indexStart为空和indexStop不为空,则indexStop之前全部替换;如果indexStart不为空和indexStop为空,则indexStart之后全部替换;
举例:axRangeReplace('我热爱中国!', '非常想念', 1, 3),该例子最终返回:“我非常想念中国!”。
axClass
该函数可给节点批量添加或删除class类,方便将插件中targetDom的className值进行添加或删除。支持三个方法:
- axClass.get(classes),将字符串格式的多个class值转成数组格式,返回class数组;classes可以是一个字符串,也可以是英文逗号或空格分开的多个class;也可以是数组,格式如:['','','']
- axClass.add(obj,classes),给节点增加一个或多个class
- obj:必填,节点选择器,可以填"#id"、".className"、"DIV"、"[name]"等原生选择器,详细写法请点击这里。
- classes:必填,用法同get方法中的classes参数。
- before:选填,add之前回调,支持一个参数即将要添加的classname,返回true则表示add。
- axClass.del(classes),删除节点一个或多个class
- obj:必填,节点选择器,可以填"#id"、".className"、"DIV"、"[name]"等原生选择器,详细写法请点击这里。
- classes:必填,用法同get方法中的classes参数。
- before:选填,del之前回调,支持一个参数即将要删除的classname,返回false则表示del。
举例:略。