DOM:
DOM(Document Object Model)
1.document 文档（HTML XML）标记语言
2.Object 对象（HTML元素转成对象（js对象））
使用js操作html文档，需要将HTML文档结构转成js对象
1.操作属性
2.操作内容：
innerText（IE）textContent（非IE）；
innerHTML（都可以）
outerText
outerHtML
表单内容：value
obj.innerText:不管里面放什么都当做文本，取出标签和文本
alter（obj.innerText)只取文本，不取标签
obj.innerHTML:只取得文本，不取标签。
alter(obj.innerHTML)：取出标签和文本。
outerText:含有本身的标签全部取出
outerHtML含有本身的标签全部取出
3.操作样式
遇到破折线去掉，后面单词首字母大写
aobj.style.backgroundColor="red";
转成对象的两种形式：
1.通过标记名（多个），id名（唯一），name名（多个）
转化成对象
document中的方法转化对象三个方法：
var objs=document.getElementsByTagName("div");
var objs=document.getElementById("one");
var objs=document.getElementsByName("two");
2.通过数组
document.all(所有的标记)
document.embeds（所有动画）
document.script(所有脚本有多少个)
document.applets（嵌套java代码）
document.images(所有的图像)
document.froms（所有的表单）
document.anchors（所有的锚点）
document.stylesheets(所有样式)
document.links(所有连接)
访问方式有7种：
document.forms[1].username.value;(下标)
document.forms["frm2"].username.value;(名字)
document.forms.item(1).username.value;(item的下标)
document.forms.item("frm2").username.value;(item的名字)
document.forms.frm2.username.value;(名字)
document.frm2.username.value;(名字)
document["frm2"].username.value;（名字）
3.model：（模型）
文档想成倒树，每一个部分（元素，内容，属性，注释）
都是一个节点
只要知道一个节点，按照关系找到其他节点
父节点：parentNode
子节点：（第一个，最后一个）childNodes firstChild lastChild
同胞节点：（上一个，下一个）nextSibling previousSibling
找到节点：节点类型（nodeType），节点名（nodeName），节点值（nodeValue）
元素节点名称：
元素节点名称：标签名称
属性节点名称：属性名称
文本节点名称：永远是#text，属性包含文本
文档节点名称：永远是#document，包含属性值
元素节点类型：
元素：1
属性：2
文本：3
注释：8
文档：9
文档流：一个文档执行结束，新的文档在新的页面展示。
创建节点：
在文档流里创建节点（document.createElement("a");）
添加到文档流中()
删除节点：
例：
function test（）
{
var obj=document.createElement("a");
obj.href=" http://www.baidu.com";
obj.target="_black";
obj.title="hhh";
obj.innerText="jiosw";
document.body.appendChild(obj);
}
创建图片节点在a标签里：
var one=documnet.getElementById("one");
function test()
{
var tu=document.createElement("img");
tu.src="hh.gif";
var zzz=document.createElement("a");
zzz.href=" http://www.baidu.com";
zzz.target="_black";
zzz.title="hjhj";
zzz.appendChild(tu);
one.appendChild(zzz);
方法：
function inserAfter(""zzz.");
例:
<html>
<head>
.text
{
width:500px;
height:300px;
border:5px solid blue;
}
.demo
{
font-size:4cm;
color:red;
background:yellow;
}
</head>
<body>
<div>
<div id="one">
</div>
<div name="two">
</div>
<a id="alink" style="width:500;height:200;" href=" http://baidu.com" target="_blank" title="this is test">test</a>
<input id="hh" type="text" name="username" values="zhangsan"><br>
<textares id="zzz">mmmmmmmmmmm</textarea>
<script>
var obj=document.getElementById("alink");
obj.href=" http://www.badu.com";
obj.target="_self";
obj.title="demo demo demo";
obj.hello="mmmmmm";
obj.innerText="<b>brother</b>";
obj.innerHtml="<h1>brother</h1>"
var hh=document.getElementById("username");
obj.style.backgroundColor="red";
obj.style.fontSize="3cm";
obj.className="test demo";
alter(obj.style.width);
alter(obj.hello);
alter(hh.value);
alter(zzz.value);
</script>
</div>
</body>
</html>
兼容：火狐和IE都兼容的方法
例：
<script>
var aobj=document.getElementById("alink");
ffie(aobj,"wwwwwww");
alter(ffie(aobj));
function ffie(obj,values)
{
if(document.all)
{
if(typeof(value)=="undefined")
return innerText;
else
obj.innerText=value;
}
else
{
if(typeof(value)=="undefined")
return obj.textContent;
else
obj.textContent=value;
}
}
</script>
全选，全不选，反选：
<HTML>
<HEAD>
</HEAD>
<BODY>
<script>
document.write("<ul>");
for(var i=0;i<20;i++)
{
document.write("<li>");
document.write('<input type="checkbox" name="ids[]" value="'+i+'">二狗');
document.write("</li>");
}
document.write("</ul>");
</script>
<a href="javascript:sall()">全选</a>
<a href="javascript:fall()">反选</a>
<a href="javascript:nall()">全不选</a>
<script>
var c=document.getElementsByName("ids[]");
function sall()
{
for(var i=0;i<c.length;i++)
c[i].checked="true";
}
function fall()
{
for(var i=0;i<c.length;i++)
if(c[i].checked)
c[i].checked="";
else
c[i].checked=true;
}
function nall()
{
for(var i=0;i<c.length;i++)
c[i].checked="";
}
</script>
</BODY>
</HTML>
选项卡例子：
全选，
例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<script>
document.write("<ul>")
for(var i=0;i<20;i++)
{
document.write("<li>");
document.write('<input type="checkbox" name="ids[]" values="'+i+'">二狗子');
document.write("</li>");
}
document.write("</ul>");
</script>
<label for="ss">
<input id="ss" type="checkbox" onclick="sall(this)">全选</label>
<script>
var b=document.getElementsByName("ids[]");
function sall(obj)
{
for(var i=0;i<b.length;i++)
b[i].checked=obj.checked;
}
</script>
</BODY>
</HTML>
选项卡：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
#card
{
width:300px;
height:200px;
}
#tit
{
width:100%;
height:25px;
line-height:25px;
}
#tit h3
{
margin:0;
padding:0;
background:#ccc;
float:left;
clear:right;
width:80px;
text-align:center;
border:2px solid white;
font-size:12px;
color:#ffffff;
}
#content
{
width:100%;
height:175px;
background:#888;
color:#ffffff;
}
#content div
{
display:none;
}
#content .one
{
display:block;
}
#tit .tit1
{
border:2px solid #888;
background:#888;
}
</style>
</HEAD>
<BODY>
<div id="card">
<div id="tit">
<h3 class="tit1" onmouseover="show(0)">第一项</h3>
<h3 onmouseover="show(1)">第二项</h3>
<h3 onmouseover="show(2)">第三项</h3>
</div>
<div id="content">
<div class="one">
<ul>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
</ul>
</div>
<div>
<ul>
<li>bbbbbbbbbbb</li>
<li>bbbbbbbbbbb</li>
<li>bbbbbbbbbbb</li>
<li>bbbbbbbbbbb</li>
<li>bbbbbbbbbbb</li>
</ul>
</div>
<div>
<ul>
<li>ccccccccccc</li>
<li>ccccccccccc</li>
<li>ccccccccccc</li>
<li>ccccccccccc</li>
<li>ccccccccccc</li>
</ul>
</div>
</div>
</div>
<script>
var h3os=document.getElementsByTagName("h3");
var cdivs=document.getElementById("content").getElementsByTagName("div");
function show(num)
{
for(var i=0;i<h3os.length;i++)
{
if(i==num)
{
h3os[num].className="tit1";
cdivs[num].style.display="block";
}
elae
{
h3os[i].className="";
cdivs[i].style.display="none";
}
}
}
</script>
</BODY>
</HTML>
DOM(Document Object Model)
1.document 文档（HTML XML）标记语言
2.Object 对象（HTML元素转成对象（js对象））
使用js操作html文档，需要将HTML文档结构转成js对象
1.操作属性
2.操作内容：
innerText（IE）textContent（非IE）；
innerHTML（都可以）
outerText
outerHtML
表单内容：value
obj.innerText:不管里面放什么都当做文本，取出标签和文本
alter（obj.innerText)只取文本，不取标签
obj.innerHTML:只取得文本，不取标签。
alter(obj.innerHTML)：取出标签和文本。
outerText:含有本身的标签全部取出
outerHtML含有本身的标签全部取出
3.操作样式
遇到破折线去掉，后面单词首字母大写
aobj.style.backgroundColor="red";
转成对象的两种形式：
1.通过标记名（多个），id名（唯一），name名（多个）
转化成对象
document中的方法转化对象三个方法：
var objs=document.getElementsByTagName("div");
var objs=document.getElementById("one");
var objs=document.getElementsByName("two");
2.通过数组
document.all(所有的标记)
document.embeds（所有动画）
document.script(所有脚本有多少个)
document.applets（嵌套java代码）
document.images(所有的图像)
document.froms（所有的表单）
document.anchors（所有的锚点）
document.stylesheets(所有样式)
document.links(所有连接)
访问方式有7种：
document.forms[1].username.value;(下标)
document.forms["frm2"].username.value;(名字)
document.forms.item(1).username.value;(item的下标)
document.forms.item("frm2").username.value;(item的名字)
document.forms.frm2.username.value;(名字)
document.frm2.username.value;(名字)
document["frm2"].username.value;（名字）
3.model：（模型）
文档想成倒树，每一个部分（元素，内容，属性，注释）
都是一个节点
只要知道一个节点，按照关系找到其他节点
父节点：parentNode
子节点：（第一个，最后一个）childNodes firstChild lastChild
同胞节点：（上一个，下一个）nextSibling previousSibling
找到节点：节点类型（nodeType），节点名（nodeName），节点值（nodeValue）
元素节点名称：
元素节点名称：标签名称
属性节点名称：属性名称
文本节点名称：永远是#text，属性包含文本
文档节点名称：永远是#document，包含属性值
元素节点类型：
元素：1
属性：2
文本：3
注释：8
文档：9
文档流：一个文档执行结束，新的文档在新的页面展示。
创建节点：
在文档流里创建节点（document.createElement("a");）
添加到文档流中()
删除节点：
例：
function test（）
{
var obj=document.createElement("a");
obj.href=" http://www.baidu.com";
obj.target="_black";
obj.title="hhh";
obj.innerText="jiosw";
document.body.appendChild(obj);
}
创建图片节点在a标签里：
var one=documnet.getElementById("one");
function test()
{
var tu=document.createElement("img");
tu.src="hh.gif";
var zzz=document.createElement("a");
zzz.href=" http://www.baidu.com";
zzz.target="_black";
zzz.title="hjhj";
zzz.appendChild(tu);
one.appendChild(zzz);
方法：
function inserAfter(""zzz.");
例:
<html>
<head>
.text
{
width:500px;
height:300px;
border:5px solid blue;
}
.demo
{
font-size:4cm;
color:red;
background:yellow;
}
</head>
<body>
<div>
<div id="one">
</div>
<div name="two">
</div>
<a id="alink" style="width:500;height:200;" href=" http://baidu.com" target="_blank" title="this is test">test</a>
<input id="hh" type="text" name="username" values="zhangsan"><br>
<textares id="zzz">mmmmmmmmmmm</textarea>
<script>
var obj=document.getElementById("alink");
obj.href=" http://www.badu.com";
obj.target="_self";
obj.title="demo demo demo";
obj.hello="mmmmmm";
obj.innerText="<b>brother</b>";
obj.innerHtml="<h1>brother</h1>"
var hh=document.getElementById("username");
obj.style.backgroundColor="red";
obj.style.fontSize="3cm";
obj.className="test demo";
alter(obj.style.width);
alter(obj.hello);
alter(hh.value);
alter(zzz.value);
</script>
</div>
</body>
</html>
兼容：火狐和IE都兼容的方法
例：
<script>
var aobj=document.getElementById("alink");
ffie(aobj,"wwwwwww");
alter(ffie(aobj));
function ffie(obj,values)
{
if(document.all)
{
if(typeof(value)=="undefined")
return innerText;
else
obj.innerText=value;
}
else
{
if(typeof(value)=="undefined")
return obj.textContent;
else
obj.textContent=value;
}
}
</script>
全选，全不选，反选：
<HTML>
<HEAD>
</HEAD>
<BODY>
<script>
document.write("<ul>");
for(var i=0;i<20;i++)
{
document.write("<li>");
document.write('<input type="checkbox" name="ids[]" value="'+i+'">二狗');
document.write("</li>");
}
document.write("</ul>");
</script>
<a href="javascript:sall()">全选</a>
<a href="javascript:fall()">反选</a>
<a href="javascript:nall()">全不选</a>
<script>
var c=document.getElementsByName("ids[]");
function sall()
{
for(var i=0;i<c.length;i++)
c[i].checked="true";
}
function fall()
{
for(var i=0;i<c.length;i++)
if(c[i].checked)
c[i].checked="";
else
c[i].checked=true;
}
function nall()
{
for(var i=0;i<c.length;i++)
c[i].checked="";
}
</script>
</BODY>
</HTML>
选项卡例子：
全选，
例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<script>
document.write("<ul>")
for(var i=0;i<20;i++)
{
document.write("<li>");
document.write('<input type="checkbox" name="ids[]" values="'+i+'">二狗子');
document.write("</li>");
}
document.write("</ul>");
</script>
<label for="ss">
<input id="ss" type="checkbox" onclick="sall(this)">全选</label>
<script>
var b=document.getElementsByName("ids[]");
function sall(obj)
{
for(var i=0;i<b.length;i++)
b[i].checked=obj.checked;
}
</script>
</BODY>
</HTML>
选项卡：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style>
#card
{
width:300px;
height:200px;
}
#tit
{
width:100%;
height:25px;
line-height:25px;
}
#tit h3
{
margin:0;
padding:0;
background:#ccc;
float:left;
clear:right;
width:80px;
text-align:center;
border:2px solid white;
font-size:12px;
color:#ffffff;
}
#content
{
width:100%;
height:175px;
background:#888;
color:#ffffff;
}
#content div
{
display:none;
}
#content .one
{
display:block;
}
#tit .tit1
{
border:2px solid #888;
background:#888;
}
</style>
</HEAD>
<BODY>
<div id="card">
<div id="tit">
<h3 class="tit1" onmouseover="show(0)">第一项</h3>
<h3 onmouseover="show(1)">第二项</h3>
<h3 onmouseover="show(2)">第三项</h3>
</div>
<div id="content">
<div class="one">
<ul>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
</ul>
</div>
<div>
<ul>
<li>bbbbbbbbbbb</li>
<li>bbbbbbbbbbb</li>
<li>bbbbbbbbbbb</li>
<li>bbbbbbbbbbb</li>
<li>bbbbbbbbbbb</li>
</ul>
</div>
<div>
<ul>
<li>ccccccccccc</li>
<li>ccccccccccc</li>
<li>ccccccccccc</li>
<li>ccccccccccc</li>
<li>ccccccccccc</li>
</ul>
</div>
</div>
</div>
<script>
var h3os=document.getElementsByTagName("h3");
var cdivs=document.getElementById("content").getElementsByTagName("div");
function show(num)
{
for(var i=0;i<h3os.length;i++)
{
if(i==num)
{
h3os[num].className="tit1";
cdivs[num].style.display="block";
}
elae
{
h3os[i].className="";
cdivs[i].style.display="none";
}
}
}
</script>
</BODY>
</HTML>