JavaScript基础

1.1 JavaScript基础概念:

JavaScript (ECMAScript) :JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义,但是JavaScript并不是这么一点含义,它是由ECMAScript 核心. DOM 文档对象模型. BOM 浏览器对象模型 这三部分组成。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。


1.1.1 ECMAScript

组成部分:语法,类型,语句,关键字,保留字,操作符,对象。

1.1.2 DOM

文档对象模型(DOM , Document Object Model)是针对XML但是经过拓展用于HTML的应用程序编程接口。DOM把整个页面

映射为一个多层节点结构,开发人员借助DOM Api对节点进行操作。

HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。

HTML DOM 树:


                            JavaScript基础_第1张图片  

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

· JavaScript 能够改变页面中的所有 HTML 元素

· JavaScript 能够改变页面中的所有 HTML 属性

· JavaScript 能够改变页面中的所有 CSS 样式

· JavaScript 能够对页面中的所有事件做出反应


1.1.3 BOM

浏览器对象模型(Browser Object Model)使用BOM控制浏览器显示页面意外的部分。

1.2 在HTML中使用JavaScript方式

1.2.1 javaScript脚本加载的位置

1 通过在网页中加入标记JavaScript的开始和结束,将JavaScript代码放到之间

2 也可以引入一个外部的JavaScript文件,这个JavaScript文件一般以.js作为扩展名

3 原则上,放在之间。但视情况可以放在网页的任何部分

4 一个页面可以有几个

1.3.10 函数

(1)函数语法

function functionname()

{

这里是要执行的代码

}

(2)带参数的函数

function myFunction(var1,var2)

{

这里是要执行的代码

}

(3)带有返回值的函数

function myFunction()

{

var x=5;

return x;

}

若仅仅希望退出函数时 ,也可使用 return 语句

function myFunction(a,b)

{

if (a>b)

{

return;

}

x=a+b

}

