jsDOM编程：面向对象编程、定时器

本文主要是介绍jsDOM编程：面向对象编程、定时器，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

对象：指的是javascript自己定义的具有特殊功能的一些变量。
面向对象编程就是如何使用这个对象的方法，
js有3个核心对象：history 、 window 、 document， location

document具有获取我们html元素的功能，一共有3个方法：
document.getElementById(“kuang”)
document.getElementsByClassName(“kuang”)
document.getElementsByTagName(“kuang”)

history也提供了3个方法
history.back(); ：返回上一页，一般是二级页面返回一级页面
history.forward(); 跳转到上一次访问的页面。
history.go(number); number表示访问页面的顺序次数， -1表示上一页，1表示下一页 -2表示上2页

location：位置没有常用方法，常用属性有一个。href

location.href=”http://www.baidu.com”; ：制定跳转到百度页面。

window对象：

confirm(“您确认删除该条数据吗？”);
window.alert(“你好”);
showModalDialog(“Dom3.html”);：显示弹出层

window就是js默认的对象，你调用window的方法，可以加window调用，也可以不加window调用，方法都会生效。

js定时器：
定时器就是每隔一段时间去完成一个任务，在javascript里面，也有定时器的概念，原理就是每隔一段时间执行一个功能（每隔一段时间调用一下函数），
setTimeout（字符串, 整形）：是一个定时器，但是只能实现定时一次，不会执行第二次
字符串：你需要去调用的函数/方法的名字
整形：隔多久去调用这个函数

  setTimeout("showInfo()", 1000);： 表示等1秒之后调用showInfo()函数，次方法有一个特点，就是只执行一次，不会执行第二次，如果我们想执行showInfo第二次，那就需要调用setTimeout("showInfo()", 1000);第二次，所以我们可以在showInfo函数中，执行这样代码function showInfo() {var now = new Date();var span = document.getElementById("shijian");span.innerText = now.toLocaleString();setTimeout("showInfo()", 1000);}setTimeout("showInfo()", 1000);<body><span id="shijian" >张三</span></body>innerText：表示双标签之间的文本内容，不包含html代码
innerHTML：获取到标签之间的所有内容，包含html代码function getInfo() {var div1 = document.getElementById("div1");alert(div1);alert(div1.innerText); //百度alert(div1.innerHTML); //<a href="http://www.baidu.com"> 百度 </a>}

setInterval（字符串，数字）：每个多久执行以下字符串函数
字符串：需要调用的方法
数字：间隔的时间
setInterval(“showInfo()”, 1000);

利用定时器实现滚动的title

<head><title id="title1" class="title2">我是济南兴学的员工</title><script>//滚动的标题function flowText() {var title = document.getElementsByTagName("title");title = document.getElementById("title1");title = document.getElementsByClassName("title2");var text = title[0].innerText;var start = text.substr(0,1);var end = text.substr(1,text.length);title[0].innerText = end+start;}setInterval("flowText()", 500);</script></head>

表单验证

<script>function checkForm() {var account = document.getElementById("account").value;var password = document.getElementById("password").value;if(account == '' || password=="") {alert("账号密码位空！");}}</script></head><body><form action="Dom7.html" method="post">账号：<input id="account" type="text"><br>密码：<input id="password" type="password"><br><input   type="reset" value="重置"><input onclick="checkForm()"  type="submit" value="登录"></form></body>

通过代码我们发现， onclick只能调用函数，触发事件，无法阻止表单提交数据。如果需要阻止表单提交数据，需要使用另外一个事件，
onsubmit事件：提交表单的时候触发

    <form onsubmit="return checkForm()" action="Dom7.html" method="post">账号：<input id="account" type="text"><br>密码：<input id="password" type="password"><br><input   type="reset" value="重置"><input  type="submit" value="登录"></form>

为了考虑用户体验，一般不使用alert弹窗来进行提示，而是使用文字提示：

<html><head><title id="title1" class="title2">我是济南兴学的员工</title><script>function checkForm() {var account = document.getElementById("account").value;var password = document.getElementById("password").value;if(account == '') {var msg = document.getElementById("accountMsg");msg.innerText = "请输入正确的账号！";return false;}else {var msg = document.getElementById("accountMsg");msg.innerText = "";}if(password =='') {var msg = document.getElementById("pwdMsg");msg.innerText = "请输入正确的密码！";return false;}}</script></head><body><form onsubmit="return checkForm()" action="Dom7.html" method="post">账号：<input id="account" type="text"><span id="accountMsg" style="color:red"></span><br>密码：<input id="password" type="password"><span id="pwdMsg" style="color:red"> </span><br><input   type="reset" value="重置"><input  type="submit" value="登录"></form></body></html>

其他表单事件如下：
按钮、超链接 οnclick=“”, 单击”
文本框： οnblur=”” ，焦点离开触发事件
下拉框：onchage =“”“” , 当选项发生变化的时候调用
多选框，单选框： οnclick=“””，当单击时候调用

动态创建HTML元素

<script>function changeInfo() {var data= document.getElementById("data");var h1 = document.createElement("h1");  //创建标签var text = document.createTextNode("3亿人都在用的网站");        //创建文字  h1.appendChild(text); //吧元素添加父节点末尾data.appendChild(h1);//data.insertBefore(h1,data.childNodes[0]);  //插入数据到父节点的前面}</script></head><body><div id="data"><p>拼多多上市</p> <a href="javascript:void(0)" onclick="changeInfo()">添加信息</a><h1></h1></div>