JavaScript——节点Node和元素操作（JS和jQuery对比）

节点Node

    DOM由节点组成

    节点类型（12种）

        元素类型 1

        文本类型 3

        注释类型 8

        文档类型 9

    节点和元素的关系：

        每个元素一定是节点 节点不一定是元素 元素只是节点的一种

    获取节点类型 nodeType

        用法：node.nodeType

        返回值：数字代表的节点类型

    获取父节点所有的子节点    childNodes

        用法：fatherNode.childNodes

        ① 获取的子节点以 nodeList 类数组对象的形式

        ② 只是获取父节点的直接子节点，不会去获取孙子节点

        注：

            高级浏览器    会把空白折叠现象形成的空白符当做一个文本类型的节点

            IE浏览器        不会出现空白折叠的文本类型节点

    兼容IE浏览器和高级浏览器获取父节点所有的子节点的解决办法：

function getChildNodes (dom) {
	var arr = [];
	for (var i = 0; i < dom.childNodes.length; i++) {
		if (dom.childNodes[i].nodeType === 3) {
			var reg = /^\s+$/;
			if (reg.test(dom.childNodes[i].data)) {

			}else {
				arr.push(dom.childNodes[i])
			}
		}else{
			arr.push(dom.childNodes[i])
		}
	}
	return arr;
}

    节点属性

        1. 获取节点的名      node.nodeName

        2. 获取节点的值      node.nodeValue

	nodeName	nodeValue
元素类型	标签名的大写	null
文本类型	#text	文本内容
注释类型	#comment	文本内容

    节点关系

        1. 获取父节点第一个子节点        fatherNode.firstchild

        2. 获取父节点最后一个子节点     fatherNode.lastchild

        注：

            如果要用这些方法，输出的结果绝大可能是空白折叠节点（除非将DOM结构中全部的空白折叠节点去除掉，才会输出正常的结果，才能获取正常的第一个或者最后一个子节点）

        3. 获取父节点    childNode.parentNode

        4. 获取上一个兄弟    node.previousSibling

        5. 获取下一个兄弟    node.nextSibling

JS中的元素操作

    创建元素

        document.createElement(type)

            参数：type 元素类型（标签名）字符串

            返回值：创建出来的元素

    添加元素

        在父元素的最后添加元素

        fatherNode.appendChild(child)

            参数：    child 要被添加到父元素的子元素

            返回值： 被添加到父元素的子元素child

    插入元素

        在父元素中在参照的元素前面插入元素

        fatherNode.insetBefore(要插入的元素,参照的元素)

            参数：

            第一个参数：要插入的元素

            第二个参数：参照的元素

            返回值：要插入的元素

    替换元素

        在父元素中替换子元素

        fatherNode.replaceChild(newChild，oldChild)

            参数：

            第一个参数：newChild 要替换上的元素

            第二个参数：oldChild 要被替换下的元素

            返回值：newChild 要替换上的元素

    克隆元素

        node.cloneNode(boolean)

            参数：唯一参数 Boolean

            true 深复制 连子节点一块复制

            false 浅复制 只复制自身

            返回值：克隆的元素

    移除元素

        在父元素中移除子元素

        fatherNode.removechild(child)

            参数：child 要被移除的节点

            返回值：child 要被移除的节点

jQuery的元素操作

    创建元素

        1. 创建元素$("<li></li>")

        2. 将js对象转为jQuery对象 $(document.body)

    添加元素

        1. 在父元素内部的后面添加子元素 append

        fatherNode.append(selector | jQuery | element)

            参数：

            fatherNode 被添加的父元素

            括号里面是 要添加的子元素

        2. 把子元素往父元素内部的后面添加 appendTo

        childNode.appendTo(selector | jQuery | element)

            参数：

            childNode 要添加的子元素

            括号里面是 父元素

        3. 在父元素内部的前面添加子元素 prepend

        fatherNode.prepend(selector | jQuery | element)

            参数：

            fatherNode 被添加的父元素

            括号里面是 要添加的子元素

        4. 把子元素往父元素内部的前面添加 prependTo

        childNode.prependTo(selector | jQuery | element)

            参数：

            childNode 要添加的子元素

            括号里面是 父元素

插入元素

        1. 在node2的前面插入node1 insetBefore

        node1.insetBefore(node2)

            参数：

                node2可以是 selector | jQuery | element

           第一个元素 要插入的元素

           第二个元素 被插入的元素

        2. 在node2的后面插入node1 insetAfter

        node1.insetAfter(node2)

            参数：

                node2可以是selector | jQuery | element

                第一个元素 要插入的元素

           第二个元素 被插入的元素

        3. 在node1的前面插入node2 before

        node1.before(node2)

            参数：

                node2可以是 selector | jQuery | element

           第一个元素 被插入的元素

           第二个元素 要插入的元素

        4. 在node1的后面插入node2 after

        node1.after(node2)

            参数：

                node2可以是selector | jQuery | element

           第一个元素 被插入的元素

           第二个元素 要插入的元素

    包裹元素

        1. 在node1的外层用node2包裹 wrap

        node1.wrap(node2)

            参数：

                  node2可以是selector | jQuery | element

            第一个元素 被包裹的元素

            第二个元素 包裹的元素

        2. 去掉第一个元素直接外层元素 unwrap

        node.unwrap()

            参数：

            第一个元素 被包裹的元素