原生js——与node有关的属性和方法:hasChilsNodes()、appendChild()、removeChild()、replaceChild()、insertBefore()等

原生js——与node有关的属性和方法

1.nodeType:类型为1-12;
  • 最常用的节点类型:
  • Node.ElEMENT_NODE:元素节点,node.type == 1;
  • Node.ATTRIBUTE_NODE:特性节点,node.type == 2;
  • Node.TEXT_NODE:文本节点,node.type == 3;
  • Node.COMMENT_NODE:注释节点,node.type == 8;
  • Node.DOCUMENT_NODE:文档节点,node.type == 9;
  • 其他节点类型(较少用):
  • Node.CDATA_SECTION_NODE :node.type == 4;
  • Node.ENTITY_REFERENCE_NODE:node.type == 5;
  • Node.ENTITY_NODE:node.type == 6;
  • Node.PROCESSING_INSTRUCTOR_NODE:node.type == 7;
  • Node.DOCUMENT_TYPE_NODE:文档类型节点,node.type == 10;
  • Node.DOCUMENT_FRAGMENT_NODE:文档片段节点,node.type == 11;
  • Node.NOTATION_NODE:节点,node.type == 12;
2.其他与node有关的属性、方法;
  • .node.type:节点类型;
  • .nodeName:标签名;
  • .nodeValue:节点值,元素节点始终为 null ;
  • .childNodes:节点集;
  • .parentNode:父节点,有且只有一个;
  • .previousSibling / .nextSibling:检测是否含有同胞节点;
  • .firstChild:第一个子节点;
  • .lastChild:最后一个子节点;
  • .ownerDocument:文档节点,一个HTML有且只有一个;
  • .childNode.item():访问某一个子节点;
  • .hasChildNodes():检测是否含有子节点;
  • .appendChild( newNodeName ):添加子节点;
  • .insertBefore( newNodeName,referenceNodeName ):在指定位置插入节点节点;
  • .replaceChild( newNodeName,replaceNodoName ):替换指定的节点;
  • .removeChild( oldNodeName ):移除指定的节点;
  • .cloneNode( true,false ):克隆节点(只克隆特性,节点,避免bug,事先得移除事件处理程序)。当参数为 true 时,执行深克隆,克隆其自身和其所有子节点;当参数为 false时,执行浅克隆,只克隆其自身,不包含子节点,这种方式克隆之后的元素是一个孤儿,只能手动添加到文档树结构中

注:如遇错误,请加以指正;

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我明白了。针对您的问题,下面是一些 JS 实现节点操作的方法: 1. 添加方法:可以使用 `appendChild()` 方法将一个节点添加到另一个节点的末尾;也可以使用 `insertBefore()` 方法将一个节点插入到指定节点的前面。 示例代码: ```javascript var elem = document.createElement('div'); var parentElem = document.getElementById('parent'); // 添加到末尾 parentElem.appendChild(elem); // 插入到指定节点前面 var siblingElem = document.getElementById('beforeElem'); parentElem.insertBefore(elem, siblingElem); ``` 2. 移除方法:使用 `removeChild()` 方法将一个节点从其父节点中移除。 示例代码: ```javascript var elemToRemove = document.getElementById('elem'); elemToRemove.parentNode.removeChild(elemToRemove); ``` 3. 替换方法:使用 `replaceChild()` 方法将一个节点替换成另一个节点。 示例代码: ```javascript var elemToReplace = document.getElementById('elem1'); var replacementElem = document.createElement('span'); elemToReplace.parentNode.replaceChild(replacementElem, elemToReplace); ``` 4. 插入方法:使用 `insertAdjacentHTML()` 方法向节点前面或后面插入 HTML 代码。 示例代码: ```javascript var parentElem = document.getElementById('parent'); // 插入到节点前面 parentElem.insertAdjacentHTML('beforebegin', '<div>前面插入的内容</div>'); // 插入到节点后面 parentElem.insertAdjacentHTML('afterend', '<div>后面插入的内容</div>'); ``` 5. 复制方法:可以使用 `cloneNode()` 方法复制一个节点。 示例代码: ```javascript var elemToCopy = document.getElementById('elem'); var clone = elemToCopy.cloneNode(true); // true 表示复制所有子节点 // 添加到父节点中 elemToCopy.parentNode.appendChild(clone); ``` 希望这些代码可以帮到您,有什么不懂的地方可以再问我哦!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

男孩子小杨

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值