书签 分享 收藏 举报 版权申诉 / 22
立即下载 加入VIP,免费下载
当前位置： 首页 > 工作范文 > 其它 > 软件工程javascript与DOM.docx

类型软件工程javascript与DOM.docx

  • 文档编号：15635969
  • 上传时间：2023-07-06
  • 格式：DOCX
  • 页数：22
  • 大小：81.13KB
 

 

Justfortesting; 

 

 

 

注意使用这个函数时如果元素的ID不是唯一的，那么会获得第一个符合条件的元素。

 

在IE6中如果input、checkbox,radio.等元素name匹配指定的ID，也会被访问到 

例如下面的例子中，获得的元素是input：

 

 

 

Justfortesting; 

 

 

2、getElementsByName（name） 

返回名字是name的元素数组，在IE6中元素ID匹配这个名字的话，这个元素也将包括在内，而且getElementsByName（）仅用于象input,radio,checkbox等元素对象。

 

象下面例子中georges数组的长度应该是0。

 

 

f

 

f

 

 

vargeorges=document.getElementsByName（"george"）; 

alert（georges.length）; 

 

 

3、getElementsByTagName（tagname） 

getElementByTagName可以用于DOCUMENT也可以用元素。

getElementsByTagName返回具有指定tagname的子元素列表（数组）。

你可以遍历这个数组获得每一个单独的子元素。

当处理很大的DOM结构，使用这种方法可以很容易的所有缩小范围。

 

 

 

 

 

 

 

hi

 

hello

 

 

 

 

DOMElement常用方法 

1、appendChild（node） 

向当前节点对象的追加节点。

经常用于给页面动态的添加内容。

例如下面给div添加一个文本节点：

varnewdiv=document.createElement（"div"）

varnewtext=document.createTextNode（"Anewdiv"）

newdiv.appendChild（newtext）

document.getElementById（"test"）.appendChild（newdiv）

上面的例子中给DIV添加文本，也可以用newdiv.innerHTML=”Anewdiv”实现，

不过innerHTML不属于DOM

2、removeChild（childreference） 

移除当前节点的子节点，返回被移除的节点。

这个被移除的节点可以被插入document树中别的地方

Achild

varchildnode=document.getElementById（"child"）

varremovednode=document.getElementById（"father"）.removeChild（childnode）

3、cloneNode（deepBoolean）

复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。

复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。

当然如果ID的唯一性不重要可以不做处理。

这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。

11111

p=document.getElementById（"mypara"）

pclone=p.cloneNode（true）;

p.parentNode.appendChild（pclone）;

4、replaceChild（newChild,oldChild） 

把当前节点的一个子节点换成另一个节点

例如：

span

varoldel=document.getElementById（"innerspan"）;

varnewel=document.createElement（"p"）;

vartext=document.createTextNode（“ppppp”）;

newel.appendChild（text）;

document.getElementById（"adiv"）.replaceChild（newel,oldel）;

5、insertBefore（newElement,targetElement） 

给当前节点插入一个新节点，如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置。

熊掌我所欲也!

varlovespan=document.getElementById（"lovespan"）

varnewspan=document.createElement（"span"）

varnewspanref=document.body.insertBefore（newspan,lovespan）

newspanref.innerHTML="鱼与";

6、click（） 

执行元素的一次点击，可以用于通过脚本来触发onClick函数

hhh

vardiv=document.getElementById（"test"）;

div.click（）;

DOMElement的属性:

（下面是常用的。

IE5.0以上,mozllia都支持的）

1、childeNodes返回所有子节点对象,

例如

一个和尚有水喝。

两个和尚挑水喝。

三个和尚没水喝。

 

 

2、innerHTML 

这是一个事实上的标准，不属于w3cDOM，但是几乎所有支持DOM的浏览器，都支持这个属性。

通过这个属性我们很容易修改一个元素的HTML。

新人类，什么？

！

window.onload=function（）{

document.getElementsByTagName（"p"）[0].innerHTML="新新人类，什么？

！

"

}

3、style 

返回一个元素的style对象的引用，通过它我们可以获得并修改每个单独的样式。

例如下面的脚本可以修改一个元素的背景色

document.getElementById（"test"）.style.backgroundColor="yellow"

4、firstChild返回第一个子节点

5、lastChild返回最后一个子节点

6、parentNode返回父节点的对象。

7、nextSibling返回下一个兄弟节点的对象

8、previousSibling返回前一个兄弟节点的对象

9、nodeName返回节点的HTML标记名称，使用英文的大写字母，如P,FONT

例如

ddd

第一个例子：

 

使用DOM1.0的javascript动态地创建一个HTMLtable。

 

Samplecode

 首先，我们创建一个table元素

接着，创建一个TBODY元素，它应该是TABLE元素的子元素，

