JavaScript DOM 树使用记录
长期学习补充中 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 对象作为全局变量使用
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 中一切皆对象
- 第一种使用方式,这种方法用的比较少,而且也不是很直观
var obj = new Object();
obj.name = "xxx";
obj.age = "1111";
- 第二种方式,使用大括号可以很直观的展示数据
这种格式也成为 json 格式
var person = {
"name" : "xxx",
"age" : "xxx",
"hobby" : ["rap","唱歌","打篮球"]
}
3.2 常用的 Date 对象
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:获得当前的 年份,月份,天,时,分,秒,并实时刷新
<div></div>
<script type="text/javascript">
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);
</script>
3.3 Array 对象
数组使用,通过对象创建
3.3.1 创建一个数组
var num = new Array(); // 创建一个空数组
var num1 = new Array(5); // 创建数组的长度为 5
var num2 = new Array(1,2,3); // 初始化数组
var num3 = []; // 另一种创建数组的方式
3.3.2 数组中常见的用法
var arr = [];
arr.push(1); // 往数组的末尾插入一个元素
arr.unshift(2); // 往数组的头部插入一个元素
arr.pop(); // 往数组的末尾删除一个元素
arr.shift(); // 往数组的头部删除一个元素
arr.length; // 获取数组的长度