秋前端开发课件-jsuidom-07dom操作

7-DOM操作创建动态页面2015

Spring,

xi'an本章内容遍历DOM父节点，子节点和兄弟节点DOM操作添加，删除和改变元素静态和动态节点列表DOM元素DOM元素DOM元素是用来表达HTML中元素的JavaScript对象可用任一DOM选择器来选择从代码中动态创建DOM元素可以被修改改变将立即应用到DOM和HTML页//改变div内容selectedDiv.innerHTML

=

"changed";//

改变div的背景为"#456"selectedDiv.style.background

=

"#456";var

div=

.createElement("div");DOM元素演示遍历DOMbodyheader

div#wrapperh1#logo

nav

#main-navfooterh2

nav遍历DOMDOM元素有其在DOM树中的位置属性它们的父节点它们的子节点它们的兄弟节点元素在元 前或之后这些属性可以用来遍历DOM遍历DOM(2)element.parentNode返回元素的直接父节点的父节点为nullelement.childNodes返回所有子节点的节点列表包括文本节点（空白）遍历DOM-示例var

trainersList

=.ge

ementsByClassName("trainers-list")[0];var

parent

=

trainersList.parentNode;log("trainers-list的父节点为:"+parent.nodeName+"其id:"+parent.id);var

children=trainersList.childNodes;log("trainers-list的元素:"+children.length);log("trainers-list中元素");for

(var

i

=

0,

len

=

children.length;

i

<

len;

i++){var

subItem

=

children[i]log(subItem.nodeName+"内容:"+

subItem.innerText);}遍历DOM

演示在DOM对象中使用命名元素/邻接的特殊元素DOM元素有一些属性用来找到其首和尾子节点当前节点之前/之后的元素命名元素是：Child

和lastChildnextSibling

/

nex

ementSiblingpreviousSibling

/

previousElementSibling在DOM对象中使用命名元素

演示DOM让网页动态化DOMDOM能够用JS动态可创建HTML元素可删除HTML元素可改变HTML元素改变其内容改变其样式改变其特性创建HTML元素文档对象有方法来创建HTML元素.createElemen返回相关HTML元素类型的对象ementName)var

liElement

=

.createElement("li");console.log(liElement

instanceof

HTMLLIElement);//trueconsole.log(liElement

instanceof

HTMLElement);//trueconsole.log(liElement

instanceof

HTMLDivElement);//false创建HTML元素(2)在HTML元素创建后，可视为其从DOM中选中当HTML元素动态创建时，它们只是JavaScript对象仍然不在网页的DOM中新的HTML元素必须附加到DOM上var

studentsList

=.createElement("ul");var

studentLi

=.createElement("li");studentsList.appendChild(studentLi);.body.appendChild(studentsList);附加元素到DOM

演示元素到其他元前/之后元素入元素DOM

API支持在特定元 前或之后appendChild()总是在DOM元素末parent.insertBefore(newNode,specificElement)元素到其他元前/之后演示删除元素元素可从DOM中删除使用element.removeChild(elToRemove)传递删除元素到其父节点var

trainers

=

.ge

var

trainer

=

trainers.geementsByTagName("ul")[0];ementsByTagName("li")[0];trainers.removeChild(trainer);//删除所选元素var selectedElement

=selectedElement.parentNode.removeChild(selectedElement);删除元素演示更改元素DOM元素能够删除和/或改变节点的子节点和其自身可共同更改用DOM

API每个DOM元素节点能够改变改变其属性改变其外观更改元素(2)考虑每个HTML元素在DOM中唯一如果JavaScript更改了其外观或其位置，仍然是同一个元素对象<div

id="f"><p

id="the-p">text</p></div><div

id="s"></div>…var

second

=var

theP

=.ge

ementById("s");.ge

ementById("the-p");second.appendChild(theP);…//the

DOM

is:<div

id="f"></div><div

id="s"><p

id="the-p">text</p></div>更改HTML元素

演示更改样式每个HTML元素的样式能够用JavaScript改变意味着改变样式特性内联样式，不是CSSvar

div=

.ge

ementById("content");div.style.display

="block";div.style.width

=

"123px";记单位更改HTML元素样式

演示DOM优化附加DOM元素DOM

API提供方法来附加DOM元素到某元素appendChild()方法parentNode.appendChild(node)附加DOM元素

node

到DOM元素parentNode如果parentNode附加到DOM，node也附加到DOM优化附加元素附加其到附加元素到DOM是非常慢的操作当元素附加给DOM，DOM要重新渲染所有新建对象必须同时附加有

Fragment元素是最小DOM元素，没有父节点用于 准备附加的元素，并且DOM中附加DOM元素(2)使用附加元素到附加FragmentFragmentFragment给DOM，只附加其子元素/append-doc-fragment/2•Fragment();dFrag

=

.createdFrag.appendChild(div);….body.appendChild(dFrag);Fragment

演示更快的创建元素创建DOM元素是慢操作创建元素设置内容设置样式设置特性这是个问题，当创建许多有共同结构的元素时所有元素只有一点不同更快的创建元素创建动态元素列表所有的LI元素有相同的类，样式，特性只有innerHTML不同可用DOMElement.cloneNode(true)创建元素的全

（深

）var

clonedNode

=

someElement.cloneNode(true)更快的创建元素

演示练习写一段 ，来创建一些div元素，每个div元素有下列：在20px和100px中的随机宽度和高度随机背景色随机字体颜色屏幕上的随机位置(position:absolute)在div中的文本"div"加粗随机边框半径随机边框颜色在1px和20px中的随机边框宽度练习写一段 ，创建5个div元素，在圆形路径上以100毫秒为间隔移动它们创建文本域和两个type="color"的输入框让文本域的字体颜色与第一个颜色输入框值相同让文本域的背景颜色与第二个颜色输入框值相同练习创建

云在给定容器中可视化一串通过给定的minFontSize和maxFontSize，用不同字体大小来创建 ，大小与出现次数相关var

tags

=

["cms",

"javascript","js","ASP.NET

MVC",

".net",

".net","css","wordpress",

"xaml",

"js",

"http","web","",

"

MVC",

"ASP.NETMVC","wp",

"javas