javascript中DoM的详细讲解

widuu 2012-11-10 前台技术 4,273 0 喜欢 (0)

一、DOM
1.作用:
DOM(document Object Model)
1.document文档 HTML XML文件标记语言
2.object(HTML元素转成的js对象)

注意:如果需要js操作html文档,就需要把html文档转成js对象

a.操作属性

b.操作内容

[php]
innerText (IE可用) textContent(fire)
innerHtml

鉴于火狐和IE的不同写个方法

//obj是方法 value 是值
function fii(obj,value){
if(document.all){
if(typeof(value)=="undefined")
return obj.innerText;
else
return obj.innerText=value;
}else{
if(typeof(value)=="undefined")
return obj.innerContent;
else
return obj.innerContent=value;
}
}

outerText

outerHtml
[/php]
c.操作样式
[php]
<a id="widuu" href="www.widuu.com" target="_blank" title="widuu">111111111</a>

var obj=document.getElementById("widuu");
obj.href="http://www.widuu.com";
obj.style.fontSize="29px";
obj.style.backgroundColor="red";
</script>
[/php]
样式中background-color改变为backgroundColor这个是-替换成大写字母
[php]
test{
width:100px;
htight:200px;
color:red;
bgcolor:yellow;
}
classname样式类
obj.classname="test";
obj.classname='';就是空
[/php]
有了以上三点的操作之前先转成对象

转成对象的两种形式

1.标记名(多个)、id(唯一)、name(多个)

document中的三个方法
[php]
var obj=getElementsByTagName("div");
var obj=getElementById("widuu");
var obj=getElementsByName("com");

2.通过数组

document.embeds=[object]
document.body=[object]
document.title=

document.applets=[object]
document.all=[object HTMLAllCollection]
document.scripts=[object HTMLCollection]
document.forms=[object HTMLCollection]
document.images=[object HTMLCollection]
document.styleSheets=[object StyleSheetList]
document.anchors=[object HTMLCollection]

举例
<form name='form1' aciton='' method>
<input type="text" name="username" value="zhangsan">

alert(document.form1.username.value);
alert(document.forms.form1.username.value);
alert(document.forms['form1'].username.value);
//其他的document的属性是什么 我们可以遍历然后出来大家自己参考看下
var pro='';
for (pro in document){
document.write("document."+pro+"="+document[pro]+"<br>");
}
[/php]
二、BOM

D-document O-object M-model
将文档想成一个倒数的结构
[php]
<htmL>
<head>
<title></title>
</head>
<body>
<div>
<p>
<span><a></a></span>
</p>
</div>
<form>

</form>
</body>
</htmL>
html
head body
title div form
p span a
[/php]
一、树状结构,每一个部分,元素,内容,属性 注释都是一个节点
二、只要知道一个节点,按关系找到其他节点,

父节点: parentNode

子节点(第一个,最后一个):childNodes firstChild lastChild

同胞节点(上一个,下一个):nextSibling previousSibling

三、找到节点:节点类型nodeType、节点名nodeName、节点值nodeValue

?每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
? nodeName(节点名称)
? nodeValue(节点值)
? nodeType(节点类型)

? nodeName属性含有节点的名称。
? 元素节点的nodeName是标签名称
? 属性节点的nodeName是属性名称
? 文本节点的nodeName永远是#text
? 文档节点的nodeName永远是#document
注释:nodeName所包含的XML元素的标签名称永远是大写的。
? 对于文本节点,nodeValue属性包含文本。
? 对于属性节点,nodeValue属性包含属性值。
? nodeValue属性对于文档节点和元素节点是不可用的。

? nodeType属性可返回节点的类型。
? 最重要的节点类型是:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

举例
[php]
<body>
<div>
<u>222</u>
<b>333</b>
<p id="pp">
<a>
<span></span>
</a>
</p>
<h2></h2>
<i>111</i>
</div>

var pobj=document.getElementById("pp");
alert(pobj.nodeType); //节点类型
alert(pobj.parentNode.nodeName); //取父节点
alert(pobj.childNodes.length); //取子节点
alert(pobj.nextSibling.nodeName); //下一个
alert(pobj.previousSibling.nodeName);

</body>
[/php]
可以在一个文档流中
1.创建一个节点(页面有一个的不能创建)
document.createElement("img");

实例
[php]
<body>
qqqqqqqqqqqqqqqq<br>
qqqqqqqqqqqqqqqq<br>
qqqqqqqqqqqqqqqq<br>
qqqqqqqqqqqqqqqq<br>
<div id="one">
</div>

var one=document.getElementById("one");
function test(){

var obj=document.createElement("a");
obj.href="http://www.widuu.com";
obj.target="_blank";
obj.title="这是一个测试";
obj.innerText="widuu.com";
one.appendChild(obj);
}

aaaaaaaaaaaaa<br>
aaaaaaaaaaaaa<br>
aaaaaaaaaaaaa<br>
aaaaaaaaaaaaa<br>
<a href="javascript:test();">add</a>
</body>
[/php]
insertbefore();在节点之前加入
appendChild()追加子节点
2.添加到文档流中

3.删除一个节点

removeChild();//删除子节点

欢迎转载,转载请注明来自微度网络-网络技术中心http://www.widuu.com

转载请注明来自微度网络,本文标题:《javascript中DoM的详细讲解》

喜欢 0 发布评论
Top