响应式网页设计之操作DOM

操作DOM

补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。

---

一、DOM元素特性

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

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

具体的使用，举一个栗子：
html：<input type="text" name="" id="input" value=""/>
① 以下通过 .value 这种无法改变DOM元素，仅改变JS映射对象的属性

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

结果如下图所示：只是改变了页面的显示内容，并未对< input >中的value产生作用。

② 以下通过 .setAttribute 可以改变DOM元素

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

结果如下图所示：可以改变 < input > 中的value

二、table对象

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

tableRow对象的属性和方法

属性/方法	说明
rows	返回table对象中所有行的集合，集合中每一个元素为tableRow对象
insertRow(index)	在表格中插入一行并返回该行 参数为索引值，如不输入，则在末尾添加
deleteRow(index)	在表格中删除一行 参数为索引值，必选

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(新节点, 已有节点)