本文目录
- 关于js循环执行removeChild 只移除其中一部分的问题
- JavaScript的父节点是什么意思
- 各位高手！能不能重新添加一个被removeChild()删除的div，如果能该怎么实现这个div是在html里面写的！
- SCRIPT5007: 无法获取未定义或 null 引用的属性“removeChild“
- 如何在html里删除一个div
- jquery删除父元素
- javascript 如何删除对应的节点
- js怎样添加、移除、移动、复制、创建和查找节点
- jquery中有哪些dom操作
- 怎么写一段js代码能删除页面一段内容
关于js循环执行removeChild 只移除其中一部分的问题
这个问题一般是疏忽的问题，通过getElementsByName获取到的是一个集合，而你循环删除的时候，把第一个元素，也就是obj删除了之后，它后面的另一个元素会位置提升到第一个，这时候，循环过来之后，删除第2个元素obj,而这个元素已经实际的位置成了obj所以他就找不到了，所以，循环应该这么写
例子：
《script type=“text/javascript“》function del(){ var obj = document.getElementsByName(“GoodsBrowsed“); for(var i = obj.length-1;i》=0;i--){ obj[i].parentNode.removeChild(obj[i]); }}《/script》来源：网页链接
JavaScript的父节点是什么意思
这个是关于DOM的知识里的内容，是一个节点的parentNode成员
e.g. aNode.parentNode返回父节点
最常用的用法就是node.parentNode.removeChild(node)
删除某节点node
各位高手！能不能重新添加一个被removeChild()删除的div，如果能该怎么实现这个div是在html里面写的！
《script》
function dd(){
document.getElementById(’dd’).style.display=’none’;
document.getElementById(’dd’).innerHTML=““;
document.getElementById(’dd’).removeNode();
}
《/script》
《div id=“dd“》
我的DIV
《/div》
《input type=’button’ value=’dd’ onclick=“dd()“/》
SCRIPT5007: 无法获取未定义或 null 引用的属性“removeChild“
这种情况很多时候是文件加载不全或编码不对。这和网络状况、js文件路径、js文件大小、js文件编码等有关。得一项项检查。以前有遇到过使用相对当前页面路径写引用的js路径造成js文件载入不全（在DT里看只载入了一部分），后改为相对网站根目录才恢复，但是有的服务器上又没有这样的情况，不知是何种原因。也有一次是因为js文件的编码和HTML文件的编码不一致，导致问题的出现。当时js文件的代码是从网页上粘贴来的，js文件编码是ansi，网上贴来的是utf-8，网站页面使用的是GBK，贴进js文件里后中文注释变乱码，但是测试时没问题，放到服务器上问题后不定时出现，有时候可以使用js，有时候就报语法错或udefined或null错，后手工一个个字母敲进js文件才搞定。
个人经验，希望对你有帮助。
如何在html里删除一个div
例
HTML：
《div id=“outside“》
《div id=“inside“》《/div》
《/div》
删除id为inside的div
方法一：document.getElementById(’inside’).remove()
方法二：document.getElementById(’outside’).removeChild(document.getElementById(’inside’))
jquery删除父元素
jquery不能删除父元素，只能删除父元素下面的子元素。下面是具体步骤：
所需条件：
var obj=document.getElementById(“id“);得到的是dom对象，对该对象进行操作的时候使用js方法。
var obj=$(“#id“);得到的是jquery对象，对该对象进行操作的时候使用jquery方法。
1.对于上面获得的对象进行遍历：
(1).js方法 for(vat i=0;j《obj.length;i++){ obj[i] 来获得对应的某一个元素}
(2).jquery方法 $(“#id”).each(function(){ $(this) 来获得对应的某一个元素})；
2.获取满足条件的元素的父元素：
(1).js方法：var o=obj[i].parentNode
(2).jquery方法：var o=$(this).parent()
3.得到父元素后，可以删除该父元素的子元素：
(1).js方法：o.removeChild(obj[i])；
(2).jquery方法：o.empty()
javascript 如何删除对应的节点
javascript删除节点可以用removeChild，只要找到此节点，用removeChild(节点)就可以了。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
js怎样添加、移除、移动、复制、创建和查找节点
添加节点append；移除节点removeChild；移动节点：var sdds=document.getElementById；创建节点createTextNode()；查找节点：document.getElementsByTagName。
其他方法：
创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
查找
getElementsByTagName() //通过标签名
称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
实现一个函数clone，可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。
jquery中有哪些dom操作
DOM操作的分类
DOM Core 并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。
它的用途并非仅限与处理网页，也可以用来处理任何一种使用标记语言编写出来的文档。例如XML
javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法，这些都是Dom Core的组成部分。
使用DOM Core来获取表单对象的方法
document.getElementByTagName(“from“);
使用DOM Core来获取某元素的src属性的方法：
element.getAttribute(“src“);
构建DOM元素
《body》
《p title=“选择你最喜欢的水果“》你最喜欢的水果是?《/p》
《ul》
《li title=’苹果’》苹果《/li》
《li title=’橘子’》橘子《/li》
《li title=’菠萝’》菠萝《/li》
《/ul》
《/body》
使用jQeruy在文档数上查找节点非常容易，可以通过在第2章介绍的jQuery选择器来完成。
1.查找元素节点
获取元素节点并打印出它的文本内容，jQuery代码如下:
var $li = $(“ul li:eq(1)“); 获取《ul》里第2个《li》 节点
var li_txt=$li.text(); //获取第2个《li》元素节点的文本内容
alert(li_txt); //打印文本内容，这里会打印出橘子
以上代码获取了《ul》元素里第2个《li》节点，并将它的文本内容“橘子“打印出来
2.查找属性节点
利用jQuery 选择器查找到需要的元素后，就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个，也可以是两个。当参数是一个时，则是要查询的属性的名字。
获取属性节点并打印出它的文本内容，jQuery代码如下：
var $para = $(“p“); //获取《p》节点
var p_txt=$para.attr(“title“); //获取《p》元素节点属性title
alert(p_txt); //打印title属性值
创建节点
在dom 操作中，常常需要动态创建HTML内容，是文档在浏览器里面的呈现效果发生变法，并且达到各种各样的人机交互的目的。
1. 创建元素节点
例如要创建两个《li》元素节点，并且要把它们作为《ul》元素节点的子节点添加到DOM节点树上。
(1)创建两个《li》新元素。
(2)将这两个新元素插入文档中。
第(1)个步骤可以使用jQuery的工厂函数$()来完成。
$(html);
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个《li》元素,jQuery代码如下:
$(“ul“).append($li_1); //添加到《ul》节点中，使之能在网页中显示
$(“ul“).append($li_2); //可以采取链式写法:$(“ul“).append($li_1).append($li_2);
注意事项：
(1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。
(2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。
例如创建一个《p》 元素，使用$(“《p/》“)或者(“《p》《/p》“),但是不要使用$(“《p》“)或者大写的$(“《P/》“);
2.创建文档节点
var $li_1= $(“《li》香蕉《/li》“); //创建一个《li》 元素，包括元素节点和文本节点，香蕉就是创建的文本节点
var $li_2 =$(“《li》雪梨《/li》“); //创建一个《li》 元素，包括元素节点和文本节点，雪梨就是创建的文本节点。
$(“ul“).append($li_1); //添加到《ul》节点中，使之能在网页中显示
$(“ul“).append($li_2); //添加到《ul》节点中，使之能在网页中显示
以上代码所示，创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将他们添加到文档中就可以了。
注意事项：
无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。
例如$(“《li》《em》这是《/em》《b》一个《/b》《a href=’#’》复杂的组合《/a》《/li》“);
3.创建属性节点
创建属性及节点与创建文本节点类似，也是直接在创建元素节点时一起创建。
jQuery代码如下:
var $li_1=$(“《li title=’香蕉’》香蕉《/li》“);//创建一个《li》元素，包含元素节点，文本节点和属性节点 其中title=’香蕉’就是创建的属性节点
var $li_2=$(“《li title=’雪梨’》雪梨《/li》“);//创建一个《li》元素 包括元素节点，文本节点和属性节点，其中title=‘雪梨’就是创建的属性节点
$(“ul“).append($li_1);
$(“ul“).append($li_2); //添加到《ul》 节点中，使之能在网页中显示
插入节点
动态创建HTML元素并没有世界用处，还需要将新创建的元素插入文档中，将新创建的节点插入文档最简单的办法是，让它成为这个文档的某个节点的子节点。
使用append(),它会在元素内部追加新创建的内容。
jQuery中还有提供了其他几种插入节点的方法。
方法 描述 示例
append() 向每个匹配的元素内部追加内容 HTML代码
《p》我想说:《/p》
jQuery代码: $(“p“).append(“《b》你好《/b》“); 结果: 《p》我想说:《b》你好《/b》《/p》
appendTo() 将所有匹配的元素追加到指定的元素中，
实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中 HTML 代码 《p》我想说:《p》 jQuery代码： $(“《b》你好《/b》“).appendTo(“p“); 结果: 《p》我想说：《b》你好《/b》《/p》
prepend() 向每个匹配的元素内部前置内容 HTML代码: 《p》我想说:《/p 》 jQuery代码: $(“p“).prepend(“《b》你好《/b》“);结果《p》《b》你好《/b》我想说:《/p》
prependTo() 将所有匹配的元素前置到指定的元素中，实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中。HTML 代码 《p》我想说:《/p》 jQuery代码: $(“《b》你好《/b》“).prependTo(“p“); 结果《p》《b》你好《/b》我想说《p》
after() 在每个匹配的元素之后插入内容 HTML代码 《p》我想说:《p》 jQuery代码: $(“p“).after(“《b》你好《b》“); 结果: 《p》我想说:《/p》《b》你好《/b》
insertAfter() 将所有匹配的元素插入到指定元素的后面，与after()颠倒了 HTML代码《p》 我想说《/p》 jQuery代码：$(“《b》你好《/b》“).insertAfter(“p“); 结果《p》我想说：《/p》《b》你好《/b》
before() 将每个匹配的元素之前插入内容 HTML代码 《p》我想说:《/p》 jQuery 代码：$(“p“).before(“《b》你好《/br》“); 结果《b》你好《/b》我想说:《/p》
insertBefore() 将所有匹配的元素插入到指定的元素的前面，实际上，使用该方法是颠倒了常规的before的操作 $(“《b》 你好《/b》“).insertBefore(“p“); 结果:《b》你好《/b》《p》我想说:《/p》
删除节点
如果文档中某一个元素多余，那么应将其删除，jQuery提供了两种删除节点的方法，即remove() 和empty()
1.remove()方法
作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式类筛选元素。
例如删除图3-11中《ul》节点中的第2个《li》元素节点，jQuery代码如下:
$(“ul li:eq(1)“).remove();//获取第2个《li》元素节后，将它从网页中移除
当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法得放回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
下面的jQuery代码说明元素用remove()方法删除后，还是可以继续使用的。
var $li = $(“ul li:eq(1)“).remove();//获取第2个《li》元素节点后，将它从网页中删除
$li.appendTo(“ul“);//把刚删除的节点又重新添加到《ul》元素里
可以直接使用appendTo()方法得特性来简化以上代码：
$(“ul li:eq(1)“).appendTo(“ul“);
//appendTo()方法也可以用来移动元素
//移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。
另外remove()方法也可以通过传递参数来选择性地删除元素
$(“ul li“).remove(“li[title!=’菠萝’]“); //将《li》元素属性title不等于“菠萝“ 的《li》元素删除。
2.empty()方法
严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后台节点。
$(“ul li:eq(1)“).empty(); //获取第2个《li》元素节点后，清空此元素里的内容，注意是元素里面。
使用firebud查看橘子节点发生变化 《li title=’橘子’/》
3.复制节点
复制节点也是常用的DOM操作之一，例如购入车，用户不仅可以通过单击商品下方的选择按钮购买相应的产品，也可以通过鼠标拖动商品
并将其放到购物车中，这个商品拖动功能就是用的复制节点，将用户选择的商品所处的节点元素复制一次，并将其跟随鼠标移动，从而达到以下购物车的效果
$(“ul li“).click(function(){
$(this).clone().appendTo(“ul“);//复制当前单击的节点，并将它追加到《ul》元素中
});
//在页面中点击“菠萝“后，列表最下方出现新节点“菠萝“。
$(this).clone(true).appendTo(“body“);//注意参数true
在clone()方法传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件，因此该元素的副本也同样具备复制功能。
替换节点
如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和 replaceAll()
replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。
例如要将网页中《p title=“选择你最喜欢的水果“》你最喜欢的水果是?《/p》 替换成《strong》 你最不喜欢的水果是?《/strong》 可以使用如下jQuery代码：
$(“p“).replaceWith(“《strong》你最不喜欢的水果是?“);
也可以使用jQuery中另一个方法repalceAll()来实现，该方法与replaceWith()方法得作用相同，只是颠倒了replaceWith的操作。
$(“《strong》你最不喜欢的水果是?《/strong》“).replaceAll(“p“);
注意：
如果在替换之前，已经为元素绑定了事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
4. 包裹节点
如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，wrap()，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。
jQuery代码如下：
$(“strong“).wrap(“《b》《/b》“);//用《b》标签把《strong》 元素包裹起来
得到的结果如下：
《b》《strong title=“选择你最喜欢的水果“》 你最喜欢的水果是?《/strong》《/b》
1.wrapAll()方法
该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法，wrap()方法将所有的元素进行单独的包裹。
$(“strong“).wrap(“《b》《/b》“);
2.wrapinner()方法
该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来，例如可以使用它来包裹《strong》 标签的子内容:jQuery代码如下：
$(“strong“).wrapInner(“《b》《/b》“);
运行代码后，发现《strong》标签内的内容被一对《b》标签包裹了。
《strong title=“选择你最喜欢的水果“》《b》你最喜欢的水果是?《/b》《/strong》
属性操作
在jQuery 中，用attr() 方法来获取和设置元素属性，removeAtt() 方法来删除元素属性。
1.获取属性和设置属性
如果要获取《p》元素的属性title,那么只需要给attr()方法传递一个参数，即属性名称。
var $para=$(“p“); //获取《p》节点
var p_txt=$para.attr(“title“); //获取《p》元素节点属性title
如果要设置《p》元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数即属性名称和对应的值。
jQuery代码如下：
$(“p“).attr(“title“,“your title“);//设置单个的属性值
//为同一个元素设置多个属性值
$(“p“).attr({“title“:“your title“,“name“:“test“});//将一个 “名值“ 形式的对象设置为匹配元素的属性。
jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的，例如上面的attr()方法，即能设置元素属性的值，也能获取元素属性的值，类似的还有html(),text(),height(),width(),val(),css()等方法。
2.删除属性
有时候需要删除文档元素的特定属性，可以使用removeAttr()方法
删除《p》元素的title属性
$(“p“).removeAttr(“title“);
操作样式
获取样式和设置样式
HTML代码如下：
《p class=“myclass“ title=“选择你最喜欢的水果“》 你最喜欢的水果是?《/p》
class 也是《p》元素的属性，因此获取class 和设置class都可以使用attr()方法。
var p_class = $(“p“).attr(“class“);//获取《p》元素的class
可以使用attr()方法来设置《p》元素的class，jquery代码如下：
$(“p“).attr(“class“,“high“);//设置《p》元素的class为high
他是将原来的class替换为class，而不是在原来的基础上追加新的class
追加样式
jQuery提供了专门的addClass()方法来追加样式，为了使例子更为容易理解，首先在《style》标签里添加另一组样式
《style》
.high{
font-weight:bold;
color:red;
}
.another{
font-style:italic;
color:blue;
}
//在网页中追加class类的按钮.
$(“input:eq(2)“).click(function(){
$(“p“).addClass(“another“); //给《p》元素追加“another“类
})
attr() 和addClass()的区别
用途 追加样式 设置样式
对同一个网页元素操作 《p》test《/p》
第一次使用方法 $(“p“).addClass(“high“); $(“p“).attr(“class“,“high“);
第1次结果 《p class=“high“》test《/p》
再次使用方法 $(“p“).addClass(“another“); $(“p“).attr(“class“,“another“);
结果 《p class=“high another“》 test《/p》 《p class=“another“》 test《/p》
3移除样式
如果单击某一个按钮时，删除class的某个值，那么可以使用addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class
如下jQuery代码来删除
$(“p“).removeClass(“high“);//移除《p》元素中为“high“的class
//如果要把《p》元素的两个class都删除，就要使用removeClass()
$(“p“).removeClass(“high“).removeClass(“another“);
//jquery提供了更简单的方法
$(“p“).removeClass(“high another“);
另外，还可以使用removeClass()方法得一个特性来完成同样的效果，它不带参数的时候会将 class的值全部删除.
$(“p“).removeClass();
切换样式
$toggleBtn.toggle(function(){
//3
},function(){
//4
});
toggle()方法此处的作用是交替执行代码3和4两个函数，如果元素原来是显示的，则隐藏它，如果隐藏的，则显示它，此时，toggle()方法主要是控制行为上的重复切换。
判断是否含有某个样式
hasClass可以用来判断元素中是否有某个class，如果有，则返回true，否则返回false
$(“p“).hasClass(“another“);
//jQuery内部实际上是调用了is()方法来完成这个功能的，该方法等价于
$(“p“).is(“.another“)
1.设置和获取HTML，文本和值
html()方法
$(“P“).html();//获取元素的html代码
2.text() 方法
$(“p“).text(); //获取《p》元素的文本内容
//text()可以对文本内容设置内容
$(“p“).text(“你最喜欢的水果是?“); //设置《p》元素的文本内容
3.val()方法
val()方法取值
通过上面的例子可以发现val()方法不仅能设置元素的值，同时也能获取元素的值，另外val() 方法还有另外一个用处，就是它能select(下拉列表框)，checkbox(多选框)和radio(单选框) 相应的选项被选中，在表单操作中会经常用到。
//使用val设置选中项
$(“#single“).val(“选择2号“);
//如果要使下拉列表的第2项和第3项被选中
$(“#multiple“).val([“选择2号“，“选择3号“]); //以数组的形式赋值
使多个文本框被选中
$(“:checkbox“).val([“check2“,“check3“]);
$(“:radio“).val([“radio2“]);
也可以使用attr()方法来实现同样的功能
$(“#single option:eq(1)“).attr(“selected“,true); //设置属性selected
$(“[value=radio2]:radio“).attr(“checked“,true);
1 children()方法
该方法用于取得匹配元素的子元素集合
var $body = $(“body“) .children();
var $p=$(“p“).children();
var $ul = $(“ul“).children();
alert($body.length);
alert($p.length);
alert($ul.length);
2.next方法
该方法用于取得匹配元素后面紧邻的同辈元素。
从dom树的结构可以知道《p》元素的下一个同辈节点时《ul》，因此可以通过next() 方法来获取《ul》 元素
var $p1 = $(“p“).next();//取得紧邻《p》元素后的同辈元素
《ul》
《li title=’苹果’》苹果《/li》
《li title=’橘子’》橘子《/li》
《li title=’菠萝’》菠萝《/li》
《/ul》
prev()方法
该方法用于取得匹配元素前面紧邻的同辈元素。
从DOM树的结构中可以知道《ul》元素的上一个同辈节点时《p》，因此可以通过prev()方法类获取《p》元素
var $ul = $(“ul“).prev(); //取得紧邻《ul》元素前得同辈元素
得到的结果将是:
《p title=“选择你最喜欢的水果“》你最喜欢的水果是?《/p》
4.siblings()方法
该方法用于取得匹配元素前后所有的同辈元素。
在第1章导航栏的例子中有段代码如下：
$(“.has_children“).click(function() {
$(this).addClass(“highlight“); //为当前元素增加highlight类
.children(“a“).show().end()
.siblings().removeClass(“highlight“)
.children(“a“).hide();
})
怎么写一段js代码能删除页面一段内容
使用dom操作element.removeChild()可以实现js代码删除页面一段内容。
假设有以下jsp内容：
《body》《div》要删除的《/div》《/body》
使用代码删除div标签：
document.body.removeChild(document.body.childNodes)。
更多资料参考W3C：
http://www.w3school.com.cn/xmldom/dom_nodes_remove.asp
