015.
HTML DOM的新特性
核心DOM操作网页中的各元素，可以实现动态的HTML。但是，选择某个元素非常麻烦，特是当层级越深时，操作就更麻烦。核心DOM查找元素并不实用。DOM为HTML提供了专用的方法，就是HTML DOM。
HTML DOM的特性
（1）每一个HTML元素(标记)，都对应一个元素对象(对象)。任何HTML标记都对应一个元素对象。
（2）每一个HTML元素的属性，都与元素对象的属性一一对应。
举例：
<img id=“obj” src=“images/xingxing.gif” />
<script>
Var obj = document.getElementById(“obj”);
obj.src = “images/yueliang.gif”;
obj.title = “图片标题”
obj.style = “width:400px;height:300px;”;
obj.border = 1;
obj.class = “img01”3
</script>
HTML DOM访问HTML的方法
（1）使用getElementById()方法
<div id=“box”></div>
var obj = document.getElementById(“box”);
obj.style = “width:400px;height:300px;”
obj.setAttribute(“style”,”width:400px;padding:20px;”);
//给id=box的元素添加一个图片
Var node_img = document.createElement(“img”);
node_img.src = “images/bg.gif”;
obj.appendChild(node_img);
//清除div中所有的内容
obj.innerHTML = “”;
（2）使用getElementsByTagName()方法
含义：取得某一个标记下的所有指定的子标记，返回一个数组类型。
<ul id=“obj”>
<li>北京市</li>
<li>天津市</li>
<li>武汉市</li>
<li>上海市</li>
<li>广州市</li>
</ul>
Var obj = document.getElementById(“obj”);
Var arr = obj.getElementsByTagName(“li”); //HTML DOM
Var arr = obj.childNodes; //核心DOM
For(var i=0;i<arr.length;i++)
{
arr[i].style = “color:#0000ff;text-decoration:underline;”;
arr[i].setAttribute(“style”,”color:#0000ff;text-decoratin:underline;”);
}
（3）使用name属性
每个HTML标记，都有name属性，一般在表单中使用name来访问。
<form name=“form1” onsubmit=“return checkForm()”>
用户名：<input type=“text” name=“username” />
<input type=“submit” value=“提交表单” />
</form>
//对表单中的username进行验证
function checkForm()
{
Var theForm = document.form1;
if( theForm.username.value == “”){
alert(“用户名不能为空”);
return false;
}else if(theForm.username.value.length <5 && theForm.username.value.length > 20)
{
alert(“用户名只能介于5-20之间”);
return false;
}else
{
return true;
}
}
元素对象的属性和方法
元素对象就是HTML元素对应的对象，就叫元素对象。
tagName：标记的名称，同nodeName一样。
id：同元素的id属性一样
title：同元素的title属性一样
className：同元素的class属性一样，给元素增加一个类样式
innerHTML：指某个标记中的所有内容，可以包含其它标记。
nodeValue：也指某个文本节点的内容，但只能是纯文本。
offsetWidth：指元素对象的宽度(不含滚动条中的内容)
offsetHeight：指元素对象的高度，里面如果没有内容，则高为0
注意：跟css中的height不太一样，CSS中的height，标记可以没有内容，但height可以设置
offsetHeight必须要有内容，否则高为0.
scrollWidth：包含滚动条中的内容的宽度
scrollHeight：包含滚动条中的内容的高度
scrollTop：指向上滚动过去的距离。
scrollLeft：抽向左滚动过去的距离。
offsetTop：指元素距离网页顶端的距离
offsetLeft：指元素距离网页左端的距离
onscroll：当滚动条移动时，执行JS程序。
CSS DOM
每一个HTML标记，都具有style属性，相应的，每一个元素对象都具有style属性。style属性是一个对象。
CSS DOM就是通过style对象来访问和操作CSS。
<script>
function init()
{
//取得id=box的对象
var obj = document.getElementById(“box”);
//给id=box的对象增加样式
obj.setAttribute(“style”,“width:400px;height:300px;”); //核心DOM中的方法
obj.style = “width:400px;height:300px;”; //HTML DOM中的属性
//使用style对象来增加样式
obj.style.width = “400px”; //给id=box的对象增加一个width的CSS属性
obj.style.height = “300px”; //给id=box的对象增加一个height的CSS属性
obj.style.overflow = “hidden”; //数据溢出则隐藏
obj.style.border = “1px solid #ff0000” //增加边框
obj.style.backgroundColor = “#f0f0f0”; //背景颜色
obj.style.paddingTop = “20px”; //上填充为20px
//往id=box中添加一个<h2>标记，内容随意，标题的颜色为#FF0000
var str = “<h2 style=’color:#ff0000’>广州传智播客欢迎您</h2>”;
str += “<ul id=’obj_ul’>”;
str += “<li>HTML超文本标注语言</li>”;
str += “<li>CSS层叠样式表</li>”;
str += “</ul>”;
obj.innerHTML = str; //将str的内容写入到obj对象中
//求出有多少个<li>标记
var obj_ul = document.getElementById(“obj_ul”);
var arr = obj_ul.getElementsByTagName(“li”);
window.alert(“<li>标记的个数为：”+arr.length);
}
</script>
<body onload=“init()”>
<div id=“box”></div>
</body>
将CSS的属性转成style对象的属性
（1）如果CSS的属性是一个单词，可以直接写，必须为全小写。如：obj.style.width = “400px”
（2）如果CSS的属性是多个单词用横线连接的，在书写时，将“横线”去掉，并且从第二个单词开始，每个单词的首字母要大写。如：obj.style.backgroundColor = “red”
