DOM:文档对象模型
Dhtml:javascript+css+html(dom)
为什么要使用Dom:
1、HTML页面动态化
2、提升用户交互型
2、
1、document.getEelmentById
可以通过对象的id属性来获取该元素对象
2、document.getElementsByTagName
可以通过元素的标签名得到一组元素对象的数组
3、document.getElementsByName
根据元素的name属性来获得该一组对象的数组，一般节点都具有name属性
document.etElementsByTagName("*")获取document下的所有的标签
var elements=document.getElementsByTagName("*");
for(var i=0;i<elements.length;i++)
{
alert(elements[i]);
}
var 属性值=元素.getAttribute(属性名)；//取得属性名
元素.setAttribute(属性名，新值);//设置属性名
this.setAttribute("class","enter");//设置类的样式名称为enter，浏览器的兼容性的问题；
this.className="enter";//效果同上
this.className="";//取消样式
//美图馆中当鼠标移动上去的时候改变下面的图片和文本提示
<script type="text/javascript">
function showPic(link) {
var url = link.getAttribute("href");//获取属性值
var txt = link.getAttribute("title");//获取属性的值
// 获得节点
var img = document.getElementById("placeholder");
var p = document.getElementById("description");
img.setAttribute("src", url);//元素节点重新赋值
p.lastChild.nodeValue = txt;//元素节点重新赋值
}
</script>
<ul>
<li>
<a href="./img/1.jpg" title="第一美图果果1" onmouseover="showPic(this);" onclick="showPic(this); return false;">美图果果1</a>
</li>
</ul>
onclick="showPic(this); return false;//表示点击的时候不跳转
var allelements=document.getElementById("myForm").elements;//获取表单中的所有元素的的集合
noteType=1//元素节点 noteType=2//属性节点 noteType=3//文本节点
页面设计的基本原则：
预留退路
分离
向后兼容
window.open("url","标题"，"设置");
onclick="popUp(www.baidu.com);"
javascript伪协议：
<a href="javascript:popUp(‘http://www.baidu.com‘);">百度</a>
<a href="#" onclick="">
如果浏览器不认识方法，浏览器就不应该报错,返回
if(!document.getElementByTagName) return false;
<script type="text/javascript" >
document.Write("<a href=‘www.badu.com‘>连接</a></br>");
document.write("dwd");可以在页面中创建内容
放在那里就那执行；
<element>.innerHTML:可以来获取与修改一个标签的所有内容
对于大面积的HTML也的生成有很大的优势 ，因为直接处理html代码
自我们的规范中不要出现哪些不必要的标签
1、由js生成div
2、由innerhtml写入table
如何生成标签（节点）
1、首先创建一个节点
createElement(标签名)；
createTextNode(文本内容");
var div=createElement("div");
设置该节点的属性的值与数据
setAttribute(属性，值)；
div.setAttribute("","")
添加该节点到父节点中；
父节点.appendChild(节点)；
var div=document.createElement("div");//创建一个元素
div.setAttribute("id","form");//设置该元素的属性id等于form
var body=document.getElementsByTagName("body")[0];//获取bod元素，父节点
body.appendChild(div);//在body上添加该节点
window.onload的事件加方法：
什么时候直接等于
什么时候写匿名方法，当window.onload的事件中要绑定多个方法的时候，一般写匿名方法
window.onload=function()
{
createDIV();
addclick();
}
调用一个方法进行判断
function addLoadEvent(func)
{
var old=window.onload;//存储旧的绑定方法
if(!window.onload)//等同于if(window.onload==null)
{//还是执行==null的条件分支，因为前面讲过当null作为if判断时候，都会是假，会去执行else语句
//前面加个！，其实还是表示null,只是执行的语句是IF当中的。
window.onload=func;//当 window.onload=为空时，把方法赋给它
}
else
{
window.onload=function()// window.onload不为空，匿名方法进行添加
{
old();//旧的方法
func();//新的方法
}
}
}
function func1() {
alert(1);
}
function func2() {
alert(2);
}
function func3() {
alert(3);
}
//调用的时候：只要传方法名进去
addLoadEvent(func3);
addLoadEvent(func1);
// 第一次调用 func1
// old null
// onload func1
// 第二次调用 func2
// old func1
// onload func1 func2
// 第三次调用 func3
// old func1 func2
// onload func1 func2 func3
<dl>
<dt>
<dd>
样式的那些事：
只能遍历行内样式
常常用来创建样式
1、根据某些条件来创建 样式
2、根据DOM机构来创建样式
3、根据事件作出响应
伪clas属性
简单原则、兼容原则
时间处理函数：
setTimeout:指定多长时间以后执行一段代码（只执行一次）
setTimeout（js代码段，时间间隔）
setTimeout("alert(我执行了)"，5000);
setInterval:指定间隔多长时间执行一段代码：（循环）
setIntervaljs（代码段，时间间隔）
function moveElement(elemId)
{
var img=document.getElementById(elemId);
var x=parseInt(img.style.left);
var y=parseInt(img.style.top);
x++;
y++;
img.style.left=x+"px";
img.style.top=y+"px";
}
setInterval("moveElement(‘image‘)",5000);
让计时器停下来：
setTimeOut在调用的时候会返回一个值 clearIntever(返回的值) clearTimeOut(返回的值)
让计时器停下来
setTimeout在调用的时候，会返回一个值
clearTimeout(刚才返回的值)
setInterval在调用的时候，也会返回一个值
clearInterval(刚才返回的值)
正则表达式：
// 声明 正则表达式的条件用//刮起来
/*
var reg = /^\d{6}$/;//绝对的匹配，与c#中的一样，前后加^$括起来
// IsMacth test
if(reg.test("1234567")) {
alert("是匹配上了");
} else {
alert("没有匹配上");
}
*/
// exec来取出匹配出来的字符
/*
var reg = /\d+/;
var res = reg.exec("我19了");//
alert(res);
*/
// String提供match方法来提取匹配出来的字符
var txt = "我19了，你今年17了";
var res = txt.match(/\d+/);//只提取出来了19
var res = txt.match(/\d+/g);//后面加个g表示把所有符合条件的都取出来：19/17
alert(res);
可以通过style访问到样式
语法为：
样式的属性名 值
样式的属性名满足骆驼命名法
cssText属性
等价于
getAttribute("style");
setAttribute("style", 。。。);
function setStyleById(id)
{
var elem = document.getElementById(id);
elem.style.color = "red";
// 骆驼命名规则(camelCase)
elem.style.fontFamily = "华文彩云";
elem.style.fontSize = "50px";
elem.style.textDecoration = "none";
// 添加一个边框
elem.style.border = "1px solid blue";
}
一般获取文本节点的值
var p = document.getElementById("interval");
var txt = p.lastChild.nodeValue;
然后可以重新设置它的值
p.lastChild.nodeValue = num + "秒后跳转...";