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

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);//克隆元素本身及后代以及绑定的事件

巴特西

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

最新文章

热门文章