一、DOM 1.作用: DOM(document Object Model) 1.document文档 HTML XML文件标记语言 2.object(HTML元素转成的js对象) 注意：如果需要js操作html文档,就需要把html文档转成js对象 a.操作属性 b.操作内容
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
c.操作样式
<a id="widuu" href="yun.widuu.com" target="_blank" title="widuu">111111111</a>
var obj=document.getElementById("widuu");
obj.href="http://yun.widuu.com";
obj.style.fontSize="29px";
obj.style.backgroundColor="red";
</script>
样式中background-color改变为backgroundColor这个是-替换成大写字母
test{
width：100px;
htight:200px;
color:red;
bgcolor:yellow;
}
classname样式类
obj.classname="test";
obj.classname='';就是空
有了以上三点的操作之前先转成对象
转成对象的两种形式
1.标记名（多个）、id(唯一)、name（多个）
document中的三个方法
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>");
}
二、BOM
D-document O-object M-model
将文档想成一个倒数的结构
<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一、树状结构，每一个部分，元素,内容，属性 注释都是一个节点 二、只要知道一个节点，按关系找到其他节点， 父节点： 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 举例
<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>可以在一个文档流中 1.创建一个节点（页面有一个的不能创建） document.createElement("img"); 实例
<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://yun.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>
insertbefore();在节点之前加入
appendChild()追加子节点
2.添加到文档流中
3.删除一个节点
removeChild();//删除子节点
欢迎转载，转载请注明来自微度网络-网络技术中心http://yun.widuu.com
发表评论 取消回复