日期:2014-05-16  浏览次数:20339 次

javascript dom一些方法函数的理解

前几天,从新温习了一些javascript dom这本书,再次翻阅,我收益颇多,可能以前阅读的不够仔细,再或者现在写js都是用jquery框架,而对js dom产生了陌生的感觉。感悟是,的确是一本值得人去反复咀嚼的经典之作。

好了,废话不再多说,我今天谈谈以下的几个方法函数:

1.appendChild()

2.createElement()

3.createTextNode()

4.insertBefore()

还有两个自定义的函数

addLoadfunc(func) //这个函数的效果和window.onload方法是一样的,不过他们不同的是,window.onload函数每次只能加载一个函数,如果,一个文件中出现了两次window.onload这个函数,那么根据html文件从上到下执行的数序一样,window.onload最后加载的那个函数将覆盖出现在它前面加载的函数。

insertAfter(newElement,targetElement)//这个函数和js dom中的insertBefore函数类似,只不过插入新元素的位置和insertBefore相反。

首先来说appendChild这个方法:

这个方法是把一个节点插入到一个文档节点树中,

使用方法:parent.appendChild(child).

parent:要插入元素节点的那个元素节点名称.

child:通常是creatElement()和createTextNode()方法创建的元素节点.

如果在parent节点中存在一个child节点,那么原来存在的节点会被新添加的这个child节点完全替换,也就是说,原来的child节点和他的子节点会被全部删掉,并替换成新添加的这个元素节点。

appendChild方法插入的子节点child会被插入到parent文档树的最后一个节点的后面。如果需要在同一个文档节点树上插入多个节点,这个时候就得特别注意一下插入的顺序了.

2.createElement()方法:

该方法就是document对象的一个方法函数,他的作用就是创建并返回一个元素节点,根据编程的一些套路,一般情况下把此方法赋给一个变量,例如:var parms=document.createElement("p");

createElement()方法创建的元素节点如果不插入到一个文档节点书中,那么这个函数创建的元素节点讲毫无用处,所以,我们通常用appendChild()方法把新创建的元素节点插入到一段文本节点数中。

3.createTextNode()和createElement()方法的用法一样,只不过createTextNode()方法创建并返回的是一段文本字符串,是元素节点中的文本。 ? ?还有就是,createTextNode创建的文本字符串都是属于元素节点的子节点childNode。我们如果想要访问某个元素节点中的内容就要使用如下的代码:element.childNodes

4.insertBefore()方法和appendChild方法类似,insertBefore把一个新元素添加到一个现有元素的前面。

使用方法:parent.insertBefore(newElement,targetElement) 新元素和目标元素有共同的父元素。

好了,上面说的有点简单,如果有什么不足的地方,希望大家多多指教,谢谢...