对象方法和删除节点

最新推荐文章于 2022-12-12 11:22:44 发布

lanyu9

最新推荐文章于 2022-12-12 11:22:44 发布

阅读量496

点赞数

本文链接：https://blog.csdn.net/lanyu1998/article/details/80088478

版权

本文介绍如何使用JavaScript通过document对象进行DOM元素的选择与操作，包括元素的增删改查及事件绑定等。同时展示了如何利用JavaScript实现表格元素的动态交互效果，如全选功能、鼠标悬停变色和点击删除行等。

摘要由CSDN通过智能技术生成

1.document.getElementByName(name)：该方法返回指定名称name的节点序列，name为指定要定位元素对象的名字。

2.document.getElementsByTagName()：该方法返回文档里指定的标签tag的元素对象数组，且返回的对象数组中每个元素分别对应文档里一个特定的元素节点（元素对象）。

3.removeChild(childName)：删除由childName指定的节点。

<head>

<title>节点</title>
<style type="text/css">//表格的样式设计
table{//设置表格宽，高，边框
width: 550px;
height: 300px;
border: 1px solid grey;
border-collapse: collapse;
margin: 50px auto;
}
td{
border: 1px solid grey;
width: 100px;
text-align: center;
font-family: '微软雅黑';
font-size: 18px;
}
#lavender{
background-color: lavender;
}
</style>

var mylink=linklist[i];

//获取第i个a

mylink.οnclick=function(){

//动态绑定onclick事件

var delnode=this.parentNode.parentNode;

var pnode=delnode.parentNode;

//父节点.removeChild(被删除的子节点)

pnode.removeChild(delnode);
}
}

var trs=document.getElementsByTagName('tr');
for(var i=1;i<trs.length;i++){
var mytr=trs[i];
var oldcolor;
mytr.οnmοuseοver=function(){
oldcolor=this.style.background;
this.style.background='pink';
}
mytr.οnmοuseοut=function(){
this.style.background=oldcolor;
}
}
}

</script>

</head>