《JavaScript DOM编程艺术》附录提纲

DOM方法

• 创建节点
  • createElement：创建元素节点
  • createTextNode：创建文本节点
• 复制节点
  • cloneNode
• 插入节点
  • appendChild：给元素节点追加一个子节点
  • insertBefore：把一个给定节点插入到一个给定元素节点的前面
• 删除节点
  • removeChild：从一个给定元素里删除一个子节点
• 替换节点
  • replaceChild：把一个给定父元素里的一个子节点，替换为另一个节点
• 设置属性节点
  • setAttribute：为给定元素节点添加一个新的属性值或是改变它的现有属性值
• 查找节点
  • getAttribute：返回一个给定元素节点的一个给定属性的值
  • getElementById：寻找一个有着给定id属性值的元素
  • getElementsByTagName：寻找有着给定标签名的所有元素
  • hasChildNodes：用来检查一个给定元素是否有子节点

DOM属性

• 节点的属性
  • nodeName：返回一个字符串，其内容是给定节点的名字，只读
  • nodeType：返回一个整数，代表给定节点的类型，一共有12种，1：元素节点，3：文本节点
  • nodeValue：返回给定节点的当前值
• 遍历节点树
• childNodes：返回一个数组，这个数组由给定元素节点的子节点构成
• firstChild：返回一个给定元素节点的第一个子节点
• lastChild：返回一个给定元素节点的最后一个子节点
• nextSibling：返回一个给定节点的下一个同一个父节点的节点
• parentNode：返回给定节点的父节点
• previousSibling：返回一个给定节点的前一个同一个父节点的子节点

---

DOM 方法

 

创建节点

①创建元素节点 createElement() ，返回值是一个指向新建元素节点的引用指针。

reference = document.createElement(element)

②创建文本节点 createTextNode() ，返回值是一个指向新建文本节点的引用指针。

reference = document.createTextNode(text)

使用appendChild把两者联系起来参见createElement.htm

 

复制节点

复制节点 cloneNode() ，返回值是一个指向新建克隆节点的引用指针。

reference = node.cloneNode(deep)

这个方法只有一个布尔类型的参数：true 或 false ，true 表示复制子节点，false表示不复制子节点

 

插入节点

①给元素节点追加一个子节点 appendChild() ，返回值是一个指向新增子节点的引用指针。

reference = element.appendChild(newChild)

②把一个给定节点插入到一个给定元素节点的给定子节点前面 insertBefore() ，返回值是一个指向新增子节点的引用指针。

reference = element.insertBefore(newNode, targetNode)

 

删除节点

从一个给定元素里删除一个子节点 removeChild() ，返回值是一个指向已被删除的子节点的引用指针。

reference = element.removeChild(node),

参数node也是一个元素节点，比如

         

h1

         

ts

         

tss

 

var dd=document.getElementById("ts");

dd.parentNode.removeChild(dd);

如果想把某个节点从文档的一部分移动另一部分，appendChild() 和 insertBefore() 方法都自动删除这个节点，再把它重新插入到新位置去。

 

替换节点

将一个给定父元素里的一个子节点替换为另外一个节点 replaceChild()，返回值是一个指向已被替换的那个子节点的引用指针。

reference = element.replaceChild(newChild, oldChild)

如果 newChild 节点是文档树上的一个现有节点， replaceChild() 方法将先删除它再用它去替换 oldChild 节点。

参见上一个实例

var dd = document.getElementById("ts");

var ddd = document.getElementById("tss");

dd.parentNode.replaceChild(dd,ddd);使用dd替换ddd

 

设置属性节点

为给定元素节点添加一个新的属性值或是改变皮笑肉不笑现有属性的值 setAttribute()

element.setAttribute(attributeName, attributeValue)

 

查找节点

① getAttribute() ， 返回一个给定元素的一个给定属性节点的值

attributeValue = element.getAttribute(attributeName)

② getElementById() ，返回的元素节点是一个对象，这个对象有 nodeName 、nodeType 、parentNode 、childNodes 、nextSibling,previousSibling 等属性

element = document.getElementById(ID)

③ getElementsByTagName() 寻找有着给定标签名的所有元素，返回一个节点集合,数组所以要使用element[0]的形式

elements = document.getElementsByTagName(tagName)

④ hasChildNodes() 用来检查一个给定元素是否有子节点，返回 true 或 false,一般来说文本节点是其元素节点的子结点

booleanValue = element.hasChildNodes()

dd.childNodes[0] = ts

 

3、DOM属性

 

节点的属性

① nodeName 返回一个字符串，其内容是给定节点的名字

name = node.nodeName

如果节点是元素节点，nodeName 返回这个元素的名字；如果为属性节点，返回这个属性的名字；如果为文本节点，返回一个内容为＃text 的字符串。nodeName 是一个只读属性。

② nodeType 返回一个代表给定节点类型的整数。

integer = node.nodeType

最重要是 ELEMENT_NODE = 1， ATTRIBUTE_NODE = 2， TEXT_NODE = 3

③ nodeValue 返回给定节点的值

value = node.nodeValue

如果节点为属性节点，返回这个属性的值；如果为文本节点，返回这个文本节点的内容；如果为元素节点，返回 null

4 className 返回给定节点的class的值，id返回给定节点的id的值

node = document.getElementById("ts");

node.className,node.id

 

遍历节点树

① childNodes 返回一个给定元素节点的子节点组成的数组

nodeList = node.childNodes

文本节点和属性节点都不包含任何子节点，所以返回值永远为一个空数组；如果想知道某个元素有没有子节点，可用 hasChildNodes方法；想知道某个元素有多少个子节点 node.childNodes.length

在Ie中子结点不嵌套，在firfox中只要是下级的节点就都是子结点，例如

 

dd

   

ddd

ie中子结点的个数是2，firfox中的个数是5