NodeOperation 节点操作

简介

原生JavaScript基于HTML节点操作是常见的操作,那么对于选择节点、创造新节点、删除节点、替换节点内容等操作是必须的了。

axAddElem

该函数可创建一个新HTML节点。

完整写法:axAddElem(node, options, content) ,可简写为:axAddElem(node),参数说明如下:

  • node:必填项,节点名称,比如div,span,a等。
  • options:选填项,给新增节点增加属性,比如{width:'100px',style:'color:red'}。
  • content:选填项,给新增节点增加文本内容。

举例:axAddElem('div', {style:'color:red'}, '我爱中国!') ,该例子将创建一个节点:<div style="color:red">我爱中国!</div>。

axAddWrap

该函数可给一个现有的Dom节点对象增加一个父层将其包裹住。

完整写法:axAddWrap = (elem, wrap, node, options, content),可简写为:axAddElem(elem, wrap, node),参数说明如下:

  • elem:必填项,现有子节点对象,可以填"#id"、".className"、"div"等原生选择器以及Dom对象。
  • wrap:必填项,将要添加的父层名称,可以填"#id"、".className"、"div"等原生选择器以及Dom对象。
  • node:必填项,父节点名称,比如div,span,a等。
  • options:选填项,给新增父节点增加属性,比如{width:'100px',style:'color:red'}。
  • content:选填项,给现有子节点增加文本内容。

举例:axAddWrap('#demo', '#wrap', 'div', {style:'color:red'}, '我爱中国!'),该例子将新增两个节点,该例子将创建一个节点:<div id="wrap" style="color:red"><div id="demo">我爱中国!</div></div>。

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),该例子最终返回:“我非常想念中国!”。

axCreateId

该函数将根据随机字符、时间戳或元素Id创建一段带前缀的文本。

完整写法:axCreateId(prefix, type, elem),可简写axCreateId(prefix),参数说明如下:

  • prefix:必填,文本前缀
  • type:选填,随机字符串类型,如果是一个数字,那创建该数字长度的随机字符串;如果是id,并且有elem,那么将根据elem的id来创建字符串;如果为空则根据时间戳创建字符串。
  • elem:选填,可以填"#id"、".className"、"div"等原生选择器以及Dom对象。

举例:axCreateId('ax', 10),该例子将创建一个类似“ax-prstwxyz23”的字符串。