JavaScript-14

操作DOM

DOM元素特性

• element.attributes
  返回元素的所有特性
• element.setAttribute(name,value)
  设置元素的指定特性
• element.getAttribute(name)
  获取元素的指定特性
• element.removeAttribute(name)
  删除元素的指定特性

特性和属性的区别

理论上，特性(attribute)与属性(property)是两个不同的概念，特性(attribute)是DOM元素的子节点，属性(property)是DOM元素的特性映射到JS后对应对象的属性(property)。实际使用中，可以忽略两者的区别

<input type="text" id="input" value="" />

document.getElementById('input').value='123'

无法改变DOM元素，仅改变JS映射对象的属性
执行上面的语句，输出后

document.getElementById('input').setAttribute("value","123")

可以改变DOM元素
执行上面的语句，输出后

table对象

table为DOM元素中的一个特别对象，拥有一系列独有的属性和方法

下面是table对象的属性和方法：

tableRow对象的属性和方法：

tableCell对象的属性和方法：

创建DOM对象

• document.createElement(TagName)
  创建一个元素节点
• document.createTextNode(文本内容)
  创建一个文本节点
• element.appendChild(子节点)
  向父元素末尾添加子节点
  

var ul = document.createElement('ul')	
var li = document.createElement('li')	
var text = document.createTextNode('苹果')
ul.appendChild(li)
li.appendChild(text)
document.body.appendChild(ul)

修改DOM对象

• element.removeChild(子节点)
  删除一个子节点
• element.replaceChild(新节点,旧节点)
  替换一个子节点
• element.insertBefore(新节点, 已有节点)
  在已有的子节点前插入一个新的子节点

练习

使用JS创建table

var data = [{
				name: '张三',
				score: 95
			}, {
				name: '李四',
				score: 90
			}, {
				name: '王五',
				score: 98
			}, {
				name: '赵六',
				score: 88
			}]

代码如下：

var table = document.createElement('table')	
table.border=1
table.cellSpacing=0
for(var i in data) {
	var tr = document.createElement('tr')
	for(var key in data[i]){
		var td = document.createElement('td')
		var text = document.createTextNode(data[i][key])
		td.appendChild(text)
		tr.appendChild(td)
	}
	table.appendChild(tr)
}document.body.appendChild(table)