系列课程目录
第十四讲 DOM编程(二)
前言
JavaScript 操作DOM对象提示:以下是本篇文章正文内容,下面案例可供参考
一、操作DOM
1.DOM元素特性
- element.attributes
返回元素的所有特性 - element.setAttribute(name,value)
设置元素的指定特性 - element.getAttribute(name)
获取元素的指定特性 - element.removeAttribute(name)
删除元素的指定特性
特性和属性的区别
理论上,特性(attribute)与属性(property)是两个不同的概念,特性(attribute)是DOM元素的子节点,属性(property)是DOM元素的特性映射到JS后对应对象的属性(property)。实际使用中,可以忽略两者的区别
2.table对象
table为DOM元素中的一个特别对象,拥有一系列独有的属性和方法
table对象的属性和方法
tableRow对象的属性和方法
tableCell对象的属性和方法
练习:使用JS操作DOM,将data数据转化为表格元素插入到以下table元素
答案:
-
document.createElement(TagName)
创建一个元素节点
-
document.createTextNode(文本内容)
创建一个文本节点
-
element.appendChild(子节点)
向父元素末尾添加子节点
练习:使用JS创建table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" cellspacing="0" id="table">
</table>
<script type="text/javascript">
var data=[{
name:'张三',score:95
},{
name:'李四',score:90
},{
name:'王五',score:98
},{
name:'赵六',score:88
},]
var table=document.getElementById("table");
for(var i=0;i<4;i++){
var tr=document.createElement('tr')
var td=document.createElement('td')
var text=document.createTextNode(data[i]['name'])
tr.appendChild(td)
td.appendChild(text)
var text=document.createTextNode(data[i]['score'])
var td1=document.createElement('td')
tr.appendChild(td1)
td1.appendChild(text)
table.appendChild(tr)
}
</script>
</body>
</html>
2.修改DOM对象
-
element.removeChild(子节点)
删除一个子节点
-
element.replaceChild(新节点,旧节点)
替换一个子节点
-
element.insertBefore(新节点, 已有节点)
在已有的子节点前插入一个新的子节点
二、课堂作业
1.按照要求完成任务
如下(示例):
2.解析代码
- 任务14-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
姓名:<input type="text" name="" id="name" value="" />
<br>
评论:<textarea id="comment">
</textarea>
<br>
<input type="button" name="" id="" value="评论" onclick="add()" /><br>
留言区:
<div id="d">
</div>
<script type="text/javascript">
function time() {
var myDate = new Date();
function gs(m) {
if (m < 10) {
m = "0" + m;
}
return m;
}
var year = myDate.getFullYear();
var month = myDate.getMonth() + 1;
var date = myDate.getDate();
var hour = myDate.getHours();
var min = myDate.getMinutes();
var sec = myDate.getSeconds();
var dateString = year + "年" + gs(month) + "月" + gs(date) + "日 " + gs(hour) + ":" + gs(min) + ":" + gs(sec);
return dateString;
}
function add() {
var div = document.getElementById("d");
var text1 = document.createTextNode("姓名:" + document.getElementById("name").value)
var text2 = document.createTextNode("评论:" + document.getElementById("comment").value)
var text3 = document.createTextNode("时间:" +time())
var a1 = document.createElement('a')
var hr = document.createElement('hr')
div.appendChild(hr)
div.appendChild(a1)
a1.appendChild(text1)
var br1 = document.createElement('br')
div.appendChild(br1)
var a2 = document.createElement('a')
div.appendChild(a2)
a2.appendChild(text2)
var br2 = document.createElement('br')
div.appendChild(br2)
var a3 = document.createElement('a')
div.appendChild(a3)
a3.appendChild(text3)
document.body.appendChild(div)
}
</script>
</body>
</html>