但是现在现在它们之间没有联系。

接着，使用一个循环创建TR元素，它们应该是TBODY元素的子元素。

对于每一个TR，我们使用一个循环创建TD元素，它们是TR的子元素。

对于每一个TD，我们创建一个文本节点元素

现在，我们创建好了这些TABLE,TBODY,TR,TD还有文本元素，但是它们之间的层级

关系并没有建立起来。

然后我们以上相反的顺序把每一个对象添加到它的父节点上。

mycurrent_cell.appendChild（currenttext）;

mycurrent_row.appendChild（mycurrent_cell）;

mytablebody.appendChild（mycurrent_row）;

mytable.appendChild（mytablebody）;

现在DOM层次如下:

BODY

|

TABLE

|

TBODY

|

TR-------------------TR------------------TR

|||

TD-----TD-----TDTD-----TD-----TDTD-----TD-----TD

Javascript标准DOMRange操作

（1）

2级DOM定义了一个createRange（）方法，如果是按照DOM此标准的浏览器（IE并不是支持此标准的，但是IE里的属性或方法却远比标准中定义的多得多），它属于document对象，所以创建一个range对象要这样做：

varoRange=document.createRange（）;

如果你要检测你的浏览器是否支持此标准Range对象，可以用hasFeature（）方法来检测：

varsupportsDOMRanges=document.implementation.hasFeature（"Range","2.0"）;

if（supportsDOMRange）{

varoRange=document.createRange（）;

//rangecodehere

}

Range对象进行简单的选择

最简单用Range进行选择，用selectNode（）或者selectNodeContents（）方法，这两个方法只有一个接收参数，一个DOM节点。

selectNode（）方法选择全部节点，包括它的孩子，而selectNodeContents（）选择的节点只是它的孩子。

如

HelloWorld

oRange1和oRange2包含上面所说的两种方法，但是看了下面的示图相信你能很快明白这两个方法的区别：

当你创建了一个Range对象时，Range实例就会有以下的属性：

startContainer—返回range对象从何开始的节点对象（父节点的第一个节点）

startOffset—返回Range开始的偏移量（offset），如果startContainer是一个文本节点，注释节点，或者是CDATA节点，这个属性返回文本的偏移量，否则返回第一个节点的索引。

endCOntainer—返回Range对象最后一个节点对象（父节点的最后一个节点）

endOffset—返回Range结束时的偏移量（offset）特性与startOffset相同。

commonAncestorContainer—返回第一个包含该Range对象的节点。

注：

这些属性均为只读属性（read-only），startOffset和endOffset将在下文中有较详细的解释。

下面这段代码将说明这些属性，请在Mozillafirefox里运行（支持此标准的浏览器——DOM2级，IE里将无效）：

 

 DOMRangeExample

 

 functionuseRanges（）{

 varoRange1=document.createRange（）;

 varoRange2=document.createRange（）;

 varoP1=document.getElementById（"p1"）;

 oRange1.selectNode（oP1）;

 oRange2.selectNodeContents（oP1）;

 

 document.getElementById（"txtStartContainer1"）.value

    =oRange1.startContainer.tagName;

 document.getElementById（"txtStartOffset1"）.value=

    oRange1.startOffset;

 document.getElementById（"txtEndContainer1"）.value=

    oRange1.endContainer.tagName;

 document.getElementById（"txtEndOffset1"）.value=

    oRange1.endOffset;

 document.getElementById（"txtCommonAncestor1"）.value=

    oRmonAncestorContainer.tagName;

 document.getElementById（"txtStartContainer2"）.value=

    oRange2.startContainer.tagName;

 document.getElementById（"txtStartOffset2"）.value=

    oRange2.startOffset;

 document.getElementById（"txtEndContainer2"）.value=

    oRange2.endContainer.tagName;

 document.getElementById（"txtEndOffset2"）.value=

    oRange2.endOffset;

 document.getElementById（"txtCommonAncestor2"）.value=

    oRmonAncestorContainer.tagName;

 }

 

 

 HelloWorld

 

 

 

 

 

 oRange1

 StartContainer:

    

 StartOffset:

    

 EndContainer:

    

 EndOffset:

    

 CommonAncestor:

    

 

 

 

 

 oRange2

 StartContainer:

    

 StartOffset:

    

 EndContainer:

    

 EndOffset:

    

举报
举报 版权申诉
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：
软件工程 javascript DOM
提示  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
关于本文
本文标题：软件工程javascript与DOM.docx
链接地址：https://www.bingdoc.com/p-15635969.html
关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2023 冰点文库 网站版权所有

经营许可证编号:鄂ICP备19020893号-2


收起
在线客服
意见反馈
返回顶部
展开
QQ交谈
返回顶部