DOM的增删改查

border-collapse: collapse 这个样式可以把表格的内部边框消除,变成一条细线
表格可以通过循环在script中直接表示:

document.write("<table  class = 'table'>")
		document.write("<thead>");
		for (var i = 1 ; i <=1 ; i++){
			document.write("<tr>");
			for(var j = 0 ; j <4 ; j++){
				document.write("<th class = 'th'>" +str[j] + "</th>");
			}
		}
		document.write("<tbody>");
		for (var i = 0 ; i <10 ; i++){
			document.write("<tr>");
			for(var j = 0 ; j <4 ; j++){
				// if (j = 3){
				// 	str1[i][j] = "<a href = 'str1[i][j]'>" str1[i][j] "</a>"
				// }
				document.write("<td class = 'td'>" + str1[i][j] + "</td>");
			}
		}
	<table frame = 'void'>可以去掉表格的外边框。

获取DOM元素的常用方法:
1通过id

var head = document.getElementById("");

2通过class

var rows = document.getElementsByClassName("")

3通过标签名

var tds = document.getElementsByTagName("")

4通过name

var tsd = document.getElementByName("")

childNodes 获取所有的子节点,会把空格和换行也当成节点
children获取所有的子节点

获取第一个子节点console.log(tbody.firstElementChild);
获取最后一个子节点console.log(tbody.lastElementChild);
获取父节点

console.log(tbody.parentNode)
console.log(tbody.previousElementSibling);

创建一个tr节点

var tr= document.createElement("tr");

创建一个td节点

var td1 = document.createElement("td");

设置第一个节点里的内容

td1.innerHTML = "11";

把td1放进tr里

tr.appendChild(td1);

把tr加入tbody

tbody.insertBefore(tr,t);

appendChild接受一个对象节点作为参数,将其作为最后一个节点,插入当前的节点
insertBefore用于将某个节点插入当前节点的位置,第一个参数是要插入的节点,第二个参数适当前节点的一个子节点,新的节点将插在这个节点的前面

removeChild删除这个节点
`

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值