JS 操纵DOM问题，删除一个指定属性的元素

redcn2004 2008-12-03 03:47:50

有以下HTML代码：

  <div level="1"></div>

<div level="1"></div>

<div level="2"></div>

<div level="2"></div>

<div level="3"></div>

<div level="2"><a></a></div>

<div level="2"><a></a></div>

<div level="1"></div>

要求用JS删除所有level为2的div元素以及其中包含的元素，请问JS该怎么写？

...全文

1098 17 打赏收藏转发到动态举报

写回复

用AI写文章

17 条回复

切换为时间正序

请发表友善的回复…

发表回复

redcn2004 2008-12-03

打赏
举报

[Quote=引用 11 楼 chinmo 的回复:]
HTML code<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script>
function deldiv(){
var div =document.getElementsByTagName("div");
var j=0;
var arr=new Array(div.length)
f…
[/Quote]
为什么要采用数组暂存呢？

redcn2004 2008-12-03

打赏
举报

[Quote=引用 14 楼 chinmo 的回复:]
引用 12 楼 redcn2004 的回复:
引用 5 楼 lu_huanling 的回复:
1楼的有点错误
改正

HTML code
<div level="1">111 </div>
<div level="1">2222 </div>
<div level="2">33333 </div>
<div level="2">44444444 </div>
<div level="3">5555555555 </div>
<div level="2"> <a>66666666666 </a> </div>
<div level="2"> <a>777777777 </a> </div>
<div level="1">9000 </div>
<script>
var aa = docum…
[/Quote]
在看呢，我现在正在分析代码呢

一把编程的菜刀 2008-12-03

打赏
举报

还是准备倒分的？
要是倒分的事先声明一下，让我们闪！

一把编程的菜刀 2008-12-03

打赏
举报

[Quote=引用 12 楼 redcn2004 的回复:]
引用 5 楼 lu_huanling 的回复:
1楼的有点错误
改正

HTML code
<div level="1">111 </div>
<div level="1">2222 </div>
<div level="2">33333 </div>
<div level="2">44444444 </div>
<div level="3">5555555555 </div>
<div level="2"> <a>66666666666 </a> </div>
<div level="2"> <a>777777777 </a> </div>
<div level="1">9000 </div>
<script>
var aa = document.getElementsByTagName("div")…
[/Quote]

你就没看到我发的？
只看他的？

一把编程的菜刀 2008-12-03

打赏
举报

[Quote=引用 10 楼 lu_huanling 的回复:]
4 楼的也会有错的.还有漏掉的.
改成下面的就很完美了

HTML code
<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script>
function deldiv(){
var div = document.getElementsByTagName("di…
[/Quote]

不错，这样重定义

redcn2004 2008-12-03

打赏
举报

[Quote=引用 5 楼 lu_huanling 的回复:]
1楼的有点错误
改正

HTML code
<div level="1">111</div>
<div level="1">2222</div>
<div level="2">33333</div>
<div level="2">44444444</div>
<div level="3">5555555555</div>
<div level="2"><a>66666666666</a></div>
<div level="2"><a>777777777</a></div>
<div level="1">9000</div>
<script>
var aa = document.getElementsByTagName("div");
var bb = new Array();
for(var i=0;i<aa.length;i+…
[/Quote]
这里的bb似乎是多余的

一把编程的菜刀 2008-12-03

打赏
举报

<div level="1">111</div>

<div level="1">2222</div>

<div level="2">33333</div>

<div level="2">44444444</div>

<div level="3">5555555555</div>

<div level="2"><a>66666666666</a></div>

<div level="2"><a>777777777</a></div>

<div level="1">9000</div>

<script> 

function deldiv(){

	var div =document.getElementsByTagName("div");

	var j=0;

	var arr=new Array(div.length)

	for(var i=0;i<div.length;i++)

	{ 

	var level=div[i].getAttribute('level')

		if(level=="2")

		{

			arr[j]=div[i];

			j=j+1;

		}

	}

	for(var k=0;k<=j;k++){

	arr[k].parentNode.removeChild(arr[k]);

	}

}

</script>

这样就可以一次删完
我再看看，为什么那样不能一次删完

lu_huanling 2008-12-03

打赏
举报

4 楼的也会有错的.还有漏掉的.
改成下面的就很完美了



<div level="1">111</div>

<div level="1">2222</div>

<div level="2">33333</div>

<div level="2">44444444</div>

<div level="3">5555555555</div>

<div level="2"><a>66666666666</a></div>

<div level="2"><a>777777777</a></div>

<div level="1">9000</div>

<script> 

function deldiv(){

    var div =  document.getElementsByTagName("div");

    for(var i=0;i<div.length;i++)

    {

        var level = div[i].getAttribute('level'); 

        if(level=="2")

        {

            div[i].parentNode.removeChild(div[i]); 

            div =  document.getElementsByTagName("div");

            i=i-1;

        }

    }

}

deldiv();

</script>

redcn2004 2008-12-03

打赏
举报

[Quote=引用 3 楼 bluefcxt 的回复:]
div没有level这个属性能取出来么
[/Quote]
这是是自己添加的一个属性

阿云ivan 2008-12-03

打赏
举报

那是跟索引的，所以每次只删两个，要用递归

阿云ivan 2008-12-03

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Untitled Page</title>

</head>

<body>

    <div>

        <div level="1">

            a

        </div>

        <div level="1">

            b

        </div>

        <div level="2">

            c2

        </div>

        <div level="2">

            d2

        </div>

        <div level="3">

            e

        </div>

        <div level="2">

            f2

        </div>

        <div level="2">

            g2

        </div>

        <div level="1">

            h

        </div>

    </div>

    <input type="button" value="del Div Level=2" onclick="delLevelDiv('2')" />

</body>

</html>



<script type="text/javascript">

function delLevelDiv(level)

{

    var divs=document.getElementsByTagName('div');

    if(divs.length==0) return;

    var j=0;

    for(var i=0;i<divs.length;i++)

    {

        if(divs[i].getAttribute('level')==level) j++;

    }

    if(j==0) return;

    

    for(var i=0;i<divs.length;i++)

    {

        var p=divs[i].parentNode;

        if(divs[i].getAttribute('level')==level) 

         p.removeChild(divs[i]);

    }

    divs=document.getElementsByTagName('div');

    if(divs.length>0) delLevelDiv(level);

    

}

</script>

一把编程的菜刀 2008-12-03

打赏
举报

汗！不知道怎么每次只删2个！倒！
我检查下，哪出了问题

lu_huanling 2008-12-03

打赏
举报

1楼的有点错误
改正



<div level="1">111</div>

<div level="1">2222</div>

<div level="2">33333</div>

<div level="2">44444444</div>

<div level="3">5555555555</div>

<div level="2"><a>66666666666</a></div>

<div level="2"><a>777777777</a></div>

<div level="1">9000</div>

<script>  

var aa =  document.getElementsByTagName("div");

var bb = new Array();

for(var i=0;i<aa.length;i++)

{ 

	var tt = aa[i].level; 

	if(tt=="2")

	{ 

		aa[i].outerHTML=""; 

		aa =  document.getElementsByTagName("div");

		i=i-1;

	}

} 

</script>

一把编程的菜刀 2008-12-03

打赏
举报

兼容IE和FF的：

<div level="1">111</div>

<div level="1">2222</div>

<div level="2">33333</div>

<div level="2">44444444</div>

<div level="3">5555555555</div>

<div level="2"><a>66666666666</a></div>

<div level="2"><a>777777777</a></div>

<div level="1">9000</div>

<script> 

function deldiv(){

	var div =  document.getElementsByTagName("div");

	for(var i=0;i<div.length;i++)

	{

		var level = div[i].getAttribute('level'); 

		if(level=="2")

		{

			div[i].parentNode.removeChild(div[i]); 

		}

	}

}

</script> 

<a href="javascript:" onclick="deldiv()">删除level为2的div元素以及其中包含的元素</a>

bluefcxt 2008-12-03

打赏
举报

div没有level这个属性能取出来么

一把编程的菜刀 2008-12-03

打赏
举报

<div level="1">111</div>

<div level="1">2222</div>

<div level="2">33333</div>

<div level="2">44444444</div>

<div level="3">5555555555</div>

<div level="2"><a>66666666666</a></div>

<div level="2"><a>777777777</a></div>

<div level="1">9000</div>

<script> 

function deldiv(){

	var div =  document.getElementsByTagName("div");

	for(var i=0;i<div.length;i++)

	{

		var level = div[i].level; 

		if(level=="2")

		{

			div[i].parentNode.removeChild(div[i]); 

		}

	}

}

</script> 

<a href="javascript:" onclick="deldiv()">删除level为2的div元素以及其中包含的元素</a>

lu_huanling 2008-12-03

打赏
举报



<div level="1">111</div>

<div level="1">2222</div>

<div level="2">33333</div>

<div level="2">44444444</div>

<div level="3">5555555555</div>

<div level="2"><a>66666666666</a></div>

<div level="2"><a>777777777</a></div>

<div level="1">9000</div>

<script>  

var aa =  document.getElementsByTagName("div");

for(var i=0;i<aa.length;i++)

{

	var level = aa[i].level; 

	if(level=="2")

	{

		aa[i].outerHTML="";

	}

}

</script>

JavaScript：定义行为和动作 (基于对象和事件驱动的客户端脚本语言；也是一种广泛应用于客户端Web开发的脚本语言) 基于对象：网页中的一切元素都是假象！不需要new，即可直接使用事件驱动：JavaScript的执行都是由事件引发解释执行：先读到的先执行，后读到的会替代先读的可以使用任何文本编辑工具编写 JavaScript 代码，然后由浏览器解释执行。 JavaScript常用于实现如下功能： |--控制文档的外观和内容； |--对浏览器的控制； |--与 HTML 表单的交互； |--与用户的交互； |--执行计算等。 1.单击事件：定义在按钮的开始标签中语法：onclick="js语句" 弹出警告：alert(‘字符串’) 强调：1.js区分大小写 2.字符串单双引号不区分 [removed]标签：页面中专门集中编写JavaScript的区域 js的方法定义：function方法名([参数列表]){ 方法体 [return 返回值] } 注意：js中的方法可以直接写在代码中，不需要“类”包裹使用方法：方法名()-->方法调用-->立即执行 2.js文件：网页外专门保存js脚本的文件--推荐强调：HTML、CSS、JS都要使用UTF-8编码保存(window系统) 使用js文件引入网页：[removed][removed] 强调：一旦定义src属性则其中的代码失效解释执行：语句也可以直接写在js文件中，边解释边执行 3.***调试*** |--①.只有在执行时，才会报错 |--②.错误信息，浏览器页面看不到--没效果 | 解决：控制台--（工具-->JavaScript控制台或F12） | 包含错误信息；指向错误位置的超链接 |--③.打桩：在指定变量位置输出变量或对象的内容 console.log(内容);-->出现在控制台-->日志 4.变量：js中的变量不需要提前指定类型，由赋值时动态决定所有的变量都用var声明 5.数据类型： |--String(字符串类型) |--Number(数字类型) |--Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该对象设置为false。其余都可以当true 6.数据类型的隐式转换： |--数字 + 字符串：数字转换为字符串 |--数字 + 布尔值：true转换为1，false转换为0 |--字符串 + 布尔值：布尔值转换为字符串true或false |--布尔值 + 布尔值：布尔值转换为数值1或0 7.数据类型转换函数：(方法前不需要对象调用的：全局函数) |--toString()：转换成字符串。所有数据类型均可转换为 string 类型； |--parseInt()：强制转换成整数。如果不能转换，则返回 NaN（not a number）； |--parseFloat()：强制转换成浮点数。如果不能转换，则返回 NaN(Not a Number) |--typeof()：查询数值当前类型。 |--isNaN()：判断是否为数字。返回 true：不是数字/false：是数字 | |--isNan(""):对空字符串不验证，直接返回false | |--如果输入的是字符串类型的数字，返回false--不能判断数据类型，只判断内容 | |--如果输入的是boolean，返回false。因为boolean可以和number类型直接做计算 | |--和任何数字计算都得NaN;和任何数字作比较都得false |--注：[removed]();节点输出，即在当前位置输出括号里的内容 *凡是从页面上进入js的都是字符串类型 8.查找元素：抓住根节点，就等于抓住整棵树网页的根节点：document对象要找元素，必须利用document对象（当前网页文件）精确查找某个ID的元素：document.getElementById(id名)； 9.null和undefined： |--null：一个特殊的值，表示“无值”--空对象。数据类型为Object |--undefined：表示声明了变量但从未赋值或者对象属性不存在 10.双等号（==）和全等号（===）： |--“==”为确定两个运算数是否相等，“==”运算符会进行类型转换。转换后运算数相等就返回true，否则返回false |--“===”不执行类型转换，即，只有在无需类型转换运算数就相等的情况下，才返回true，否则返回false |--附：if(null)、if(defined)、if(NaN)都相当于if(false) -----猜数字游戏----- 失去焦点时，判断猜对猜错获得焦点：onfocus 失去焦点：onblur 当事件就发生在获得内容的当前元素上： this直接获得当前内容对象。可以代替当前对象完成一切操作，拥有当前对象的所有属性前端优化：js中最好用三目运算代替if else 11.String： |--查找：x.indexOf(‘关键字’[，开始位置下标]) | 每次只查找第一次出现的位置 |--替换：x.replace(‘关键字’[,‘替换内容’])--不会修改原x字符串 | 每次只替换第一次找到的 |--查找和替换所有：while循环 | |--String 对象的常用方法有： |--x.toLowerCase()、x.toUpperCase()：大小写转换方法； |--x.charAt(index)：返回指定位置的字符； |--x.charCodeAt(index)：返回指定位置字符的Unicode编码； |--x.indexOf(findstr,index)、x.lastIndexOf(findstr,index)：获取指定字符； |--x.substring(start, end)：获取子字符串； |--x.replace(findstr,tostr)：替换子字符串； |--x.split(bystr)：拆分子字符串。 |--String与正则表达式 |--str.match(regExp);--查找str中匹配正则表达式的关键字 | 返回：如果没找到，返回null。若找到，返回1个数组，数组的每个元素是每个找到的匹配关键 | |--str.replace(regExp,"替换值")--替换str中所有匹配的关键字 | 强调：replace方法不改变元字符串，只能返回新字符串。必须用变量接收新字符串 | |--js中正则表达式语法：/正则表达式/[属性后缀]--其中属性后缀，g：全局匹配 i：忽略大小写(仅英文有效) 如果不适用模式匹配方式，将执行原文匹配结果：如果正则表达式写错，也将执行原文匹配 12.Array笔试题：js中数组声明方式： A new Array(7) B new Array(7，‘a’，true) C [7，'a',true]--js中所有[]都表示数组 D []--实例化一个空数组对象实例化空数组：var arr=[]; 特点：元素个数不限定，元素类型不限制 13.Array 对象的常用方法： |--1.join()方法--用于把数组中的所有元素放入一个字符串　 | eparato表示要使用的分隔符。如果省略该参数，则使用逗号作为分隔符 |--2.toString()方法--可把数组转换为字符串，并返回结果 |--3.concat()方法--用于连接两个或多个数组，该方法不会改变现有的数组 |--4.slice()方法--截取元素。根据给定的范围可从已有的数组中返回选定的元素 14.Function：js中一切都是对象，连方法都是1个对象！！笔试题：js中方法定义集中方式： A：function compare(a,b){return a-b;}---*可以任意地方声明方法* B：var compare=function(a,b){return a-b;} ---| --其实方法名也是方法对象的变量名;等号右边其实就是1个匿名方法对象 |--*必须在传递之前声明方法对象* C：var compare=new Function('a','b','return a-b') ---| --其实js底层就是new Function;构造函数中的参数都是字符串结论：所有的方法都是function类型的。 15.JavaScript中的所有事物都是对象，分为三类： |--简单对象：String、Number、Boolean |--组合对象：Array、Math、Date |--复杂对象：Function、Regex、Object等 16.Array排序： |--升序：function compare(a,b){return a-b;} |--降序：function compare(a,b){return b-a;} 比较器用法：arr.sort(比较器方法名); 遍历：for(var i=0;i元素的顺序 17.Array元素操作： |--arr.push(x);向数组增加1个新元素x（位于数组最后位置） |--arr.splice(开始位置，删除几个[,x1,x2,x3...]) |--arr.indexOf(x) 返回x在数组中的下标---经常用于判断元素是否存在。如返回-1，x则不在数组中 18.Number对象： |--x.toFixed(num):可把Number四舍五入为指定小数位数(num:0-20)的数字 |--x.toString():用于把一个 Number 对象转换为一个字符串，并返回结果 19.正则表达式对象:(专门用于查找和验证) reg.test(‘要验证的完整字符串’)匹配返回true，否则返回false 强调：如果正则表达式使用了^和$，必须完整匹配才行。反之则部分匹配 20.Date对象：（计算方法：先get，再计算，最后set回去） |--1.每个分量上都有一对get/set方法 |--2.命名：get|set年月日，单数；get|set时分秒，复数（s） |--3.除了日期从1开始到31结束外，其余都从0开始到-1结束 |--Date对象的常用方法 |--1.获取日期数据 getDate()、getDay()、getFullYear()等 |--2.修改日期数据 setDate()、setDay()、setFullYear()等 |--3.获取日期格式的字符串 toString()、toLocaleTimeString()、toLocaleDateString()等 21.argument参数：所有方法都隐藏的一个数组对象作用：不设置任何的形参的情况下，自动接收所有传入参数 arguments.length：获得参数个数 arguments[i]：获得每个参数--都要判断和类型转换 22.全局函数：不用任何对象点(.)就可以调用--可用于所有的 JavaScript 对象常用的全局函数有：parseInt/parseFloat、isNaN、eval、decodeURI/encodeURI等。 encodeURI和decodeURI： |--encodeURI：可把字符串作为 URI 进行编码 |--decodeURI：decodeURI()函数可对encodeURI()函数编码过的 URI 进行解码 eval() 函数可计算某个字符串，并执行其中的的JavaScript代码 23.BOM:操作浏览器窗口的对象模型。 --即浏览器对象模型，用来访问和操纵浏览器窗口，使 JavaScript 有能力与浏览器“对话” DOM：操作网页中元素对象的对象模型--即文档对象模型，用来操作文档 window对象的常用属性： |--document：窗口中显示的 HTML 文档对象 |--history：本次浏览过窗口的历史记录 | --前进：history.go(1);后退：history.go(-1);刷新：history.go(0); |--location：窗口文件地址对象（地址栏） |--event：事件对象 |--screen：屏幕对象 |--name：窗口名称 |--opener：打开当前窗口的 window 对象 |--navigator：有关浏览器的信息 |--cookieEnable：判断当前浏览器是否启用cookie |--userAgent:获得浏览器的名称和版本号 window 对象的常用方法有： |--alert();--警告框--只能点确认 |--confirm();确认框--可以选择确认或取消 |--prompt();对话框--用于显示可提示用户进行输入 |--window.open('url'[,'name'])：打开1个选项卡 |--window.close()：关闭当前选项卡 24.定时器：凡是网页中自动动态的效果都是用计时器实现的 |--周期性定时器：每隔一个时间段自动执行一次，循环执行 | |--setInterval() 启动-->用于启动一个周期性定时器 | 语法：timer=setInterval(方法名，间隔毫秒数) |--clearInterval() 停止-->用于停止一个周期性定时器语法：timer=clearInterval(timer) |--1次性定时器：先等待一段时间，再自动执行一次，自动结束 |--setTimeout() 启动-->用于启动一个一次性定时器 |--clearTimeout() 停止-->用于停止一个一次性定时器附： |--表单控件，读写内容：.value |--普通html元素，要想读写开始标签和结束标签之间的内容：[removed] 计时器：1.做什么事：方法； 2.一个变量：存计时器的线程号 3.何时启动计时器：事件 25.document：1.代表当前网页文档； 2.所有网页元素的根元素； 3.查找和操作元素，都要依靠document；节点：nodeName--标签名或属性名 DOM操作样式：对象.className属性等效于<标签class=""> DOM树：当前节点向上：txtObj[removed]（）向下：txtObj.getElementByTagName（） 26.表单中查找控件对象：document.getElementsByName('name属性') DOM增加新节点：两种方法创建新节点：document.creatElement('标签名') --此时新元素对象仅在内存中游离，页面看不见！添加新节点：找到父元素！ |--appendChild() 方法只能将新节点作为某节点的最后一个子节点 | --此时新元素追加到了父元素的末尾 |--parentNode.insertBefore()(新元素对象，A)--其中A为新元素要插入位置的后一位元素 DOM删除元素：node.removeChild(childNode)--node为父节点，childNode为要删除的节点 27.HTML DOM Select和Option对象： select对象：代表HTML表单中的一个下拉列表，每个元素中所有