JavaScript DOM 树使用记录一、window 对象1.1 window 内置对象1.2 window 事件1.3 window 对象作为全局变量使用二、document 对象2.1 dom 获取标签元素2.2 dom 标签操作2.x 其他 dom 操作三、JavaScript 内置对象3.1 Object 对象3.2 常用的 Date 对象3.2.1 eg:获得当前的 年份,月份,天,时,分,秒,并实时刷新3.3 Array 对象3.3.1 创建一个数组3.3.2 数组中常见的用法长期学习补充中 ing~
一、window 对象1.1 window 内置对象功能
解释
window.location
获取当前页面的地址
window.alert(“xx”)
在游览器上弹出警告框
window.prompt()
在游览器上弹出输入框,同时也包含确认和取消的选项,点击确定给用户返回一个具体确定的值,点击取消会返回一个 null 值
window.confirm(“xxx”)
会在游览器弹出一个询问框窗口,拥有确定和取消的选项,并给用户一个 返回布尔值
window.close()
关闭窗口
window.open()
点开一个新的窗口 ( 不建议使用 )
window.setInterval( function() {} , 毫秒单位)
设置一个定时器
window.setTimeout(function() {} , 毫秒单位))
延时器 (只会执行一次)
window.clearInterval()
清除定时器,同延时器
1.2 window 事件功能
解释
window.onload()
页面加载时会执行
window.onlick()
执行页面点击事件
window.onchange()
事件状态改变时触发
window.onblur()
光标失去焦点事件
1.3 window 对象作为全局变量使用代码语言:javascript代码运行次数:0运行复制window.x = xxx;这样我们就定义了一个全局变量 x
注意:
不建议这么使用 !!!
二、document 对象2.1 dom 获取标签元素功能
解释
getElementById(“xx”) 【id 是惟一的】
获取指定 id 的 html 页面元素对象
getElementsByTagName
获取一系列相同类型的标签(集合)
getElementsByClassName(“xxx”)
通过类名获取指定元素 或者元素集合
2.2 dom 标签操作 首先获得指定的标签,并赋值为 x
功能
解释
x.innerText
获取两个标签之间的 纯文本,也可以直接修改标签内部的所有内容
x.innerHTML
获取 两个标签的内容(包括标签),还可以在标签内部插入标签元素
x.value
获取 from 表单中文本框的内容
2.x 其他 dom 操作功能
解释
document.title
获取页面标题
document.write
向游览器输出内容
document.URL
获取当前页面的 地址
三、JavaScript 内置对象3.1 Object 对象js 中一切皆对象
第一种使用方式,这种方法用的比较少,而且也不是很直观代码语言:javascript代码运行次数:0运行复制var obj = new Object();
obj.name = "xxx";
obj.age = "1111";第二种方式,使用大括号可以很直观的展示数据 这种格式也成为 json 格式
代码语言:javascript代码运行次数:0运行复制var person = {
"name" : "xxx",
"age" : "xxx",
"hobby" : ["rap","唱歌","打篮球"]
}3.2 常用的 Date 对象代码语言:javascript代码运行次数:0运行复制var date = new Date();方法 或 属性
功能
date.getFullYear()
获取当前的年份
date.getMonth()
获取当前的月份,但是月份是从0 开始的,最后一个月是 11,所以计算的时候要加一
date.getDate();
获取当前的天数
date.getHours();
获取当前的小时
date.getMinutes();
获取当前的分钟
date.getSeconds();
获取当前的秒数
date.getTime()
获取当前的时间戳,从 1970年1月1日至今的秒数
3.2.1 eg:获得当前的 年份,月份,天,时,分,秒,并实时刷新代码语言:javascript代码运行次数:0运行复制
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var str = year + " " + (month + 1) + " " + day + " " + hour + " " + minute + " " + second;
document.getElementsByTagName("div")[0].innerText = str;
}
setInterval("getTime()",1000);
3.3 Array 对象数组使用,通过对象创建
3.3.1 创建一个数组代码语言:javascript代码运行次数:0运行复制var num = new Array(); // 创建一个空数组
var num1 = new Array(5); // 创建数组的长度为 5
var num2 = new Array(1,2,3); // 初始化数组
var num3 = []; // 另一种创建数组的方式3.3.2 数组中常见的用法代码语言:javascript代码运行次数:0运行复制var arr = [];
arr.push(1); // 往数组的末尾插入一个元素
arr.unshift(2); // 往数组的头部插入一个元素
arr.pop(); // 往数组的末尾删除一个元素
arr.shift(); // 往数组的头部删除一个元素
arr.length; // 获取数组的长度