JS操作DOM学习笔记1
[coolcode linenum="off" lang="html" download="test.html"]...
扫描右侧二维码阅读全文
08
2008/05

JS操作DOM学习笔记1

[coolcode linenum="off" lang="html" download="test.html"]

测试页面

test1

test2

test3

[/coolcode]
第一种删除test1段的方法
[coolcode linenum="off" lang="javascript" download="test.js"]
var text=document.getElementsByTagName('p')[0];
text.parentNode.removeChild(text);
[/coolcode]
第二种删除test1段的方法
[coolcode linenum="off" lang="javascript" download="test.js"]
var text=document.getElementsByTagName('p');
text[0].parentNode.removeChild(text[0]);
[/coolcode]
差别在于第一种方法获取到的text变量
是直接第一段p
是一个变量
而第二种方法
text变量获取到的是整个p的对象组
是一个对象组(不是数组)

好,接下来我们来用表格做实验
我们删除表格中的第二行第二列的单元
[coolcode linenum="off" lang="html" download="test.html"]

test1

test2

test3

test4

test5

test6

[/coolcode]
相对的JS代码如下
[coolcode linenum="off" lang="javascript" download="test.js"]
var tr=document.getElementById("table1").getElementsByTagName("tr");
//先获取到id为table1的元素中的所有tr对象
var td= tr[1].getElementsByTagName("td");
//然后获取第二个tr元素中的所有td元素
td[1].parentNode.removeChild(td[1]);
//删除第二个td元素,就相当于删除第二个tr中的第二个td
[/coolcode]

Last modification:November 26th, 2018 at 04:16 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment