JavaScript和jQuery的DOM操作
- 黄舟原创
- 2016-12-21 15:11:381479浏览
001 1 , 创建元素节点
002 传统的javascript方法，创建元素节点
003 var a = document.createElement("p");
004 jQuery中创建节点的方法是：
005 $('< p>< /p>');
006 和createElement()一样，创建出来的新元素节点不会被自动添加到文档里。
007 如果想把它添加到文档里，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。
008 比如：
009 var a = $('< p>< /p>');
010 $('body').append(a);//添加到body元素的最后.
011
012
013 2,创建文本节点:
014 传统的javascript方法，创建文本节点
015 var b = document.createTextNode("my demo");
016 通常创建文本节点和创建元素节点配合使用.
017 比如：
018 var mes = document.createTextNode("hello world");
019 var container = document.createElement("p");
020 container.appendChild(mes);
021 document.body.appendChild(container);
022
023 而在jQuery中创建节点就不必那么麻烦了：
024 $('< p>hello world< /p>');
025 和createElement()一样，创建出来的新元素节点不会被自动添加到文档里。
026 如果想把它添加到文档里，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。
027 比如：
028 var a = $('< p>hello world< /p>');
029 $('body').append(a);//添加到body元素的最后.
030
031 3,复制节点
032 传统的javascript方法，复制节点:
033 比如：
034 var mes = document.createTextNode("hello world");
035 var container = document.createElement("p");
036 container.appendChild(mes);
037 document.body.appendChild(container);
038 var newpara = container.cloneNode(true);//true和false的区别
039 document.body.appendChild(newpara );
040 注意：
041 true ： 是< p>aaaa< /p> 克隆。
042 false： 只克隆 < p>< /p> ，里面的文本不克隆。
043 可以用 firebug 看看。
044
045 在jQuery中复制节点：
046 var a = $('< p>hello world< /p>');
047 $('body').append(a);
048 var clone_a = a.clone();
049 $('body').append(clone_a);
050
051 和createElement()一样，复制出来的新元素节点不会被自动添加到文档里。
052 如果想把它添加到文档里，可以使用 jQuery中的 append()或者insertAfter()方法或者 before ()等方法。
053 另外还有一个注意：如果克隆后，id一样，不要忘记用.attr("id","new_id")来改变新的节点的ID。
054
055 4, 插入节点
056 传统的javascript方法，插入节点:
057 比如：
058 appendChild() :
059 给元素追加一个子节点， 新的节点 插入到 最后。
060 var container = document.createElement("p");
061 document.body.appendChild(container);
062
063 insertBefore() :
064 顾名思义，就是把一个新的节点插入到目标节点的前面。
065 Element.insertBefore( newNode , targerNode );
066
067 在jQuery中插入节点比javascript自带的多了很多,
068 比如：
069 .append()
070 .appendTo()
071 .prepend()
072 .prependTo()
073 .after()
074 .insertAfter()
075 .before()
076 .insertBefore()
077 所以对dom操作的简化也是jquery的亮点之一。
078
079
080 5, 删除节点
081 传统的javascript方法，删除节点:
082 比如：
083 var b = document.getElementById("b");
084 var c = b.parentNode;
085 c.removeChild(b);
086
087 在jQuery中的删除节点:
088 比如：
089 $('#test2').remove();
090
091 6, 替换节点
092 传统的javascript方法，替换节点:
093 比如：
094 Element.repalceChild( newNode , oldNode );
095 oldNode必须是Element的一个子节点。
096
097 在jQuery中的替换节点:
098 比如：
099 $("< p>替换 test1 ！ < /p>").replaceAll("#test1");
100
101 7 ,设置属性,获取属性
102 传统的javascript方法，设置属性,获取属性:
103 比如：
104 setAttribute();//设置
105 var a = document.createElement(“p”);
106 a.setAttribute("title","my demo");
107 不管以前有没有title属性，以后的值是 my demo。
108
109 getAttribute();//获取
110 var a =document.getElementById("cssrain");
111 var b = a.getAttribute("title");
112 获取的时候，如果属性不存在，则返回空，
113
114 在jQuery中的设置属性,获取属性:
115 比如：
116 $("#test1").attr({ "class" : "test" , "title" : "TestDemo!" });
117 $("#test1").attr("class");
118
119 8, 查找节点
120 查找节点对jQuery来说 简直是小菜一碟.
121 jQuery最引入关注的就是查找节点，也就是通常所说的选择器.
122 比如：
123 $('#id')
124 $('.class')
125 $('tag')
126 $('tag.class')
127 $('#id tag')
128 $('tag#id')
129 $('#id:visible')
130 $('#id .class')
131 $('.class .class')
132 ....
以上就是JavaScript和jQuery的DOM操作的内容，更多相关内容请关注PHP中文网（www.php.cn）！