JavaScript和jQuery的DOM操作

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.gxlcms.com）！