10.8学习笔记

#补充日期★

var mydate=new Date();

mydate.toLocaleDateString();/*yyyy/MM/dd*/

mydate.toLocaleTimeString();/*AM or PM HH:mm:ss*/

mydate.toLocaleString();/*yyyy/MM/dd AM or PM HH:mm:ss*/

#补充事件★

window.onload=function(){

//页面全部加载完成后执行这里的代码

}

#window对象的属性

1. 状态栏(status)[IE勉强支持]

window.status='欢迎访问优就业';

2. 屏幕(screen)

window.screen.width;/*获取屏幕完整宽度*/

screen.height; /*获取屏幕完整高度*/

screen.availWidth; /*获取屏幕可用宽度(去掉了任务栏)*/

screen.availHeight; /*获取屏幕可用高度(去掉了任务栏)*/

3. 历史记录(history)

history.length; /*本次打开浏览器访问过的页面数量*/

history.back(); /*返回上一页*/

history.forward(); /*下一页*/

history.go(2); /*下2页*/

history.go(-1); /*上一页*/

4. 地址栏(location)★

location.reload(); /*刷新页面*/

location.replace('x.html');/*跳转到x.html,不留历史记录*/

location.assign('x.html');/*跳转到x.html,保留记录*/

5. 设备信息(navigator)

navigator.userAgent; /*获取浏览器信息和当前系统信息*/

6. 文档(document)

#try-catch(异常捕获)

try{

//这里写有可能会出现错误的代码

}catch(err){

//如果真的报错了,则会执行这里的代码,err是错误信息

}

//后面的代码会继续运行,不会受到前面错误的影响

#DOM(Document Object Model)-文档对象模型

访问HTML标签的一套标准语法

#bgColor(设置当前页面的背景色)

document.bgColor='red';/*不常用*/

#getElementById(根据ID来查找唯一的标签,找不到返回NULL)★

document.getElementById('元素ID');

以下3个方法返回的不是Array,是伪数组(与Array结构类似)

#getElementsByName(根据表单标签的Name来查找一组元素,找不到[])★

document.getElementsByName('Name值');

#getElementsByTagName(根据标签名获取一组元素,找不到[])★

document.getElementsByTagName('div');

#getElementsByClassName(根据类名获取一组元素,找不到[])★

document.getElementByClassName('class1');

#Node(节点)★

##元素节点

var mydiv=document.getElementById('mydiv');

console.log(mydiv.nodeType);//节点类型(1)

console.log(mydiv.nodeName);//节点名称(DIV)

console.log(mydiv.nodeValue);//节点值(NULL)

##属性节点★

var cls = mydiv.getAttributeNode('class');

console.log(cls.nodeType);//节点类型(2)

console.log(cls.nodeName);//节点名称(class)

console.log(cls.nodeValue);//节点值(wc)

##文本节点★

var txt=document.createTextNode('JavaScript VS PHP');

console.log(txt.nodeType);//节点类型(3)

console.log(txt.nodeName);//节点名称(#text)

console.log(txt.nodeValue);//节点值(JavaScript VS PHP)

#元素节点属性

##以下适用于IE8-

ul.childNodes; //所有子节点

ul.firstChild; //第一个子节点

ul.lastChild; //最后一个子节点

ul.nextSibling; //下一个兄弟节点

ul.previousSibling; //上一个兄弟节点

##以下适用于IE9+

ul.firstElementChild; //第一个子节点

ul.lastElementChild; //最后一个子节点

ul.nextElementSibling; //下一个兄弟节点

ul.previousElementSibling; //上一个兄弟节点

##通用

ul.children; //所有子节点

ul.parentNode; //父节点

#兼容写法(如果左边的使用不了,就使用右边的语法)★

ul.firstElementChild || ul.firstChild;

ul.lastElementChild || ul.lastChild;

ul.nextElementSibling || ul.nextSibling;

ul.previousElementSibling || ul.previousSibling;

