javascript（五）Document对象与DOM

5.1概念
1）Document对象：每个载入浏览器的HTML文档都会成为Document对象。
①通过使用Document对象，可以从脚本中对HTML页面中的所有元素进行访问（操作文档中的任何内容，都过Document）。
②Document对象是window对象的一部分，可通过window.document方式对其进行访问。
2）DOM：Document Object Model，文档对象模型，HTML文档中的所有节点组成了一个文档树（或节点树）。
①树起始于文档节点，Document对象是一颗文档树的根。
②HTML文档中的每个元素、属性、文本等都代表这树中的一个节点。

5.2根据元素ID查找节点
1）方法：document.getElementById(idValue)
2）忽略文档的结构，通过指定的ID来返回元素节点。
3）可以查找整个HTML文档中的任何HTML元素。
 注意事项：如果ID值错误，则返回null。
5.3根据层次查找节点
1）遵循文档的层次结构，查找单个节点：parentNode、firstChild、lastChild
2）遵循文档的层次结构，查找多个节点：
childNodes：以s结尾的都是数组，则有length属性。
3）案例
eg：根据层次查找节点

a
b
c

var sObj=document.getElementById(“sell”); alert(sObj.childNodes.length);//7？为何是7？！
var s1=sObj.firstChild; alert(s1.innerHTML);//undefined？这又为何为未定义？
解释：childNodes会找到sell下的所有子节点，除了真正的子节点外，还有空格这种特殊节点，所以长度为7。只有不空格，都写一行结果才为3，如：
abc
同理，第一个子节点为空格，firstChild的内容当然也就是undefined了。
5.4根据标签名称查找节点
1）getElementsByTagName(“namestr”)：在某个节点的所有后代里查找某种类型的元素（根据指定的标签名），并返回所有的元素（返回一个节点列表）。
①忽略文档的结构，查找整个HTML文档中的所有元素。
②如果标签名错误，则返回长度为0的节点列表。
 注意事项：单词Elements结尾有s，所以为数组。
2）length属性：返回的是一个节点列表，是个数组，因此可用length属性获取元素个数。使用[index]可定位具体的元素。例如：
文本

一周畅销榜

var spans=document.getElementsByTagName(“span”);
alert(spans.length);//2 alert(spans[1].innerHTML);//榜
5.5读取或者修改节点信息
1）规则一：将HTML标签对象化，操作前先明确被对象化的标签都有什么属性。
如：aObj代表一个 元素，有aObj.href属性，但没有aObj.value和aObj.src
2）规则二：innerHTML：设置或获取位于对象起始和结束标签内的内容。
如：aObj.innerHTML可修改 元素标签中的“元素”两字
 注意事项：单标签无法用innerHTML修改内容。
3）规则三：nodeName：得到某个元素节点和属性节点（即可得到标签或属性名称）及其类型位置。xxx.nodeName：当未知节点类型时，使用该属性获得节点的名称，全大写方式。
如：if(xxx.nodeName == “IMG”) xxx.src = “http://…”;
4）节点属性：getAttribute()方法：根据属性名称获取属性的值。
将HTML标签、属性、CSS样式都对象化。
5.6修改节点的样式
1）style属性：语法：node.style.color; node.style.fontSize
 注意事项：CSS样式中属性名内有“-”的，这里省略，并把后面单词首字母大写！
2）className属性：语法：var Obj=document.getElementById(“p1”);
如：Obj.className=”样式类名称”;//可用于设置不同的样式。
5.7查找并修改节点
1）使用getElementById()方法找到元素节点。
2）修改元素内容：innerHTML
3）修改样式：style属性或className属性
4）修改属性：html属性
5.8三个案例
eg1：表单验证

Name： 3-5个小写字母
Age： 2位数字

function validName(){//验证用户名
var name = document.getElementById(“txtName”).value;//得到录入的用户名
var r = /^[a-z]{3,5}$/;//验证 if(r.test(name))//根据验证结果显示不同的样式 document.getElementById(“nameInfo”).className = “success”; else document.getElementById(“nameInfo”).className = “fail”; return r.test(name);//添加返回 } function validAge(){//验证年龄 var age = document.getElementById(“txtAge”).value;//得到录入的年龄 var r = /^[0-9]{2}$/;//验证
if(r.test(age))//根据验证结果显示不同的样式
document.getElementById(“ageInfo”).className = “success”;
else
document.getElementById(“ageInfo”).className = “fail”;
return r.test(age);//添加返回 }
function validDatas(){//验证所有数据，验证name和age，return true和false
var r1 = validName(); var r2 = validAge(); return r1&&r2 }
 注意事项：οnclick=”return validDatas();返回值为true则提交表单，否则取消提交，即为return false时取消某事件。
eg2：读取或修改节点信息

h2文本

段落文本

h2.style1{ border-top:1px solid red; border-right:2px solid blue; }
function testDocument(){ var imgObj = document.getElementById(“img1”);
imgObj.src = “ok.png”;//修改图片
//修改段落：字体颜色，背景色，字体大小，段落文本
var pObj = document.getElementById(“p1”);
pObj.style.color = “red”;//注：pObj.style = “color:red”;不够对象化
pObj.style.backgroundColor = “silver”;
//注：pObj.style.background-color 不认识减号，去掉减号，下个单词首字母大即可。
pObj.style.fontSize = “25”;//单位由浏览器的默认值决定
pObj.innerHTML = “new text”;
//修改某元素的样式：样式复杂时用
document.getElementById(“h2”).className = “style1”;
//复杂样式先定义一个样式类h2.style1{}（定义在内部样式或外部样式都可以），再用
className操作，不能用class，被系统用了。正常情况是标签中直接写class=”style1”，但为了实现动态效果而使用className进行操作。 }
eg3：购物车

价格	数量	小计
10.00		10.00
20.00		20.00

总计： 00.00

function add(btnObj){//增加购物的数量
var tdObj = btnObj.parentNode;//得到当前按钮所在的td
for(var i=0;i