js学习笔记--HTML DOM

来源：互联网发布：手机淘宝软件删不掉编辑：程序博客网时间：2024/05/23 00:01

HTML DOM （文档对象模型）
HTML DOM 定义了访问和操作 HTML 文档的标准方法。

JavaScript能够改变页面中的所有 HTML元素
JavaScript能够改变页面中的所有 HTML属性
JavaScript能够改变页面中的所有 CSS样式
JavaScript能够对页面中的所有事件做出反应

1、查找 HTML 元素
有三种方法来查找HTML元素：

通过 id找到 HTML元素
通过标签名找到 HTML元素
通过类名找到 HTML元素

2、改变 HTML

改变HTML输出流（document.write() ）
改变 HTML元素的内容（document.getElementById(id).innerHTML=new HTML）
改变 HTML元素的属性（document.getElementById(id).attribute=new value）
改变 HTML元素的样式（document.getElementById(id).style.property=new style）
对事件作出反应

HTML事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时

当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML表单时
当用户触发按键时

cookies

cookies用来识别用户。

有关cookie的例子：

名字 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!"的欢迎词。而名字则是从 cookie中取回的。

密码 cookie

当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie中取回。

日期 cookie

当访问者首次访问你的网站时，当前的日期可存储于 cookie中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11,2005!"。日期也是从 cookie 中取回的。

例子：

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name+ "=")
if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1
   c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1)c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
}
return ""
}

functionsetCookie(c_name,value,expiredays)
{
var exdate=newDate()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

functioncheckCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again'+username+'!')}
else
{
username=prompt('Please enter yourname:',"")
if (username!=null &&username!="")
    {
   setCookie('username',username,365)
    }
}
}
</script>
</head>

<bodyonLoad="checkCookie()">
</body>
</html>

阅读全文

0 0