#补充日期★

var mydate=new Date();

mydate.toLocaleDateString();/*yyyy/MM/dd*/

mydate.toLocaleTimeString();/*AM or PM HH:mm:ss*/

mydate.toLocaleString();/*yyyy/MM/dd AM or PM HH:mm:ss*/

#补充事件★

window.onload=function(){

//页面全部加载完成后执行这里的代码

}

#window对象的属性

1. 状态栏(status)[IE勉强支持]

window.status='欢迎访问优就业';

2. 屏幕(screen)

window.screen.width;/*获取屏幕完整宽度*/

screen.height; /*获取屏幕完整高度*/

screen.availWidth; /*获取屏幕可用宽度(去掉了任务栏)*/

screen.availHeight; /*获取屏幕可用高度(去掉了任务栏)*/

3. 历史记录(history)

history.length; /*本次打开浏览器访问过的页面数量*/

history.back(); /*返回上一页*/

history.forward(); /*下一页*/

history.go(2); /*下2页*/

history.go(-1); /*上一页*/

4. 地址栏(location)★

location.reload(); /*刷新页面*/

location.replace('x.html');/*跳转到x.html,不留历史记录*/

location.assign('x.html');/*跳转到x.html,保留记录*/

5. 设备信息(navigator)

navigator.userAgent; /*获取浏览器信息和当前系统信息*/

6. 文档(document)

#try-catch(异常捕获)

try{

//这里写有可能会出现错误的代码

}catch(err){

//如果真的报错了,则会执行这里的代码,err是错误信息

}

//后面的代码会继续运行,不会受到前面错误的影响

#DOM(Document Object Model)-文档对象模型

访问HTML标签的一套标准语法

#bgColor(设置当前页面的背景色)

document.bgColor='red';/*不常用*/

#getElementById(根据ID来查找唯一的标签,找不到返回NULL)★

document.getElementById('元素ID');

以下3个方法返回的不是Array,是伪数组(与Array结构类似)

#getElementsByName(根据表单标签的Name来查找一组元素,找不到[])★

document.getElementsByName('Name值');

#getElementsByTagName(根据标签名获取一组元素,找不到[])★

document.getElementsByTagName('div');

#getElementsByClassName(根据类名获取一组元素,找不到[])★

document.getElementByClassName('class1');

#Node(节点)★

##元素节点

var mydiv=document.getElementById('mydiv');

console.log(mydiv.nodeType);//节点类型(1)

console.log(mydiv.nodeName);//节点名称(DIV)

console.log(mydiv.nodeValue);//节点值(NULL)

##属性节点★

var cls = mydiv.getAttributeNode('class');

console.log(cls.nodeType);//节点类型(2)

console.log(cls.nodeName);//节点名称(class)

console.log(cls.nodeValue);//节点值(wc)

##文本节点★

var txt=document.createTextNode('JavaScript VS PHP');

console.log(txt.nodeType);//节点类型(3)

console.log(txt.nodeName);//节点名称(#text)

console.log(txt.nodeValue);//节点值(JavaScript VS PHP)

#元素节点属性

##以下适用于IE8-

ul.childNodes; //所有子节点

ul.firstChild; //第一个子节点

ul.lastChild; //最后一个子节点

ul.nextSibling; //下一个兄弟节点

ul.previousSibling; //上一个兄弟节点

##以下适用于IE9+

ul.firstElementChild; //第一个子节点

ul.lastElementChild; //最后一个子节点

ul.nextElementSibling; //下一个兄弟节点

ul.previousElementSibling; //上一个兄弟节点

##通用

ul.children; //所有子节点

ul.parentNode; //父节点

#兼容写法(如果左边的使用不了,就使用右边的语法)★

ul.firstElementChild || ul.firstChild;

ul.lastElementChild || ul.lastChild;

ul.nextElementSibling || ul.nextSibling;

ul.previousElementSibling || ul.previousSibling;