我们接着来学习js的一些基础知识点。
1.document:
document是window对象的一个属性。window对象表示浏览器中打开的窗口。如果文档包含框架(frame或者iframe),浏览器会为HTML文档创建一个window对象,并为每一个框架创建一个额外的window对象。所有的全局函数和变量都属于window对象的方法和属性。可以在浏览器中console一下window对象和document对象,理清它们的关系。
document常用属性:
document.title//设置文档标题,与HTNL中的title标签等价 document.bgColor//设置页面背景颜色 document.fgColor//设置页面前景色 document.fileCreateDate//文件建立日期,只读属性 document.fileModifiedDate//文件修改日期,只读属性 document.URL//可返回当前文档的URL document.linkColor//未点击过的链接颜色 doucment.alinkColor//鼠标在此链接上的颜色 document.vlinkColor//已点击过的链接颜色 document.charset//设置字符集,简体中文为gb2312 document.fileSize//文件大小,只读属性 document.cookies//设置和读出cookie
document常用方法:
document.createElement(Tag)//创建HTML元素 document.getElementById(ID)//获得指定id值的对象 document.getElementByName(name)//获得name值的对象 document.write()//动态向页面写内容 document.body.appendChild(oTag)//向节点添加最后一个子节点
2.HTML DOM:
网页被加载时,浏览器会创建DOM对象
DOM是一颗对象的树
3.js可以改变HTML元素、属性、样式、对事件作出回应、改变HTML输出流
document.write("some text...") document.getElementById("eid").innerHTML="new text" document.getElementById("eid").src="..." document.getElementById("eid").style.color="gray"
4.查找元素:
id查找 document.getElementById("eid");
标签查找 var x=document.getElementById("eid");var y=x.getElementsByTagName("p");
类查找 document.getElementsByClassName("eclass");
5.HTML DOM事件:
分配事件:document.getElementById("eid").onclick=function(){}
onload与onunload事件 网页加载
onchange事件 结合对输入字段的验证
onmouseover与onmouseout 鼠标移到或者离开元素
onfocus事件 元素获得焦点
6.节点(增加或者删除HTML元素):
<script type="text/javascript"> var para=document.createElement("p"); var tnode=document.createTextNode("这是新段落哦!"); para.appendChild(tnode); document.getElementById("div1").appendChild(para); </script> <script type="text/javascript"> var par=document.getElementById("pid"); var chi=document.getElementById("cid"); par.removeChild(chi); </script>