原生JS和jQuery中基本的节点操作

时间:2022-04-11 00:05:13

js中节点操作
**document.createElement()**
用来生成网页元素节点,参数为元素的标签名;

**document.createTextNode()**
用来生成文本节点,参数为所要生成的文本节点的内容;

**node.appendChild()**
接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点;

**node.hasChildNodes()**
返回一个布尔值,表示当前节点是否有子节点

**node.removeChild()**
接受一个子节点作为参数,用于从当前节点移除该子节点

**node.cloneNode()**
用于克隆一个选中的节点。
它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。
**注意:** 不会克隆绑定到该元素上的事件;

**node.innerHTML**
返回该元素包含的 HTML 代码。该属性可读写,常用来设置某个节点的内容;(不属于W3C DOM规范)

**node.innerText**

返回该元素包含的内容。该属性可读写

**node.nextElementSibling**
返回紧跟在当前节点后面的第一个同级Element节点,如果当前节点后面没有同级节点,则返回null;

**node.previousElementSibling**
返回紧跟在当前节点前面的第一个同级Element节点,如果当前节点前面没有同级节点,则返回null;

**node.parentElement**
返回当前节点的父级Element节点;

**node.childNodes**
返回一个NodeList集合,成员包括当前节点的所有子节点(注意空格回车也算)。

**node.firstChild**

返回树中节点的第一个子节点,如果节点是无子节点,则返回 `null。`

**node.lastChild**

返回该节点的最后一个子节点,如果该节点没有子节点则返回`null`。

属性操作
**node.getAttribute()**
返回当前元素节点的指定属性。如果指定属性不存在,则返回null;

**node.setAttribute()**
为当前元素节点新增属性。如果同名属性已存在
**node.hasAttribute()**
返回一个布尔值,表示当前元素节点是否包含指定属性

**node.removeAttribute()**
从当前元素节点移除属性

jq中节点操作

创建节点 $('<div></div'> 创建一个div标签

 添加节点

append appendTo 在被选元素的结尾插入内容 父.append(子) 子.appendTo(父)
prepend prependTo 在被选元素的开头插入内容 父.prepend(子) 子.prependTo(父)
before insertBefore 在被选元素之后插入内容 后.before(前) 前.insertBefor(后)
after insertAfter 在被选元素之前插入内容 前.after(后) 后.insertAfter(前)

```

 清空节点与删除节点
empty:清空指定节点的所有元素,自身保留(清理门户)
remove:相比于empty,自身也删除(自杀)

 克隆节点

- 作用:复制匹配的元素
 复制$(selector)所匹配到的元素(深度复制)
cloneNode(true) //原生js cloneNode 不传参数 克隆标签本身,传参数true 克隆标签本身以及内容
返回值为复制的新元素,和原来的元素没有任何关系了。即修改新元素,不会影响到原来的元素。
$(selector).clone();//克隆元素本身及后代
$(selector).clone(true);//克隆元素本身及后代以及绑定的事件