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。

举例:略。