标签:
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 + "秒后跳转...";
标签:
原文地址:http://www.cnblogs.com/hetong/p/4852420.html