1.3.11 内置函数

  • Date:日期函数
  • 属性(1): constructor 所修立对象的函数参考 prototype能够为对象加进的属性和方法 办法(43): getDay() 返回一周中的第几天(0-6) getYear() 返回年份.2000年以前为2位,2000(包括)以后为4位 getFullYear()返回完全的4位年份数 getMonth()返回月份数(0-11) getDate() 返回日(1-31) getHours() 返回小时数(0-23) getMinutes() 返回分钟(0-59) getSeconds() 返回秒数(0-59) getMilliseconds() 返回毫秒(0-999) getUTCDay() 依据国际时间来得到如今是礼拜几(0-6) getUTCFullYear() 根据邦际时间来失掉完全的年份 getUTCMonth()依据国际时间来得到月份(0-11) getUTCDate() 依据国际时间来失掉日(1-31) getUTCHours() 依据国际时间来失掉小时(0-23) getUTCMinutes() 根据邦际光阴来往归分钟(0-59) getUTCSeconds() 依据国际时间来返回秒(0-59) getUTCMilliseconds()依据国际时间来返回毫秒(0-999) getTime() 前往自1970年1月1号0:0:0到如今一同花来的毫秒数 getTimezoneoffset()往归时区偏偏差值,便格林威乱均匀时光(GMT)取运转足原的盘算机所处时区设置之间相差的分钟数) parse(dateString) 返回正在Date字符串中自从1970年1月1日00:00:00以来的毫秒数 setYear(yearInt)设置年份.2位数或4位数 setFullYear(yearInt)设置年份.4位数 setMonth(monthInt)设放月份(0-11) setDate(dateInt) 设置日(1-31) setHours(hourInt) 设置小时数(0-23) setMinutes(minInt) 设置分钟数(0-59) setSeconds(secInt) 设放秒数(0-59) setMilliseconds(milliInt) 设放毫秒(0-999) setUTCFullYear(yearInt) 依据国际时间来设置年份 setUTCMonth(monthInt)依据国际时间来设置月(0-11) setUTCDate(dateInt) 依据国际时间来设置日(1-31) setUTCHours(hourInt) 依据国际时间来设置小时 setUTCMinutes(minInt)依据国际时间来设置分钟 setUTCSeconds(secInt)依据国际时间来设置秒 setUTCMilliseconds(milliInt)根据邦际时间来设置毫秒 setTime(timeInt)设置自1970年1月1日开端的时间.毫秒数 toGMTString()依据格林威乱时光将Date对于象的日期(一个数值)改变成一个GMT光阴字符串,如:Weds,15 June l997 14:02:02 GMT toUTCString() 依据通用时间将一个Date对象的日期转换为一个字符串 toLocaleString()把Date对象的日期(一个数值)改变成一个字符串,使用所在盘算机上配置使用的特定日期格局 toSource()显示对象的源代码 toString()将日期对象转换为字符串 UTC(yyyy, mm, dd, hh, mm, ss, msec)往归自格林威乱尺度光阴到指订时光的差距,双位为毫秒 valueOf()返回日期对象的本初值

    2.Math:数学函数

    constructor 所树立对象的函数参考 prototype可以为对于象参加的属性和方式 E欧推常质,天然对数的顶(约等于2.718) LN2 2的天然对数(约即是0.693) LN10 10的天然对数(约等于2.302) LOG2E 以2为顶的e的对数.(约等于1.442) LOG10E 以10为顶的e的对数(约等于0.434) PI ∏的值(约即是3.14159) SQRT1_2 1/2(0.5)的平方根(便l除以2的平方根,约即是o.707) SQRT2 2的平方根(约等于1.414) 方法: abs(x) 返回数字的相对值 acos(x)返回数字的反余弦值 asin(x)返回数字的反正弦值 atan(x)返回位于-PI/2 和 PI/2 的反正切值 atan2(y,x)前往(x,y)位于 -PI 到 PI 之间的角度 ceil(x)返回 x 四舍五入后的最大整数 cos(x)前往一个数字的余弦值 exp(x)返回 E^x 值 floor(x)返回 x 四舍五入后的最小整数 log(x)返回底数为E的自然对数 max(x,y)返回 x 和 y 之间较大的数 min(x,y)返回 x 和 y 之间较小的数 pow(x,y)返回 y^x 的值 random()返回位于 0 到 1 之间的随机函数 round(x)四舍五进后与整 sin(x)返回数字的正弦值 sqrt(x)返回数字的平方根 tan(x)返回一个角度的正切值 toSource()显示对象的流代码 valueOf()返回数教对象的本初值3.Number 属性: MAX_VALUE The largest possible value a number in JavaScript can have 1.7976931348623157E+308 MIN_VALUE The smallest possible value a number in JavaScript can have 5E-324 NaN Equal to a value that is not a number. NEGATIVE_INFINITY A value that is less than MIN_VALUE. POSOTIVE_INFINITY A value that is greater than MAX_VALUE. prototype A static property of the Number object 方法: toString Returns a string representing the specified object valueOf() 返回数教对象的本初值4.Boolean属性: constructor 所树立对象的函数参考 prototype可以为对象参加的属性和方式 法子: toSource() 显示对象的流代码 toString()将布我值转换为字符串,并且返回成果 valueOf()返回布我对象的原始值

  • String :字符函数
  • 属性: constructor 所树立对象的函数参考 prototype可以为对于象参加的属性和方式 length返回字符串的字符长度 法子(20): anchor("name")用来把字符串转换为HTML锚面标志内() big() 把字符串中的文本变成大字体() blink() 把字符串中的文本变成闪耀字体() bold() 把字符串中的文本变成乌字体() fixed() 把字符串中的文本变成流动间距字体,便电报情势() fontcolor(color)设置字符串中文本的色彩() Fontsize(size) 把字符串中的文本变成指定大小() italics() 把字符串中的白原变成斜字体() Link(url)用来把字符串转换-HTML链交标志中() small() 把字符串中的文本变成小字体() strike() 把字符串中的文本变成划掉字体() sub() 把字符串中的文本变成下标(subscript)字体((SUB>) sup() 把字符串中的文本变成上标(superscript)字体() charAt(index) 返回指定索引处的字符 charCodeAt(index)返回一个整数,该整数表现String对象中指定位置处的字符的Unicode编码 concat(string2)衔接两条或少条字符串 fromCharCode(num1, num2, …,BB霜, numN)获取指定的Unicode值并返回字符串 indexOf(searchString, startIndex)返回字符串中第一个呈现指定字符串的地位 lastlndexOf(searchString, startIndex)返回字符串中最后一个呈现指定字符串的地位 match(regex)在字符串中查觅指定值 replace(regex, newString)将字符串中的某些字符替代成其它字符 search(regex)针对某施行值对字符串入止查觅 slice(startIndex, endIndex)将部门字符抽出并在新的字符串中返回剩余局部 split(delimiter)将字符串分配为数组 substr(startIndex, length)从startIndex与,取length个字符 substring(startIndex, endIndex)从startIndex和endIndex之间的字符,没有包含endIndex toLowerCase() 把字符串中的文本变成小写 toUpperCase()把字符串中的白本变成大写 toSource()显示对象的源代码 valueOf()返回字符串对象的原始值

    4.Array :数组函数

    属性: constructor 所修立对象的函数参考 prototype能够为对象加入的属性和方法 index For an array created by a regular expression match, the zero-based index of the match in the string. input For an array created by a regular expression match, reflects the original string against which the regular expression was matched. length获取数组元素的个数,即最大下标加1办法(13):concat(array1,arrayn)将两个或两个以上的数组值衔接止来,合并后返回成果 join(string)将数组中元素合并为字符串,十月妈咪,string为分隔符.如省详参数则直交合并,不再分隔 pop()移除数组中的最后一个元素并返回当元素 push(value)在数组的终尾加上一个或多个元素,并且返回新的数组长度值 reverse()倒置数组中元素的次序,反背排列 shift()移除数组中的第一个元素并返回当元素 slice(start, deleteCount, [item1[, item2[,...[,itemN]]]])返从一个数组中移除一个或少个元素,假如必要,在所移除元素的地位上拔出新元素,返回所移除的元素 sort(compare Function)在已指定排序号的情形下,依照元素的字女次序排列,假如不是字符串类型则转换成字符串再排序,返回排序后的数组 splice()为数组删除并加加新的元素 toSource()显示对象的源代码 toString()将数组一切元素返回一个字符串,其间用逗号分隔 unshift(value)为数组的开端部门加上一个或者少个元荤,并且返回当数组的新长度 valueOf()返回数组对象的原始值

    5.齐局

    属性: Infinity 指定一个正负无限大的数值 NaN指定一个 “非数字” 值 undefined指订一个已被赋值的变质法子:decodeURI() 为加稀的URI入止解码 decodeURIComponent()为加稀的URI组件解码 encodeURI()将字符串加密为URI encodeURIComponent() 将字符串加稀为URI组件 escape(string)加密一个字符串 ()使用escape()对一个字符串入止解码 eval_r(string)断定一个字符串并将其以足本代码的情势施行 isFinite(number)检测一个值能否为一个有限数字,返回True或False isNaN(string) 检测一个值能否没有是一个有限数字 Number()将一个对象的值转换为一个数字 parseFloat(string)将一个字符串解析为一个浮面数字 parseInt(string)将一个字符串解析为一个整数,没有是四舍五进操做,而是切尾 String(object)将一个对象值转换为一个字符串 number(object)

    6.事情

    属性: a.窗心事件,只在body和frameset元素中才有效 onload页里或者图片加载完成时 onunload用户分开页里时 b.表双元素事情,正在表双元素中才有效 onchange框内容转变时 onsubmit点打降接按钮时 onreset沉新点击鼠标按键时 onselect白原被挑选时 onblur元素失来焦点时 onfocus该元素获与焦面时 c.键盘事情,base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里皆无效 onkeydown按下键盘按键时 onkeypress按下或按住键盘按键时 onkeyup搁启键盘按键时 d.正在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元荤里皆无效 onclick鼠标点打一个对象时 ondblclick鼠标双打一个对象时 onmousedown鼠本被按下时 onmousemove鼠标被挪动时 onmouseout鼠本分开元荤时 onmouseover鼠标经由元素时 onmouseup开释鼠本按键时

    1.4 JavaScript常用技巧函数:

    1.4.1 HTML的标签(节点)操作

    document.write(""); //输出的
    
    document.getElementById("id名"); //获取html页面标签中,标签id属性等于此值的对象。
    
    如:var id = document.getElementById("hid"); //获取id值为hid的标签对象
    
    document.getElementsByTagName("标签名"); //获取当前文档执行的标签对象
    

    1.4.2 HTML标签对象的操作:

    标签对象.innerHTML="内容";//在标签对象内放置指定内容
    
    标签对象.style.css属性名="值" //改变标签对象的样式。
    
    示例:id.style.color="red";
    
    注意:属性名相当于变量名,所以css属性名中的减号要去掉,将后面的首字母大写。
    
    如:font-size(css)---> fontSize(JS属性)
    
    标签对象.value;
    
    //获取标签对象的value值
    
    标签对象.value=”值“;//设置标签对象的value值
    

    1.4.3 输出内容(document.write)

    document.write()直接在网页中输出内容。

    第一种:输出内容用“”括起,直接输出“”号内的内容。

    document.write("I love JavaScript!");
    

    第二种:通过变量,输出内容

    var mystr = "hello world";
    
    document.write(mysrt);//直接写变量名,输出变量存储的内容
    

    第三种:输出多项内容,内容之间用+号连接。

    var mystr = "hello";
    
    document.write(mystr + "I love Java Script");//多项内容之间用+号连接
    

    第四种:输出HTML标签,并起作用,标签使用“”括起来。

    var mystr="hello";
    
    document.write(mystr+"
    ");//输出hello后,输出一个换行符 document.write("JavaScript");

    1.4.4 警告(alert 消息对话框)

    我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。

    语法:alert(字符串或变量);

    var mynum = 30;
    
    alert("hello!");
    
    alert(mynum);
    

    结果:按顺序弹出消息框(alert弹出消息对话框包含一个确定按钮)

    注意:

    1. 在点击对话框"确定"按钮前,不能进行任何其它操作。

    2. 消息对话框通常可以用于调试程序。

    3. alert输出内容,可以是字符串或变量,与document.write 相似

    1.4.5 确认选择(confirm 消息对话框)

    除了向用户提供信息,我们还希望从用户那里获得信息。这里就用到了confirm 消息对话框。

    confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

    语法:confirm(str);

    参数说明:str:在消息对话框中要显示的文本 返回值:Boolean值

    返回值:

    当用户点击"确定"按钮时,返回true

    当用户点击"取消"按钮时,返回false

    注: 通过返回值可以判断用户点击了什么按钮

    
    

    1.4.6 提问(prompt 消息对话框)

    有时候,不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。

    prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。

    语法:

    prompt(str1,str2);
    

    参数说明:

    str1:要显示在消息对话框中的文本,不可修改

    str2:文本框中的内容,可以修改

    返回值:

    1、点击确定按钮,文本框中的内容将作为函数返回值

    2、点击取消按钮,将返回null

    function rec(){
    
     var score; //score变量,用来存储用户输入的成绩值。
    
     score = prompt("请输入你的成绩","90");
    
     if(score>=90){
    
     document.write("你很棒!");
    
     }else if(score>=75){
    
     document.write("不错吆!");
    
     }else if(score>=60){
    
     document.write("要加油!");
    
     }else{
    
     document.write("要努力了!");
    
     };
    
    } ;
    
    
    

    1.4.7 打开新窗口(window.open)

    语法:

    window.open([URL], [窗口名称], [参数字符串])
    

    参数说明:

    URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。

    窗口名称:可选参数,被打开窗口的名称。

    1.该名称由字母、数字和下划线字符组成。

    2.窗口名称:可选,该字符串是一个由逗号分隔的特征列表,声明了被打开窗口的名称。可以是"_top"、"_blank"、"_selft"、"_parent"等。

    _blank 在新窗口显示目标网页
    
    _selft 在当前窗口显示目标网页
    
    _parent 框架网页中当前整个窗口位置显示目标网页
    
    _top 框架网页中在上部窗口中显示目标网页
    

    3.相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。

    4.name 不能包含有空格。

    参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。

    参数表:

    top    Number  窗口顶部离开屏幕顶部的像素数
    
    left    Number  窗口左端离开屏幕左端的像素数
    
    width    Number  窗口的宽度
    
    height    Number  窗口的高度
    
    menubar    yes,no  窗口有没有菜单
    
    toolbar    yes,no  窗口有没有工具条
    
    scrollbars    yes,no   窗口有没有滚动条
    
    status      yes,no   窗口有没有状态栏
    
    
    

    1.4.9 innerHTML属性

    innerHTML属性用于获取或替换HTML元素的内容。

    语法:

    Object.innerHTML
    

    Object是获取的元素对象,如通过document.getElementById("ID")获取元素。

    javascript

    1.4.10 改变HTML样式

    语法:

    Object.style.property=new style;
    

    注意:Object是获取的元素对象,如通过document.getElementById("id")获取的元素

    I love JavaScript

    1.4.11 显示和隐藏(display属性)

    语法:

    Object.style.display = value
    

    value值:

    none 此元素不会被显示(及隐藏)
    
    block 此元素将显示为块级元素(即显示)
    
    mychar.style.display = "block"
    

    1.4.12 控制类名(className属性)

    className属性设置或返回元素的class属性。

    语法:

    object.className = classname
    

    作用:

    1、获取元素的class属性

    2、为网页内的某个元素指定一个css样式来更改该元素的外观

    p2.className = "two";
    

    以上这篇Javascript基础学习笔记(菜鸟必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

    1.5 JavaScript 表单验证

    JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证

    被JavaScript 验证的这些典型的表单数据有:

    · 用户是否已填写表单中的必填项目?

    · 用户输入的邮件地址是否合法?

    · 用户是否已输入合法的日期?

    · 用户是否在数据域 (numeric field) 中输入了文本?

    1.5.1 利用onsubmit表单认证

    如下为一个javacript的一个重要功能应用,利用onsubmit表单认证

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    1.5.2 必填(或必选)项目

    
    
    
    
    
    
    
    
    
    
    
    Email:

    1.5.3 E-mail验证

    意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点

    
    
    
    
    
    
    
    
    
    
    
    Email:

    说明:

    with(field){};设定作用域

    focus() 方法用于给予该元素焦点。这样用户不必点击它,就能编辑显示的文本了。

    1.6 JavaScript事件处理:

    1.6.1 使用一个匿名或回调函数添加事件

    有三种方法加事件

    第一种:

    格式:

    
    

    *第二种:

    
    

    第三种:(火狐不兼容)

    
    

    1.6.2 事件对象:

    属性:

    1\. srcElement
    
    2\. keyCode 键盘值
    

    1.6.3 事件 event window.event

    1\. srcElement 代表事件源对象
    
    2\. keyCode 事件发生时的键盘码 keypress , keydown keyup
    
    3\. clientX, clientY 坐标位置
    
    4\. screenX, screenY
    
    5\. returnValue
    
    6\. cancelBubble;
    
    //为页面添加鼠标右点击事件
    
    window.document.oncontextmenu=function(ent){
    
    //兼容IE和火狐浏览器兼容
    
    var event=ent || window.event;
    
    //获取事件坐标位置
    
    var x=event.clientX;
    
    var y=event.clientY;
    
    ...
    
    }
    
    /*********************对象添加事件*******************/
    
    function addEvent(obj,type,fun){
    
    obj=$(obj);
    
    if(obj.addEventListener){
    
    obj.addEventListener(type,fun); //FF
    
    return true;
    
    }else if(obj.attachEvent){
    
    return obj.attachEvent("on"+type,fun); //IE
    
    }else{
    
    return false;
    
    };
    
    };
    
    /*********************对象删除事件*******************/
    
    function delEvent(obj,type,fun){
    
    obj=$(obj);
    
    if(obj.addEventListener){
    
    obj.removeEventListener(type,fun);
    
    return true;
    
    }else if(obj.attachEvent){
    
    obj.detachEvent("on"+type,fun);
    
    return true;
    
    }else{
    
    return false;
    
    };
    
    };
    
    document.getElementById("one").offsetHeight; //获取one对应对象的高度
    
    obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
    
    obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
    
    obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
    
    obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
    
    document.all ? 'IE' : 'others':在IE下document.all值为1,而其他浏览器下的值为0;
    

    1.7 BOM

    1.7.1 window对象

    
    

    常用的属性:

    *document :对 Document 对象的只读引用
    
    *history
    
    :对 History 对象的只读引用。
    
    *location:用于窗口或框架的 Location 对象
    
    Navigator: 对 Navigator 对象的只读引用
    
    *parent: 返回父窗口。
    
    length: 设置或返回窗口中的框架数量。
    
    Screen: 对 Screen 对象的只读引用
    
    status: 设置窗口状态栏的文本。
    
    top: 返回最顶层的先辈窗口。
    

    常用方法:

    alert() 显示带有一段消息和一个确认按钮的警告框。
    
    confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
    
    prompt() 显示可提示用户输入的对话框。
    
    close() 关闭浏览器窗口。
    
    open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
    
    scrollTo() 把内容滚动到指定的坐标。
    
    setTimeout() 在指定的毫秒数后调用函数或计算表达式。
    
    clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
    
    setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
    
    clearInterval() 取消由 setInterval() 设置的 timeout。
    

    1.7.2 Navigator 对象

    Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

    常用属性:

    with(document) {
    
    write ("你的浏览器信息:
      "); write ("
    • 代码:"+navigator.appCodeName+"
    • "); write ("
    • 名称:"+navigator.appName+"
    • "); write ("
    • 版本:"+navigator.appVersion+"
    • "); write ("
    • 语言:"+navigator.language+"
    • "); write ("
    • 编译平台:"+navigator.platform+"
    • "); write ("
    • 用户表头:"+navigator.userAgent+"
    • "); write ("
    "); }

    1.7.3 Screen 对象

    Screen 对象包含有关客户端显示屏幕的信息

    常用属性:

    document.write( "屏幕宽度:"+screen.width+"px
    " ); document.write( "屏幕高度:"+screen.height+"px
    " ); document.write( "屏幕可用宽度:"+screen.availWidth+"px
    " ); document.write( "屏幕可用高度:"+screen.availHeight+"px" );

    参考了解其他属性信息获取方式

    网页可见区域宽: document.body.clientWidth
    
    网页可见区域高: document.body.clientHeight
    
    网页可见区域宽: document.body.offsetWidth (包括边线的宽)
    
    网页可见区域高: document.body.offsetHeight (包括边线的高)
    
    网页正文全文宽: document.body.scrollWidth
    
    网页正文全文高: document.body.scrollHeight
    
    网页被卷去的高: document.body.scrollTop
    
    网页被卷去的左: document.body.scrollLeft
    
    网页正文部分上: window.screenTop
    
    网页正文部分左: window.screenLeft
    
    屏幕分辨率的高: window.screen.height
    
    屏幕分辨率的宽: window.screen.width
    
    屏幕可用工作区高度: window.screen.availHeight
    
    屏幕可用工作区宽度: window.screen.availWidth
    

    1.7.4 History 对象

    History 对象包含用户(在浏览器窗口中)访问过的 URL。

    1.7.5 Location 对象

    Location 对象包含有关当前 URL 的信息。

    //获取页面中第二form表单中,一个username输入框的值(7种方式)
    
    //alert(document.forms[1].username.value);
    
    alert(document.myform.username.value);
    
    //alert(document.forms.myform.username.value);
    
    //alert(document.forms.item(1).username.value);
    
    //alert(document.forms['myform'].username.value);
    
    //alert(document['myform'].username.value);
    
    //alert(document.forms.item('myform').username.value); //火狐不兼容
    

    1.8 DOM

    1.8.1 基本概念

    HTML DOM 定义了访问和操作HTML文档的标准方法。

    HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。

    DOM 被分为不同的部分:

    1.Core DOM

    定义了一套标准的针对任何结构化文档的对象

    2.XML DOM

    定义了一套标准的针对 XML 文档的对象

    3.HTML DOM

    定义了一套标准的针对 HTML 文档的对象。

    节点:根据 DOM,HTML 文档中的每个成分都是一个节点。

    DOM 是这样规定的:

    整个文档是一个文档节点

    每个 HTML 标签是一个元素节点

    包含在 HTML 元素中的文本是文本节点

    每一个 HTML 属性是一个属性节点

    注释属于注释节点

    节点彼此间都存在关系。

    除文档节点之外的每个节点都有父节点。

    大部分元素节点都有子节点。

    当节点分享同一个父节点时,它们就是同辈(同级节点)。

    节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点

    节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点

    查找并访问节点

    你可通过若干种方法来查找您希望操作的元素:

    通过使用 getElementById() 和 getElementsByTagName() 方法

    通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性

    节点信息

    每个节点都拥有包含着关于节点某些信息的属性。这些属性是:

    nodeName(节点名称)
    
    nodeValue(节点值)
    
    nodeType(节点类型)
    
    nodeName 属性含有某个节点的名称。
    
    元素节点的 nodeName 是标签名称
    
    属性节点的 nodeName 是属性名称
    
    文本节点的 nodeName 永远是 #text
    
    文档节点的 nodeName 永远是 #document
    

    1.8.2 HTML DOM 对象参考

    Document: 代表整个 HTML 文档,可被用来访问页面中的所有元素
    
    常用集合属性:forms
    
    Anchor : 代表  元素
    
    Area : 代表图像映射中的  元素
    
    Base : 代表  元素
    
    Body : 代表  元素
    
    Button : 代表